手把手搭建vue前后端管理系统-实现axios，使用mock进行拦截并进行假数据制作（十）

本文链接：https://blog.youkuaiyun.com/qq_35991370/article/details/144224506

axios官网：https://www.axios-http.cn/docs/intro

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

一、安装axios：npm install axios -D

二、在Home.vue中进行axios的引入和使用

浏览器的请求的效果：有200的返回值，但是没有获取到api里面的数据，效果如下，每次刷新浏览器都会获取一次get请求：

三、有没有一种工具，可以拦截请求数据，根据接口文档来制造数据，就要用到mockjs

mockjs的官网地址：http://mockjs.com/

安装mock：npm install mockjs -D

(.venv) PS C:\Users\CMCC\PycharmProjects\VIIE3-后台重构\my-vue-app> npm install mockjs -D added 2 packages in 5s

1、在api文件下创建mock.js

如果匹配到api/home/getTableData的路径就会进行拦截，使用mock里面的方法来获取假数据：

import Mock from 'mockjs';

// 引入mockdata下的home里面的api，也就是暴漏出去的gettableData（）
import homeApi from"./mockData/home"

//mock用法里面的参数：1、拦截的路径,可以采用正则表达式进行编写；2、方法；3、制造出的假数据
Mock.mock("/api\/home\/getTableData",'get',homeApi.getTableData()) ;

系统截图如下：

2.定义处理请求的方法

在api文件夹下创建mockData文件夹，在其中创建home.js,以后所有的mock的假数据都在这个文件里面实现：

export default {
  getTableData: () => {
    return {
      code: 200,
      data: {
        tableData: [
          {
            name: "比亚迪",
            todayBuy: 500,
            monthBuy: 3500,
            totalBuy: 22000,
          },
          {
            name: "小鹏",
            todayBuy: 300,
            monthBuy: 2200,
            totalBuy: 24000,
          },
          {
            name: "理想",
            todayBuy: 800,
            monthBuy: 4500,
            totalBuy: 65000,
          },
          {
            name: "华为",
            todayBuy: 1200,
            monthBuy: 6500,
            totalBuy: 45000,
          },
          {
            name: "问界",
            todayBuy: 300,
            monthBuy: 2000,
            totalBuy: 34000,
          },
          {
            name: "大众",
            todayBuy: 350,
            monthBuy: 3000,
            totalBuy: 22000,
          },
        ],
      },
    }
  }

}

3、在main.js里面去引入和注册这个mock的插件：

这个是拦截器的开关，当我们需要制造假数据，验证我们写的接口是否可用的时候就可以添加下面这个注册语句，如果使用的是真实的接口就把下面的语句注销就行。 import "@/api/mock.js"

拦截之前：

使用mock拦截之后，下面的请求就不见了。

4、在home.vue里面使用axios进行请求api：然后将数据在浏览器控制台中进行打印：

axios({
    url:'/api/home/getTableData',
    method:'get'
}).then(res=>{
    console.log(res.data)
//  要学会制造数据，把交互的流程，接口的文档跑通
//   有没有一种工具，可以拦截请求数据，根据接口文档来制造数据，就要用到mockjs
})

效果如下，拿到了具体的数据：

5、然后根据请求拿到的数据进行HOME.VUE前端内容的完善让前端能够展示出获取的表格的数据

注：data里面还有一层tableData，在赋值的时候要特别注意，很容易出错。

axios({
    url:'/api/home/getTableData',
    method:'get'
}).then(res=>{
    console.log(res.data)
//  要学会制造数据，把交互的流程，接口的文档跑通
//   有没有一种工具，可以拦截请求数据，根据接口文档来制造数据，就要用到mockjs

    if(res.data.code==200){
      console.log(res.data.data.tableData)
      tableData.value=res.data.data.tableData
    }
})