1、本地mock的使用

1.1 安装mock

 npm i mockjs -S

1.2 在 src 目录下新建 api 文件夹， 在 api 下新建 mockData 文件夹

1.2.1 在mockData 下新建 home.js 文件

export default {
  getHomeData: () => {
    return {
      code: 200,
      data: {
        tableData: [模拟的数据]
      }
    }
  }
}

1.3 在 api 文件夹下新建 mock.js 文件

import Mock from 'mockjs'

// 导入需要处理的文件
import homeApi from './mockData/home'

// 拦截请求
// /home/getData 就是 axios 请求的地址
Mock.mock('/home/getData', homeApi.getHomeData)

1.4 安装 axios

npm i axios -S

1.5 在 main.js 下 全局导入本地 mock

// 本地使用 mock
import './api/mock.js'

1.6 在vue文件中定义一个 函数 发起请求

vue3中需要在 生命周期 onMounted 函数中进行调用 发起请求的函数

const getTableList = async () => {
    const data =  await axios.get('/home/getTabelData')
    consolog(data)
}

2、线上mock的使用

使用 fastmock 网站

接口预览无法打开的话 删除 URL 中的 www. 即可打开网页预览

直接复制接口发起 axios 请求即可

数据的配置

{
  'code': 200,
  'data': [
          {
            name: 'oppo',
            todayBuy: 100,
            monthBuy: 300,
            totalBuy: 800
          },
          {
            name: 'vivo',
            todayBuy: 100,
            monthBuy: 300,
            totalBuy: 800
          },
          {
            name: '苹果',
            todayBuy: 100,
            monthBuy: 300,
            totalBuy: 800
          },
          {
            name: '小米',
            todayBuy: 100,
            monthBuy: 300,
            totalBuy: 800
          },
          {
            name: '三星',
            todayBuy: 100,
            monthBuy: 300,
            totalBuy: 800
          },
          {
            name: '魅族',
            todayBuy: 100,
            monthBuy: 300,
            totalBuy: 800
          }
        ]
}