Hosting Web API in WPF Application and consuming the API with VUE (PART II ==> Consuming the hosted WEB API with VUE client (Axios or VUE Resource) )

In first part we have explained how to host web API within WPF desktop apllication. Now we will show how to consune this service using VUE.js and Axios (VUE.js HTTP plugin) but this can be done with any other AJAX Javascript framework or library or with pure JavaScript. These are the simple steps you shall follow:
1. Open VisualStudio Code ( Prerequsite is that VSCode and Node.js are installed) 2. Open terminal and type following to create new VUE project: a. Navigate to desired project folder with cd command b. Type c. npm install -g @vue/cli d. vue init webpack-simple project-name e. cd to project name f. npm install to install necessary packages g. npm run dev to start the application on localhost h. If errors appear ==> Start windows powershell as admin and execute: set-executionpolicy remotesigned Accept with [J] Restart VS Code and repeat steps 3-7 3. After the project was created it shall look like this:4. After that install AXIOS (npm install axios --save) ore vue-resource(npm install vue-resource –save) 5. The behavior is practically the same for Axios and vue-resource. Just the call of ajax function differs in name like: axios.get… , and for vue-resource it is :
$http.get6. We will contionue with vue-resource.. 7. After vue-resource is installed with npm install vue-resource, update main.js file as follows:8. After that ajax queries are possible as follows (response body is stored in local variable “info”):
ENJOY!!! And of course if you have any questions feel free to contact us.
Post a Comment
0 Comments
Thanks!