Easy Mock以及Vue+Mock.js模拟数据
一、Mock.js简介
Mock.js是一个可以模拟后端数据，也可以模拟增删改查操作的js库
基础语法规范
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
‘name|rule‘: value语法规则 说明 ‘name|min-max‘: string通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max ‘name|count‘: string通过重复 string 生成一个字符串，重复次数等于 count ‘name|min-max‘: number生成一个大于等于 min、小于等于 max 的整数，属性值 number 用来确定类型 ‘name|+1‘: number初始值为 number，以后每次请求在前面的基础上+1 ‘name|min-max.dmin-dmax‘: number生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位 ‘name|1‘: boolean随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2 ‘name|count‘: object从属性值 object 中随机选取 count 个属性 ‘name|min-max‘: object从属性值 object 中随机选取 min 到 max 个属性 ‘name|1‘: array从属性值 array 中随机选取 1 个元素，作为最终值 ‘name|+1‘: array从属性值 array 中按照顺序选取 1 个元素，作为最终值 ‘name|count‘: array通过重复属性值 array 生成一个新数组，重复次数为 count ‘name|min-max‘: array通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max 简单举例：
var arr=[‘aa‘,‘bb‘,‘cc‘];var obj={ ??‘name‘:‘MountainC44‘, ??‘old‘:‘23‘, ??‘sex‘:‘man‘};//数据模版简单举例{ ??‘firstName|3‘:‘xue‘,//重复fei这个字符串 3 次。 ??‘lastName|2-5‘:‘yangbo‘,//重复yangbo这个字符串 2-5 次。 ??‘index|+1‘:0, //属性值自动加 1，初始值为 0 ??‘age|20-30‘:25,//生成一个大于等于 20、小于等于 30 的整数，属性值 25 只是用来确定类型 ??‘weight|100-120.2-5‘:110.24,//生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位。 ??‘likeMovie|1‘:Boolean,//随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。 ??‘friend1|1‘:arr,//从数组 arr 中随机选取 1 个元素，作为最终值。 ??‘friend2|+1‘:arr,//从属性值 arr 中顺序选取 1 个元素，作为最终值 ??‘friend3|2-3‘:arr,//通过重复属性值 arr 生成一个新数组，重复次数大于等于 2，小于等于 3。 ??‘obj1|2‘:obj,//从属性值 obj 中随机选取 2 个属性 ??‘obj2|1-2‘:obj,//从属性值 obj 中随机选取 1 到 2 个属性。 ??‘regexp1‘:/^[a-z][A-Z][0-9]$/,//生成的符合正则表达式的字符串}//返回示例{ ??‘firstName‘:‘xuexuexue‘, ??‘lastName‘:‘yangboyangbo‘, ??‘index‘:0, ???‘age‘:28, ??‘weight‘:115.223, ??‘likeMovie‘:Boolean, ??‘friend1‘:‘bb‘, ??‘friend2‘:‘aa‘, ??‘friend3|2-3‘:[‘aa‘,‘bb‘,‘cc‘,‘aa‘,‘bb‘,‘cc‘], ??‘obj1‘:{‘name‘:‘MountainC44‘,‘old‘:‘23‘,}, ??‘obj2‘:{‘name‘:‘MountainC44‘,}, ??‘regexp1‘:‘sC2‘,}数据占位符
//数据占位符使用{ ?"string|1-2": "@string", ????//随机生成字符串 ?"integer": "@integer(10, 30)", ?//随机生成一个10～30之间的正整数 ?"float": "@float(60, 100, 2, 2)", ?//随机生成浮点数，参数分别为整数部分最小值和最大值、小数部分保留最小位数和最大位数 ?"boolean": "@boolean", ??????//随机生成boolean ?"date": "@date(yyyy-MM-dd)", //按照格式随机生成时间 ?"datetime": "@datetime", ????//随机生成时间 ?"now": "@now", ??????????????//当前时间 ?"url": "@url", ??????????????//随机生成url字符串 ?"email": "@email", ??????????//随机生成邮箱 ?"region": "@region", ????????//随机生成地区 ?"city": "@city", ????????????//随机生成城市 ?"province": "@province", ????//随机生成省会 ?"county": "@county", ????????//随机生成一个（中国）县 ?"upper": "@upper(@title)", ??//把生随机成的标题全部转为大写 ?"guid": "@guid", ????????????//随机生成一个 GUID ?"id": "@id", ????????????????//随机生成一个 18 位身份证 ?"image": "@image(200x200)", ?//随机生成一个大小为200x200的图片链接 ?"title": "@title", ??????????//随机生成一句标题，其中每个单词的首字母大写 ?"cparagraph": "@cparagraph", //随机生成一段中文文本 ?"csentence": "@csentence", ??//随机生成一段中文文本 ?"range": "@range(2, 10)" ????//返回一个内容从2开始到9的整型数组}//返回示例{ ?"string": "A0L^Z", ?"integer": 16, ?"float": 82.23, ?"boolean": true, ?"date": "1994-09-16", ?"datetime": "1994-10-22 02:30:32", ?"now": "2018-10-21 10:31:00", ?"url": "mailto://tfoyemmcy.as/ppm", ?"email": "f.lqdfggdy@wulqhmm.com", ?"region": "华南", ?"city": "茂名市", ?"province": "澳门特别行政区", ?"county": "和平区", ?"upper": "LGHV FJV FDHNA ZJQO MKQEPMY BYVPYMU JRUPL", ?"guid": "EdAD386E-eCB3-e054-fBd3-D4BCd58bF2Dd", ?"id": "630000201810081550", ?"image": "http://dummyimage.com/200x200", ?"title": "Powol Qhycsib Nvwf Bmiuvcek Ioisiu Sxdmrpdip", ?"cparagraph": "又平你大万被然红义她之影此属且。定圆光半条社已上实参规持备特战划。打第一在感革会属利小年往。认七单边济火国风风速次支比容争连劳。目叫织新百却又处思只名发这实。什济安这自空东认十需打现军应。", ?"csentence": "火事必该验导回声市然第别程确条状。", ?"range": [2,3,4,5,6,7,8,9]}Mock对象方法简介
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.jsrequire(‘./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
水平有限，有写的不对的地方还请各位小伙伴多多指点，共同学习进步??
Easy Mock以及Vue+Mock.js模拟数据
原文地址：https://www.cnblogs.com/mountainc44/p/9826735.html