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

分类:前端 2021-11-13T15:04:32    62人阅读   

前题:

当没有后台的时候,前端需要模拟请求后台,实现测试代码,此时可以使用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);

});



支付宝打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

服务器费用不足...

公司事件会议发布会网站模板

创意布局企业网络服务CSS模板

牛奶和饼干css卡通图画

五彩纸屑掉落动画的例子

多用途的Alert弹出窗口Js插件

互联网机构和SaaS服务网页模板

整个页面滚动切换Js插件

优雅而现代的企业和商业html模板

绿色农产品果蔬购物商店HTML主题

5套WebApp模板管理后台界面

21个着陆页HTML5和CSS3模板

绿色环保种植农场网站Html5模板

CSS3主页个人简历网页模板

拖拽实现流程图Drawflow.js插件

CSS 3D盒子打开动画特效

餐厅美食在线订餐HTML5站点模板

沙滩保卫小游戏js源码

网站顶部导航带下拉的Navigation

炫酷网状变形动画js特效

HTML5/Canvas太空射击类小游戏源码

服务器费用不足...
 工具推荐 更多»