如何在 Vue.js 应用程序中从 WEB API 获取数据
在本文中，我们将了解 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 并点击创建一个新项目，
现在选择项目并单击下一步按钮。
现在选择项目名称和项目位置，然后单击“创建”按钮。
选择模板作为 Web API。
右键单击解决方案资源管理器中的模型文件夹，然后转到添加 >> 新项目 >> 数据
单击“ADO.NET 实体数据模型”选项，然后单击“添加”。
从数据库中选择 EF Designer，然后单击“下一步”按钮。
添加连接属性，在下一页选择数据库名称，然后单击确定。
选中“表格”复选框。默认情况下将选择内部选项。现在，单击“完成”按钮。
右键单击 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 并添加以下行：
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
