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

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

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对象方法简介

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wppjxw.html