Easy Mock以及Vue+Mock.js模拟数据 (2)

Mock.mock( rurl?, rtype?, template|function( options ) ) ：根据数据模板生成模拟数据，拦截指定rtype类型的url为rurl的ajax请求，返回数据模板中的模拟数据或执行回掉方法

Mock.setup( settings )：配置拦截 Ajax 请求时的行为。支持的配置项有：timeout，指拦截的 Ajax 请求的响应时间，单位是毫秒

Mock.Random.xxx()：Mock.Random对象提供的方法在数据模板中称为占位符，书写格式为 @占位符(参数 [, 参数])

Mock.valid( template, data )：校验真实数据 data 是否与数据模板 template 匹配

Mock.toJSONSchema( template )：把 Mock.js 风格的数据模板 template 转换成 JSON Schema

二、Easy Mock Easy Mock是一个可视化，并且能快速生成 模拟数据的持久化服务，支持在线访问和本地部署

Easy Mock 引入了Mock.js，所以支持Mock.js语法规范

创建Easy Mock项目

使用Easy Mock 的Sagger特性快速生成Mock接口

查看Mock接口进行测试

在线测试

三、Vue+Mock.js模拟数据

npm安装mockjs ，创建mock.js文件

编写mock.js文件，main.js文件引入 //mock.js文件 const Mock = require('mockjs'); const data = Mock.mock({ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 'foods|10-50': [{ name: '@ctitle(2,10)', img: "@image('600x600',#b7ef7c)", brief: '@csentence(1,50)', 'price|0-20.0-2': 1, num: 0, minusFlag: true, time: '@time', 'peisongfei|0-100.0-2': 1, 'limit|0-50': 1, }], 'sales|10-50': [{ // 属性 id 是一个自增数，起始值为 1，每次增 1 name: '@ctitle(2,10)', img: "@image('600x600',#b7ef7c)", brief: '@csentence(1,50)', 'price|0-100.0-2': 1, num: 0, minusFlag: true, time: '@time', 'peisongfei|0-100.0-2': 1, 'limit|0-100': 1, }], }); Mock.mock('/api/data', data); //对url为/api/data的ajax请求进行拦截返回data假数据 Mock.mock('/api/data1', () => ({ data, })); //main.js文件 引入mock.js require('./mock.js'); //vue组件使用axios发送ajax请求 created() { this.$axios.get('/api/data1').then((res) => { console.log(res.data); }); this.$axios.get('/api/data').then((res) => { console.log(res.data); }); }

查看mock接口（在浏览器调试工具Network中不会有http请求，因为已经被拦截）

四、参考链接

Easy Mock文档：https://easy-mock.com/docs

Mock.js文档：https://github.com/nuysoft/Mock/wiki

水平有限，有写的不对的地方还请各位小伙伴多多指点，共同学习进步