在vue中使用Axios技术实现服务器数据显示
引言
本次将在vue中使用axios的get方法实现API数据的显示。
一、问题
在一个实践项目中，要创建一个网站就需要引入服务器数据，本次将一步步的实现vue中使用get请求来显示服务器的数据显示。
二、方法
1.第一步，在vue项目中安装axios，在其目录终端中输入 npm install axios -S，电脑将自动下载axios的相关包，安装完成后检查package.json,看是否在dependencies栏中发现axios及相应的版本号，安装完成后的结果如图所示。
2.第二步，拿到Api中的数据，在App.vue中引入Axios依赖，再写入methods，并创建一个方法，如图所示，为其更为直观，需要看到服务器返回的数据，判断数组中所要的目标字符串，为api中所需要在页面上显示数据相对应的字符串的时候，将api中字符串所对应的数据赋值给上面定义的counter中的一个变量。可以在该方法中写入console.log（res）即可看到json数据，或在检查页面中找到network选项卡，并刷新页面，待刷新完成后即可看到api是否请求，注意：若正常请求，那么code status应为200，并含有绿色小点。
3.第三步，在默认接口export default部分添加data，并在其中添加一个容器，本项目设置容器名为counter，并在该容器中设置各个属性及初始值（对于字符串对象，可以使用一个空的字符串代替），本项目设置counter的属性为total和catagroyName，并设置属性值为0
4.第四步，在<template></template>双标签中设置个标签，并使用mastache语法进行展示，由于已经设置初始值，需要在getFirstCategroy方法上进行数据的替换即可。
三、实验结果与讨论
代码清单 1
//1. 创建一个methods，设置一个发送服务器请求并向服务器获取数据
getFirstCategory() {
get(url).then((res) => {
if (res.status == 200) {
let data = res.data.data;
console.log(data)
for (let i = 0; i < data.length; i++) {
if (data[i].categoryName == '一') {
this.counter.paper = data[i].total
} else if (data[i].categoryName == '二') {
this.counter.ecological = data[i].total
} else if (data[i].categoryName == '三') {
this.counter.scientific = data[i].total
}else if (data[i].categoryName == '四') {
this.counter.animail = data[i].total
}else if (data[i].categoryName == '五') {
this.counter.botany = data[i].total
}
}
// console.log(this.counter)
} else {
this.$message({
type: "error",
message: res.message,
});
}
});
},四、结语
本篇文章是将api中拿到的数据渲染到页面上，需要注意的是，如果api中拿到的数据是一个列表形式，而代码中定义的是一个字典形式，那就需要将列表中的数据遍历出来，进行条件判断，找到所要的数据的时候，将列表中的值赋值给字典中字符串所对应的值。
稿件来源：深度学习与文旅应用实验室（DLETA）
作者：文裕龙
主编：欧洋
腾讯云开发者
