引言
本次将在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)
作者:文裕龙
主编:欧洋