VUE - Mock模拟请求
VUE - Mock模拟请求
自从有了mockjs，我们前端工程师再也不用等后端人员开发好之后再测数据了，因为mockjs可以拦截ajax请求，有了mockjs我们可以模拟后台返回数据，以方便的进行一系列的操作。接下来就介绍一下在项目中如何使用mockjs。
Mock.js 文档：https://github.com/nuysoft/Mock/wiki/Syntax-Specification
安装mockjs
npm install mockjs
可以使用数据模板生成模拟数据。
Mock.mock( rurl?, rtype?, template ) ) // 或者 Mock.mock( rurl, rtype, function( options ) )
Mock.mock( rurl, rtype, template )
表示当拦截到rurl和rtype的ajax请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。
Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
其中：
-
rurl 可选
表示要拦截的url，可以使字符串，也可以是正则 -
rtype 可选
表示要拦截的ajax请求方式，如get、post -
template 可选
数据模板，可以是对象也可以是字符串 -
function(option) 可选
表示用于生成响应数据的函数
参数介绍完，就该说说怎么使用了
在我们的项目中，是直接注册所有的mock服务，所以我们只需要按照一定的格式编写mock即可。
具体使用
1. 创建mock模块在项目根目录下mock文件夹，创建index.js文件，这里就是我们注册所有mock服务的地方
//引用Mock const Mock = require('mockjs'); //设置拦截AJAX请求的相应时间 Mock.setup({ timeout: '200-600' }); let configArray = []; // 使用webpack的require.context()遍历所有mock文件 const files = require.context('.', true, /\.js$/); files.keys().forEach((key) => { if (key === './index.js') return; configArray = configArray.concat(files(key).default); }); // 注册所有的mock服务 configArray.forEach((item) => { for (let [path, target] of Object.entries(item)) { let protocol = path.split('|'); Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target); } });
2. 在main.js中引入
require('../mock');
3. 在项目中引入 axios
4. 在业务页面中调用：
this.$get("/parameter/query").then((response) => { debugger; }); this.$get("/parameter/qqc").then((response) => { debugger; });
5. 增加 mock 拦截
在 mock 文件夹中 demoList.js 文件
let demoList = { status: 200, message: 'success', data: [{ id: 1, name: 'zs', age: '23', job: '前端工程师' }, { id: 2, name: 'ww', age: '24', job: '后端工程师' }] }; let demoList2 = [{ id: 1, name: 'zs', age: '23', job: '前端工程师' }, { id: 2, name: 'ww', age: '24', job: '后端工程师' }]; export default { 'get|/parameter/query': demoList, // 也可以这样写 // 官方解释为：记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。 'get|/parameter/query': (option) => { // 可以在这个地方对demoList2进行一系列操作，例如增删改 // option 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性 return { status: 200, message: 'success', data: demoList2 }; } }
在 mock 文件夹中 qqc.js 文件
let demoList = { status: 200, message: 'success', data: { total: 100, 'rows|10': [{ id: '@guid', name: '@cname', 'age|20-30': 23, 'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'] }] } }; export default { 'get|/parameter/qqc': demoList }
这样我们就可以每次随机生成10条数据，总数为100条，其中id和name使用的占位符，age是随机取出20-30中的数字，job是随机取出其后数组中的某一项，这在mock文档里都有说明。
生成数组
跟据参数 返回不同结果
function fun_getName() { let arr = ['s', 'rr', '7', 'dseeewskc', 'sd', 'sczderer', '44', 'abbbaring', '4', 'bbn', 'sce1123', 'ee']; return arr[getIndex()] + arr[getIndex()] + arr[getIndex()]; function getIndex() { return Math.ceil(Math.random() * 10); } } let demoList = { RootNodes: [{ Id: dd, Name: fun_getName(), ParentId: '', HasChildren: true, Children: [], Type: 'Asset' }] }; let demoList2 = Mock.mock({ 'RootNodes|10': [{ 'Id|+1': 1, Name: '@name', ParentId: '', HasChildren: true, Children: [], Type: 'Asset' }] }) Mock.mock(/\/mockk\/sencedata/, 'get', (options) => { return (JSON.parse(options.body).id == 0 ? demoList : demoList2) });
传参生成数组
let nodeList = (parentid) => { return Mock.mock({ 'list|10': [{ 'Id|+1': 1, Name: '@name', ParentId: parentid, HasChildren: true, Children: [], Type: 'Asset' }] }) }
生成随机条数的数组，数组中有 （1-10）条数据
let nodeList = (parentid) => { return Mock.mock({ 'list|1-10': [{ 'Id|+1': 1, Name: '@name', ParentId: parentid, HasChildren: true, Children: [], Type: 'Asset' }] }) }
从数据中随机取数据
'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
Mock.mock({ "list|100": [ { 'id|+1': 1,//id排列 'color': '@color()',//随机颜色 'date': '@datetime()',//随机时间 'img': '@image()',//随机图片 'url': '@url(http)',//随机url地址 'email': '@email()',//随机email 'name': "@name(1,2)",//随机英文名字 name:"@cname", //随机中文名字 'text': '@paragraph()',//随机英文句子 'title':'@ctitle',//穗子中文题目 'city':'@county(true)',//随机城市名字 'price': '@integer(100,2000)'//随机价格 } ] })
// 返回字符串 Mock.mock('/api/data', (req, res) => { return Mock.mock({ 'string|3': '*' }) }) // 返回指定范围的整数 Mock.mock('/api/getInteger', (req, res) => { return Mock.mock({ 'a|1-100': 100 }) }) // 返回随机个数的对象 Mock.mock('/api/getObject', (req, res) => { return Mock.mock({ 'brand|1-3': { a: '京东', b: '国美', c: '苏宁', d: '当当', e: '天猫', f: '淘宝' } }) }) // 返回随机数组 Mock.mock('/api/getArr', (req, res) => { return Mock.mock({ 'data|1-10': [ { 'name': '张三' } ] }) }) // 返回随机字符 Mock.mock('/api/getRandom1', (req, res) => { return Mock.mock({ 'random1': /[a-z]{2}[A-Z]{2}[0-9]/ }) }) // 返回随机字符 Mock.mock('/api/getRandom2', (req, res) => { return Mock.mock({random2: '@string("lower", 5)'}) }) // 返回UUID Mock.mock('/api/getUUID', (req, res) => { return {'uuid': Mock.Random.id()} })
引用：https://www.jianshu.com/p/c5568910e946
代码：https://gitee.com/wuxincaicai/prod-vue/PCommon/page-vue-ls
