mockjs可以模拟数据，可以使我们更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。

使用步骤：

1、安装

npm i mockjs

2、配置 src/mock/index.js

        这里的setup是配置，跟vue3的setup不一样。

import Mock from 'mockjs'

// mock的配置
Mock.setup({
  // 随机延时200-300毫秒，模拟网络延时
  timeout: '500-1000'
})

3、在 src/main.js中使用

import './mock'

4、 模拟接口，拦截请求

        拦截请求后的三个参数

// 拦截请求，
// 第一个参数：url，使用正则去匹配
// 第二个参数：请求方式
// 第三个参数： 生成数据的函数

        生成随机数据

// 单个数据
Mock.mock('@integer(0,7)')
// 对象数据
Mock.mock({
    id: '@id',
    name: '@ctitle(2,4)'
})

例一：随机生成简单的数组对象数据

比如拦截 接口路径为 /my/test的接口路径，生成5个对象，里面的数据为随机的id和name。如果想要生成随机的英文名字，则要去掉@cname前面的c。这里的c代表生成中文

import Mock from 'mockjs'

// 拦截接口  /my/test
// 1. 接口地址路径规则，需要匹配到它
// 2. 请求方式
// 3. 返回数据（函数返回数据）
Mock.mock(/\/my\/test/, 'get', () => {
  // 随机数据逻辑 目标：5条数据  [{id:'',name:''},...]
  const arr = []
  for (let i = 0; i < 5; i++) {
    // arr.push(Mock.mock('@id'))
    arr.push(Mock.mock({
      id: '@id',
      name: '@cname'
    }))
  }
  return { msg: '获取数据成功', result: arr }
})

        当我们调用这个接口时生成的mock数据如下 ：

         例二：获取分页数据，前端传递每页多少数据，根据传递的数据Mock对应的数据条数返回给前端。

        1、因为mock会拦截axios的接口调用。所以我们可以从config里面取出url，然后通过？把url分成两部分，后面的部分就是我们携带的参数部分。打印的结果如下，分别为页码，每页显示的数量和商品类型。后端根据pageSize去生成对应的数据条数。

page=1&pageSize=4&collectType=1

        2、这个时候我们就要取到 queryString 里面的pageSize。所以我们要先把queryString转化为对象的形式。

此时我们可以用node内置的包qs。他是不用

下载的，因为当webpack打包时，它会将项目中运用到的nodejs内置的包也打包进来。作为内置资源的一部分。

获取url里面的数据的方法也可以查看我的另一篇文章，不需要借助依赖

https://blog.csdn.net/m0_45219210/article/details/123377690?spm=1001.2014.3001.5502
用法：（1）先引入qs（2）通过qs.parse()方法去解析queryString。

下图是解析前和解析后的数据样式：

 3、解析的结果为queryObject ，如上图。此时我们可通过queryObject.pageSize去拿到需要mock的数据个数，显然我们的结果都字符串类型，我们可以通过js字符串的隐式转化将其转化为数字类型。即在前面添加+号。然后通过for循环将往数组里面追加（push）mock的数据。从代码可见生成了id，name，desc（描述），price（价格）和picture（图片）。其中图片mock生成的图片比较丑。这里是一个url后面随机生成了一个1到9的整型数据，因为这个是后台的图片url。1到8分别代表9张不同的图片。最后把结果返回出去。

import Mock from 'mockjs'
import qs from 'qs'

// 基本配置
Mock.setup({
  // 随机延时200-300毫秒，模拟网络延时
  timeout: '200-300'
})

// 模拟 我的收藏
Mock.mock(/\/member\/collect/, 'get', config => {
  const queryString = config.url.split('?')[1]
  const queryObject = qs.parse(queryString)
  const items = []
  for (let i = 0; i < +queryObject.pageSize; i++) {
    items.push(Mock.mock({
      id: '@id',
      name: '@ctitle(10,20)',
      desc: '@ctitle(4,10)',
      price: '@float(100,200,2,2)',
      // http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_7.jpg
      picture: `http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_${Mock.mock('@integer(1,8)')}.jpg`
    }))
  }
  return {
    msg: '获取收藏商品成功',
    result: {
      counts: 35,
      pageSize: +queryObject.pageSize,
      page: +queryObject.page,
      items
    }
  }
})

生成是数据如下 。前端调用/member/collect时就会被mock拦截，然后得到下图所示的数据。前端通过data.result.items拿到数据去渲染。

此时我们就完成了mock数据的全部过程，当后端接口实现时。我们可以 注掉上图第三步

src/main.js文件里面引入mock的那一行代码，就会将请求发往后端。这个时候如果数据正常。我们前端的业务就已经完成了。不需要更改其他代码。