http://mockjs.com/examples.html

第一个例子

const Mock = require('mockjs');

const data = Mock.mock({
    //list对象里有1-10个对象
    'list|1-10': [{
        //id每次+1，初始值为1
        'id|+1': 1
    }]
});

console.log(data);

语法规范

’name|rule’:value

’属性名|生成规则’：属性值

mock拦截前端请求

const Mock = require('mockjs');

Mock.setup({timeout: 400})

const multidata = {
  'banners': [{
    "acm": "3.mce.2_10_1jhwa.43542.0.ccy5br4OlfK0Q.pos_0-m_454801-sd_119",
    "height": 390,
    "height923": 390,
    "image": "https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg",
    "image923": "https://s10.mogucdn.com/mlcdn/c45406/180926_7d5c521e0aa3h38786lkakebkjlh8_750x390.jpg",
    "link": "https://act.mogujie.com/huanxin0001?acm=3.mce.2_10_1jhwa.43542.0.ccy5br4OlfK0Q.pos_0-m_454801-sd_119",
    "title": "焕新女装节",
    "width": 750,
    "width923": 750
  }, {
    "acm": "3.mce.2_10_1ji16.43542.0.ccy5br4OlfK0R.pos_1-m_454889-sd_119",
    "height": 390,
    "height923": 390,
    "image": "https://s10.mogucdn.com/mlcdn/c45406/180926_31eb9h75jc217k7iej24i2dd0jba3_750x390.jpg",
    "image923": "https://s10.mogucdn.com/mlcdn/c45406/180926_14l41d2ekghbeh771g3ghgll54224_750x390.jpg",
    "link": "https://act.mogujie.com/ruqiu00001?acm=3.mce.2_10_1ji16.43542.0.ccy5br4OlfK0R.pos_1-m_454889-sd_119",
    "title": "入秋穿搭指南",
    "width": 750,
    "width923": 750
  }, {
    "acm": "3.mce.2_10_1jfj8.43542.0.ccy5br4OlfK0S.pos_2-m_453270-sd_119",
    "height": 390,
    "height923": 390,
    "image": "https://s10.mogucdn.com/mlcdn/c45406/180919_3f62ijgkj656k2lj03dh0di4iflea_750x390.jpg",
    "image923": "https://s10.mogucdn.com/mlcdn/c45406/180919_47iclhel8f4ld06hid21he98i93fc_750x390.jpg",
    "link": "https://act.mogujie.com/huanji001?acm=3.mce.2_10_1jfj8.43542.0.ccy5br4OlfK0S.pos_2-m_453270-sd_119",
    "title": "秋季护肤大作战",
    "width": 750,
    "width923": 750
  }, {
    "acm": "3.mce.2_10_1jepe.43542.0.ccy5br4OlfK0T.pos_3-m_452733-sd_119",
    "height": 390,
    "height923": 390,
    "image": "https://s10.mogucdn.com/mlcdn/c45406/180917_18l981g6clk33fbl3833ja357aaa0_750x390.jpg",
    "image923": "https://s10.mogucdn.com/mlcdn/c45406/180917_0hgle1e2c350a57ekhbj4f10a6b03_750x390.jpg",
    "link": "https://act.mogujie.com/liuxing00001?acm=3.mce.2_10_1jepe.43542.0.ccy5br4OlfK0T.pos_3-m_452733-sd_119",
    "title": "流行抢先一步",
    "width": 750,
    "width923": 750
  }],
  recommends: [{
    "acm": "3.mce.2_10_1dggc.13730.0.ccy5br4OlfK0U.pos_0-m_313898-sd_119",
    "image": "https://s10.mogucdn.com/mlcdn/c45406/180913_036dli57aah85cb82l1jj722g887g_225x225.png",
    "link": "http://act.meilishuo.com/10dianlingquan?acm=3.mce.2_10_1dggc.13730.0.ccy5br4OlfK0U.pos_0-m_313898-sd_119",
    "sort": 1,
    "title": "十点抢券"
  }, {
    "acm": "3.mce.2_10_1dgge.13730.0.ccy5br4OlfK0V.pos_1-m_313899-sd_119",
    "image": "https://s10.mogucdn.com/mlcdn/c45406/180913_25e804lk773hdk695c60cai492111_225x225.png",
    "link": "https://act.mogujie.com/tejiazhuanmai09?acm=3.mce.2_10_1dgge.13730.0.ccy5br4OlfK0V.pos_1-m_313899-sd_119",
    "sort": 2,
    "title": "好物特卖"
  }, {
    "acm": "3.mce.2_10_1b610.13730.0.ccy5br4OlfK0W.pos_2-m_260486-sd_119",
    "image": "https://s10.mogucdn.com/mlcdn/c45406/180913_387kgl3j21ff29lh04181iek48a6h_225x225.png",
    "link": "http://act.meilishuo.com/neigouful001?acm=3.mce.2_10_1b610.13730.0.ccy5br4OlfK0W.pos_2-m_260486-sd_119",
    "sort": 3,
    "title": "内购福利"
  }, {
    "acm": "3.mce.2_10_1dggg.13730.0.ccy5br4OlfK0X.pos_3-m_313900-sd_119",
    "image": "https://s10.mogucdn.com/mlcdn/c45406/180913_8d4e5adi8llg7c47lgh2291akiec7_225x225.png",
    "link": "http://act.meilishuo.com/wap/yxzc1?acm=3.mce.2_10_1dggg.13730.0.ccy5br4OlfK0X.pos_3-m_313900-sd_119",
    "sort": 4,
    "title": "初秋上新"
  }]
};

Mock.mock(RegExp('http://zh/home/multidata'), 'get', options => {
  console.log(options);
  return Mock.mock(multidata);
})

Mock.mock(RegExp('http://zh/home/data'), 'get', options => {
  console.log(options);
  console.log(getQuery(options.url));
  return Mock.mock({
    page: 0,
    list: []
  });
});

function getQuery(url) {
  let queryStr = url.split('?')[1];
  let params = {}
  queryStr.split('&').forEach(paramStr => {
    let split = paramStr.split('=');
    params[split[0]] = split[1];
  })
  return params;
}

拦截的url直接写字符串，则只会拦截该字符串的url，写正则则会拦截符合正则的所有请求，options里面有请求的参数。

使用的时候将所写的代码导入vue项目的main.js就行了。

import '@/mock';