mockjs配合qs的使用

1、mockjs

mockjs可以模拟得到随机的、较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，充分的保存业务完整度，不需要手写数据，以防大改。

2、qs包（query string）

利用其parse方法，解析字符串，方便解析前端传来的url（一长串）参数

3、配合使用：

假设需要前端发送请求传值到后端获取信息

    findCollect({ page: 1, pageSize: 4})

mockjs拦截到的请求config

import qs from ‘qs’

  const queryString = config.url.split("?")[1];
  const queryObject = qs.parse(queryString);
  console.log(queryObject);

 需要拿到里面的参数值，所以需要做解析。可以使用node自带的qs包，内置方法parse解析

 注意：解析出来的对象内容都为字符串，有的需要转换一下

接下来就可以通过所解析的参数，对数据进行模拟并返回

Mock.mock(/\/member\/collect/, "get", (config) => {
  //模拟数据逻辑
  const items = [];
  const queryString = config.url.split("?")[1];
  const queryObject = qs.parse(queryString);
  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)",
        picture: `http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_${Mock.mock(
          "@integer(1,8)"
        )}.jpg`,
      })
    );
  }
  return {
    msg: "请求测试接口成功",
    result: {
      items,
      counts: 35,
      //+号为了转类型
      pageSize: +queryObject.pageSize,
      page: +queryObject.page,
    },
  };
});