如何在 Vue.js 应用程序中从 WEB API 获取数据

作者 : 慕源网 本文共3316个字,预计阅读时间需要9分钟 发布时间: 2021-11-19 共301人阅读

在本文中,我们将了解 Vue.js 的基本概念以及如何安装 Vue.js 并创建一个新项目。我们还将学习如何在 Vue.js 应用程序中执行 HTTP Get 操作来获取数据。

什么是 Vue.js

Vue.js 是一个开源前端 JavaScript 框架,用于构建用户界面和单页应用程序 (SPA)。Vue.js 通常被称为 Vue。并发音为 View。

根据官方 Vue.js 文档,

Vue 是一个用于构建用户界面的渐进式框架。与其他单体框架不同,Vue 从头开始​​设计为可逐步采用。核心库仅专注于视图层,易于获取并与其他库或现有项目集成。另一方面,当与现代工具和支持库结合使用时,Vue 也完全有能力为复杂的单页应用程序提供支持。

Vue 是由 Evan You 创建的,他当时在谷歌工作,在他们的项目中使用 AngularJs

先决条件
  • HTML 和 JavaScript 的基本知识。
  • 文本编辑器(我们使用 Visual Studio 代码)

Vue.js 安装

在本文中,我们将使用 Vue CLI 安装和创建 vue 项目。

我们使用以下命令通过 CLI 安装 Vue.js。

npm install -g @vue/cli  

创建 Vue.js 项目

使用以下命令创建一个 Vue.js 项目。

vue create demo1

现在使用以下命令安装 Axios 库。

npm install --save axios     
使用以下命令安装引导程序。
npm install bootstrap-vue bootstrap --save  
打开 main.js 文件并导入引导程序引用。
import 'bootstrap/dist/css/bootstrap.css'  
import 'bootstrap-vue/dist/bootstrap-vue.css' 
现在右键单击 Src 文件夹并添加一个名为“Http-comman.js”的新文件。并在此文件中添加以下代码。
import axios from "axios";  
  
export default axios.create({  
  baseURL: "https://localhost:44314/",  
  headers: {  
    "Content-type": "application/json"  
  }  
});  
 现在右键单击 Src 文件夹并添加一个名为“Employeeservice.js”的新文件。并在此文件中添加以下代码。
import http from "./Http-comman";  
class EemployeeService {  
     
    getAll() {  
        return http.get("/api/EmployeeInfo/Getemployeeinfo");  
      }  
        
}  
export default new EemployeeService(); 
现在右键单击 Src 文件夹 > components 文件夹并创建一个名为“Employeedata.vue”的新组件。并在此文件中添加以下代码。
<template>  
<div class="row" style="margin-bottom: 10px;">    
  <div class="col-sm-12 btn btn-success">    
   How to fetch data from WEB API in Vue.js Application  
  </div>    
</div>   
    <div>  
<table class="table">  
        <thead>  
        <th>Id</th>  
        <th>Name</th>  
        <th>City</th>  
        <th>Age</th>  
        <th>Technology</th>  
        <th></th>  
        </thead>  
        <tbody>  
            <tr v-for="item in employees" :key="item.Id">  
               <td>{{item.Id}}</td>  
                <td>{{item.Name }}</td>  
                 <td>{{item.City }}</td>  
                 <td>{{item.Age}}</td>  
                 <td>{{item.Tech}}</td>   
            </tr>  
        </tbody>  
    </table>  
    </div>  
</template>  
  
<script>  
import EemployeeService from "../Employeeservice";  
    export default {  
         name: 'Employeelist',  
             data() {  
       return {  
      employees: [],  
    };  
  },  
          created()  
        {  
             this.retrieveemployees();  
        },  
      
    methods: {  
        retrieveemployees() {  
      EemployeeService.getAll().then(response => {  
      this.employees = response.data;  
          console.log(response.data);  
        })  
        .catch(e => {  
          console.log(e);  
        });  
    },  
  
}  
}  
</script>  
  
<style lang="scss" scoped>  
  
</style>  
现在打开 App.vue 文件并添加以下代码。
<template>    
  <Employeelist/>    
</template>    
<script>    
import Employeelist from './components/Employeedata.vue';    
export default {    
  name: 'App',    
  components: {    
    Employeelist    
  }    
}    
</script>    
    
<style>    
#app {    
  font-family: Avenir, Helvetica, Arial, sans-serif;    
  -webkit-font-smoothing: antialiased;    
  -moz-osx-font-smoothing: grayscale;    
  text-align: center;    
  color: #2c3e50;    
  margin-top: 10px;    
}    
</style> 

创建 Web API 项目

打开 Visual Studio 并点击创建一个新项目,

如何在 Vue.js 应用程序中从 WEB API 获取数据

现在选择项目并单击下一步按钮。

如何在 Vue.js 应用程序中从 WEB API 获取数据

现在选择项目名称和项目位置,然后单击“创建”按钮。

如何在 Vue.js 应用程序中从 WEB API 获取数据

选择模板作为 Web API。

如何在 Vue.js 应用程序中从 WEB API 获取数据

右键单击解决方案资源管理器中的模型文件夹,然后转到添加 >> 新项目 >> 数据

如何在 Vue.js 应用程序中从 WEB API 获取数据

单击“ADO.NET 实体数据模型”选项,然后单击“添加”。

如何在 Vue.js 应用程序中从 WEB API 获取数据

从数据库中选择 EF Designer,然后单击“下一步”按钮。

如何在 Vue.js 应用程序中从 WEB API 获取数据

添加连接属性,在下一页选择数据库名称,然后单击确定。

如何在 Vue.js 应用程序中从 WEB API 获取数据

选中“表格”复选框。默认情况下将选择内部选项。现在,单击“完成”按钮。

如何在 Vue.js 应用程序中从 WEB API 获取数据

右键单击 Controllers 文件夹并添加一个新控制器。将其命名为“员工信息控制器”并在员工信息控制器中添加以下命名空间。
using EmployeeInfo.Models;  
现在,添加一个从数据库中获取数据的方法。
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Net;  
using System.Net.Http;  
using System.Web.Http;  
using EmployeeInfo.Models;  
  
namespace EmployeeInfo.Controllers  
{  
    public class EmployeeInfoController : ApiController  
    {  
        EmployeeEntities DB = new EmployeeEntities();  
        [HttpGet]  
        public object Getemployeeinfo()  
        {  
            return DB.EmployeeInfoes.ToList();  
        }  
    }  
}  
现在,让我们启用 CORS。转到“工具”,打开 NuGet 包管理器,搜索 CORS,然后安装“Microsoft.Asp.Net.WebApi.Cors”包。打开 Webapiconfig.cs 并添加以下行:
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");          
config.EnableCors(cors);  

现在,转到 Visual Studio 代码并使用以下命令运行项目:’npm run serve’

如何在 Vue.js 应用程序中从 WEB API 获取数据

总结

在本文中,我们学习了如何使用 Web API 和 Vue.js 获取数据。你可以从Github下载代码。


慕源网 » 如何在 Vue.js 应用程序中从 WEB API 获取数据

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录