How To Fetch Data From WEB API In Vue.js Application

 In this article, we will learn about basic concepts of Vue.js and how to install Vue.js and create a new project We will also learn how to perform HTTP Get operation to fetch data in a Vue.js application.

 

What is Vue.js

 

Vue.js is an open-source front-end JavaScript framework for building user interfaces and single-page applications (SPAs). Vue.js is commonly referred to as Vue. and pronounced as View.

 

As per official Vue.js documentation,

 

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

 

Vue was created by Evan You, who was then working for Google using AngularJs in their projects

 

Prerequisites

• Basic knowledge of HTML and JavaScript.
• Text editor (We use Visual studio code)

Vue.js Installation

 

In this article, we will use Vue CLI to install and create vue project.

 

We use the following command to install Vue.js using CLI.

1. npm install -g @vue/cli  

Create Vue.js Project

 

Create a Vue.js project by using the following command.

1. vue create demo1

Now Install the Axios library using the following command. Learn more about Axios. 

1. npm install --save axios     

Install bootstrap using the following command.

1. npm install bootstrap-vue bootstrap --save  

Open main.js file and import bootstrap reference.

1. import 'bootstrap/dist/css/bootstrap.css'  
2. import 'bootstrap-vue/dist/bootstrap-vue.css'  

Now right click on the Src folder and add a new file named 'Http-comman.js'.and add following code in this file.

1. import axios from "axios";  
2.   
3. export default axios.create({  
4.   baseURL: "https://localhost:44314/",  
5.   headers: {  
6.     "Content-type": "application/json"  
7.   }  
8. });  

 Now right click on the Src folder and add a new file named 'Employeeservice.js'.and add following code in this file.

1. import http from "./Http-comman";  
2. class EemployeeService {  
3.      
4.     getAll() {  
5.         return http.get("/api/EmployeeInfo/Getemployeeinfo");  
6.       }  
7.         
8. }  
9. export default new EemployeeService();  

Now right click on the Src folder > components folder and create a new componnet named 'Employeedata.vue'.and add following code in this file.

1. <template>  
2. <div class="row" style="margin-bottom: 10px;">    
3.   <div class="col-sm-12 btn btn-success">    
4.    How to fetch data from WEB API in Vue.js Application  
5.   </div>    
6. </div>   
7.     <div>  
8. <table class="table">  
9.         <thead>  
10.         <th>Id</th>  
11.         <th>Name</th>  
12.         <th>City</th>  
13.         <th>Age</th>  
14.         <th>Technology</th>  
15.         <th></th>  
16.         </thead>  
17.         <tbody>  
18.             <tr v-for="item in employees" :key="item.Id">  
19.                <td>{{item.Id}}</td>  
20.                 <td>{{item.Name }}</td>  
21.                  <td>{{item.City }}</td>  
22.                  <td>{{item.Age}}</td>  
23.                  <td>{{item.Tech}}</td>   
24.             </tr>  
25.         </tbody>  
26.     </table>  
27.     </div>  
28. </template>  
29.   
30. <script>  
31. import EemployeeService from "../Employeeservice";  
32.     export default {  
33.          name: 'Employeelist',  
34.              data() {  
35.        return {  
36.       employees: [],  
37.     };  
38.   },  
39.           created()  
40.         {  
41.              this.retrieveemployees();  
42.         },  
43.       
44.     methods: {  
45.         retrieveemployees() {  
46.       EemployeeService.getAll().then(response => {  
47.       this.employees = response.data;  
48.           console.log(response.data);  
49.         })  
50.         .catch(e => {  
51.           console.log(e);  
52.         });  
53.     },  
54.   
55. }  
56. }  
57. </script>  
58.   
59. <style lang="scss" scoped>  
60.   
61. </style>  

Now open App.vue file and add the following code.

1. <template>    
2.   <Employeelist/>    
3. </template>    
4. <script>    
5. import Employeelist from './components/Employeedata.vue';    
6. export default {    
7.   name: 'App',    
8.   components: {    
9.     Employeelist    
10.   }    
11. }    
12. </script>    
13.     
14. <style>    
15. #app {    
16.   font-family: Avenir, Helvetica, Arial, sans-serif;    
17.   -webkit-font-smoothing: antialiased;    
18.   -moz-osx-font-smoothing: grayscale;    
19.   text-align: center;    
20.   color: #2c3e50;    
21.   margin-top: 10px;    
22. }    
23. </style>     

Create a Web API Project

 

Open Visual Studio and click on create a new project,

 

 

Now select the project and click on the Next button.

 

 

Now select the project name and project location and click on the Create button.

 

 

Choose the template as Web API.

 

 

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data

 

 

Click on the "ADO.NET Entity Data Model" option and click "Add". 

 

 

Select EF Designer from the database and click the "Next" button.

 

 

Add the connection properties, select the database name on the next page, and click OK.

 

 

Check the "Table" checkbox. The internal options will be selected by default. Now, click the "Finish" button.

 

 

Right-click on the Controllers folder and add a new controller. Name it "Employee Info controller" and add the following namespace in the Employee Info controller.

1. using EmployeeInfo.Models;  

Now, add a method to fetch data from the database.

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Net;  
5. using System.Net.Http;  
6. using System.Web.Http;  
7. using EmployeeInfo.Models;  
8.   
9. namespace EmployeeInfo.Controllers  
10. {  
11.     public class EmployeeInfoController : ApiController  
12.     {  
13.         EmployeeEntities DB = new EmployeeEntities();  
14.         [HttpGet]  
15.         public object Getemployeeinfo()  
16.         {  
17.             return DB.EmployeeInfoes.ToList();  
18.         }  
19.     }  
20. }  

Now, let's enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the "Microsoft.Asp.Net.WebApi.Cors" package. Open Webapiconfig.cs and add the following lines:

1. EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");          
2. config.EnableCors(cors);  

 Now, go to Visual Studio code and run the project by using the following command: 'npm run serve'

 

 

 

Summary

 

In this article, we learned how to fetch data using web API and Vue.js. You can download the code from Github.

• Download the code from here.