mockjs 笔记

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';