I am using Vue via the CDN to build a SPA. The backend of my website uses ASP.NET Core. The main vue spa page is initialized in a razor page and all the components are imported there using html.partial. So far its working great however I need to connect to the database and pull data and also update the database. I cannot find any simple examples or tutorials of how to query a MS SQL database with entity framework in a vue SPA to pull data for my components or update a MS SQL database with user input from forms on the SPA. Although I am new to Vue and ASP.Net The purpose of the SPA is to reduce the need to reload the page so I am curious how this can be done without reloading and keeping the natural SPA feel yet still interact with the database? For security, I set up authentication already and a login page (razor page) which once logged in redirects to the SPA.
1 Answer
You can implement and expose endpoints for querying SQL db with entity framework in backend Web API, then you can consume the API(s) and query data by making http request(s) using Axios etc from your Vue component.
For more information about "Using Axios to Consume APIs", please check this doc:
https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html#Base-Example
7 Comments
Qiuzman
can I just store a post function on my index model and use axios to do a post request to it to pull data? Is that basically the gist of it? Have not done a web api in .net however I have used the razor pages models to build Get and post functions. Also should I be using fetch instead of axios?
Fei Han
can I just store a post function on my index model and use axioms to do a post request to it to pull data? Is that basically the gist of it? Normally, we implement and use Web API with token based authentication as backend service for Vue etc client app. If you just want expose an endpoint with simple logic for query db, you can implement it in your handler method. should I be using fetch instead of axios? Fetch API can also help make request(s), if you prefer that, of course, you can use it in your client side.Qiuzman
will using the index page model’s post handlers pose a security issue vs the web api with token? I did look at the axios documentation of how to pull the data from the request and you can add a header to request so possibly I can add the asp.net antiforgerytoken(read .net core has this built in functionality) to that directly somehow? I am a bit new to this but your guidance is going to save me many headaches in research.
Fei Han
Antiforgery token is used to prevent XSRF/CSRF attacks, which is not for authenticate and authorize user as JWT auth etc does.
Fei Han
And if you have further question about antiforgery token, and secure app with authentication and authorization etc, I recommend you can create a new thread for these questions.
|
