• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

mock.js 前端虚拟api数据

创建一个mock.js文件用于设置虚拟数据接口

//mock
import Mock from "mockjs";
Mock.setup({
  timeout: '300-500'
});
/行业数据扩展
Mock.Random.extend({
  industry(min, max) {
    const data = ["financial", "bes", "it", "agriculture", "estate", "medical"];
    let arr = [];
    if (min && max) {//随机范围
      const ranNum = Math.floor(Math.random() * (max - min)) + min;
      for (let i = 0; i < ranNum; i++) {
        arr.push(this.pick(data));
      }
      return arr;
    } else if (min) { //必须多少
      for (let i = 0; i < min; i++) {
        arr.push(this.pick(data));
      }
      return arr;
    }
    // 默认一个
    const str = this.pick(data);
    arr.push(str);
    return arr;
  }
});



const Random = Mock.Random;
//下载文档数据
Mock.mock('http://www.baidu.com/api/datadown', res => {
  let list = [];
  for (let i = 0; i < 10; i++) {
    let listobj = {
      id: Random.id(),
      title: Random.datetime('yyyy') + Random.ctitle(5, 10),
      uptime: Random.datetime('yyyy-MM-dd'),
      link: "/word/下载测试文档.docx"
    }
    list.push(listobj);
  }
  return list;
});

main文件引入

//mock
require("./mock");

mock会自动拦截axios的请求,然后模拟数据返回,axios就像正常一样使用即可。

拦截带参数的get请求

get请求的参数是在url地址上的,所以这个不好固定地址段,只能用正则来进行匹配。

mock支持地址参数为正则

Mock.mock(/http:\/\/www\.baidu\.com\/api\/datadown(.*?), res => {

})

这样写就能匹配到get参数,如果你对匹配的地址有更精准的要求,可以自己调整正则

获取到get参数

参数在url地址段上,我们需要手动转换

Mock.mock(/http:\/\/www\.baidu\.com\/api\/datadown(.*?), res => {
  //拿到get参数
  let params = {};
  if (res.url.indexOf("?") !== -1) {
    let getArr = res.url.split('?')[1].split('&');
    getArr.forEach(item => {
      const kv = item.split("=");
      params[kv[0]] = kv[1];
    });
  }
})

这样params对象就是get的参数键值对了,然后我们判断这个params对象来进行请求参数返回

0
  • 本文分类:vue 项目实战
  • 本文标签:mock
  • 流行热度:已超过 299 人围观了本文
  • 最后更新:2020年09月28日 - 14时17分23秒
  • 发布日期:2020年09月28日 - 14时05分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码