在vue中使用Axios技术实现服务器数据显示

Posted 2022-04-02 算法与编程之美

引言

本次将在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） 

---

作者：文裕龙

主编：欧洋