Easy Mock是一个可视化,并且能快速生成模拟数据的持久化服务。
解决问题
- 开发时,后端还没完成数据输出,前端只好写静态模拟数据。
- 数据太长了,将数据写在js文件里,完成后挨个改url。
- 某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据,要么编写更多代码，要么手动修改模拟数据。
- 特殊的格式,例如IP,随机数,图片,地址,需要去收集。
准备工作
Mock.js 的语法规范
数据模板定义规范
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
举例:
'name|min-max': string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
模板:
"string|1-10": "★"
结果:
{
"string": "★★"
}
数据占位符定义规范
占位符只是在属性值字符串中占个位置,并不出现在最终的属性值中。
@占位符
@占位符(参数 [, 参数])
举例:
Mock.mock({
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
})
// =>
{
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}
}
语法不是本文重点,具体请参考官方文档
Easy Mock
重点来了,现在正式开始
首先请大致过一遍官方文档,主要熟悉基础语法,数据占位符,怎样创建一个项目,响应式数据这几个模块,能方便理解下面的使用方式
常见使用方式
目前我觉得下面三种数据已经够使用了
静态数据
静态数据使用很简单,随便写个json,复制到编辑区
{
name: '小明',
age: 14,
gender: true,
height: 1.65,
grade: null,
'middle-school': '\"W3C\" Middle School',
skills: ['JavaScript', 'Java', 'Python', 'Lisp']
}
流程图片
image
image
这个访问结果解释上面的json
动态数据
结合Mock.js的语法,将json改造一下,可以生成随机数据,这样就避免了每次都是一样的假数据,比较符合真实的开发场景
{
"code": 0,
"message": "success",
"update_time": "@now",
"data|20": [{
"id": "@id",
"wechat_id": "@word(5)",
"phone": /^1[34578]\d{9}$/,
"name": "@cname",
"index|+1": 0
}]
}
访问结果:
{
"code": 0,
"message": "success",
"update_time": "2019-03-15 15:58:10",
"data": [
{
"id": "130000198012071312",
"wechat_id": "gbjrh",
"phone": "15538214534",
"name": "段超",
"index": 0
},
{
"id": "120000201604272428",
"wechat_id": "ycskj",
"phone": "17531635685",
"name": "龙明",
"index": 1
},
{
"id": "360000198712315587",
"wechat_id": "yayql",
"phone": "15741728621",
"name": "范秀英",
"index": 2
},
{
"id": "350000199512068537",
"wechat_id": "eiqgj",
"phone": "14166884429",
"name": "段军",
"index": 3
},
{
"id": "630000199301100725",
"wechat_id": "durpk",
"phone": "14585958661",
"name": "郑芳",
"index": 4
},
{
"id": "370000197102053353",
"wechat_id": "uywns",
"phone": "15628123122",
"name": "任芳",
"index": 5
},
{
"id": "420000198104243678",
"wechat_id": "keegs",
"phone": "14733828249",
"name": "段芳",
"index": 6
},
{
"id": "990000199208102867",
"wechat_id": "bfjii",
"phone": "14310033074",
"name": "马勇",
"index": 7
},
{
"id": "630000201009097354",
"wechat_id": "qkner",
"phone": "14313920949",
"name": "王霞",
"index": 8
},
{
"id": "610000201108312343",
"wechat_id": "ldglx",
"phone": "18382132410",
"name": "彭明",
"index": 9
},
{
"id": "310000197505018332",
"wechat_id": "tncgo",
"phone": "15787376932",
"name": "金伟",
"index": 10
},
{
"id": "610000201108270470",
"wechat_id": "nsjuw",
"phone": "15512171367",
"name": "彭静",
"index": 11
},
{
"id": "82000019920825184X",
"wechat_id": "ivuhc",
"phone": "17286394622",
"name": "董磊",
"index": 12
},
{
"id": "990000200711062781",
"wechat_id": "wswxm",
"phone": "14202849159",
"name": "汤涛",
"index": 13
},
{
"id": "150000200610210611",
"wechat_id": "vwnvl",
"phone": "14824152287",
"name": "汤刚",
"index": 14
},
{
"id": "340000198310233972",
"wechat_id": "gzysq",
"phone": "15934454235",
"name": "林丽",
"index": 15
},
{
"id": "42000020020501126X",
"wechat_id": "hxncn",
"phone": "15433795836",
"name": "姚明",
"index": 16
},
{
"id": "410000200607202219",
"wechat_id": "tkmnm",
"phone": "14975419206",
"name": "朱洋",
"index": 17
},
{
"id": "230000197305281259",
"wechat_id": "bkvlf",
"phone": "15869843614",
"name": "杨艳",
"index": 18
},
{
"id": "640000201702016673",
"wechat_id": "vifef",
"phone": "13829263258",
"name": "雷娟",
"index": 19
}
]
}
响应式数据
可以模拟真实的接口一样,根据传入的参数不同获取对应的数据
{
"code": function({
_req
}) {
return _req.query.my_parameters ? 0 : -1;
},
"msg": function({
_req
}) {
return _req.query.my_parameters ? "" : "缺少my_parameters参数"
},
"data": function({
_req,
Mock
}) {
if (_req.query.my_parameters) {
return Mock.mock("@cname");
} else {
return "";
}
}
}
访问结果:
{
"code": -1,
"msg": "缺少my_parameters参数",
"data": ""
}
掌握了上面三个使用方式就可以不依赖后端,愉快的玩耍了
