vue 使用 mockjs 模拟请求后台接口数据，以及url通配匹配模拟增删改

前题：

当没有后台的时候，前端需要模拟请求后台，实现测试代码，此时可以使用mockjs 来模拟后台服务

安装：

npm install mockjs --save-dev

在入口js（main.js）里引入mockjs

// 引入mockjs

require('./mock.js')

添加一个mock规则（mock.js）

const Mock = require('mockjs');

const deviceList = {
  "code": 200,
  "msg": "success",
  "data": [{
    name: 'fan1',
    status: '0',
    id: '0',
  },
    {
      name: 'lamp1',
      status: '1',
      id: '1',
    }
  ]
}

const switchDevice = function (config) {
  const {id} = param2Obj(config.url)
  console.log('接受到id:' + id);
  var dev = deviceList.data.filter(item => item.id == id);
  var status = "0";
  if (dev[0].status == '1') {
    dev[0].status = '0'
  } else {
    dev[0].status = '1'
    status="1"
  }
  return {
    "code": 200,
    "msg": "success",
    "data": status
  }
}

function param2Obj(url) {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}

Mock.mock(RegExp("netty/control/fan.*"), 'get', switchDevice);
Mock.mock('/db/devices', 'post', deviceList);

碰都的问题：

带有queryString 的地址无法匹配 报404

解决方法

解决这个问题其实挺简单的，咱们看一下Mock.mock方法:

Mock.mock( rurl, rtype, template )

其中 rurl 的定义是

rurl 可选。

表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如

/\/domain\/list\.json/、’/domian/list.json’。

也就是说 rurl 参数是可以传正则的。对于 GET 请求来说，最简单的方式就是对所有的 url 都使用正则。如：

Mock.mock(RegExp(url + ".*"), "get", mockData);

这个简单粗暴加 .* 的方式在极端情况下可以会有问题，但是一般情况下是够用的了。如果你的 url 都比较相似，可能会出现冲突的话，就写一个严格点的正则替换一下就好。

示例：

import ApiPath from "@/api/ApiPath"

const Mock = require("mockjs")

let mockUserInfo = {

    "code": 0,

    "data": {

      "fullName": "@CNAME", // 随机生成中文人名

      "userId": 1000234234001,

    }

};

Mock.mock(RegExp(ApiPath.user.getUserInfo + ".*"), "get", (options) =>{

    // 最佳实践，将请求和参数都打印出来，以便调试

    console.debug(ApiPath.user.getUserInfo, options);

    return Mock.mock(mockUserInfo);

});

关于请求参数

我们在写拦截的时候，通过传一个方法可以拿到一个参数 options，其中包含了url和参数等信息，可以通过 options.url 拿到具体的url，options.body 拿到请求参数，我们拦截之后将这个 options 打印到控制台，对于调试非常有帮助。而且可以通过获取请求参数，来实现不同的返回值。

Mock.mock(RegExp(ApiPath.user.getUserInfo + ".*"), "get", (options) =>{

    // 最佳实践，将请求和参数都打印出来，以便调试

    console.debug(ApiPath.user.getUserInfo, options);

    return Mock.mock(mockUserInfo);

});