如何使用EasyMock?
如何使用EasyMock?
在前后端分离的概念中，前端脱离与后端工作，在对好接口之后，以及后端没有假数据的情况下，可以先采用折衷的办法来请求假数据，这就有了Mock.js，可以随机生成数据，拦截ajax请求。Easy Mock 是一个可视化，并且能快速生成 模拟数据 的持久化服务。 忘掉下面这些实用但麻烦的 Mock 方式吧。在你用了 Easy Mock 之后，你肯定会爱不释手的。
话不多说，先来看一下Mock.js的语法，
1. 属性值是字符串 String
- 'name|min-max': string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
- 'name|count': string
通过重复 string 生成一个字符串，重复次数等于 count。
2. 属性值是数字 Number
- 'name|+1': number
属性值自动加 1，初始值为 number。
- 'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
- 'name|min-max.dmin-dmax': number
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax位。
Mock.mock({
'number1|1-100.1-10': 1,
'number2|123.1-10': 1,
'number3|123.3': 1,
'number4|123.10': 1.123
})
// =>
{
"number1": 12.92,
"number2": 123.51,
"number3": 123.777,
"number4": 123.1231091814
}
3. 属性值是布尔型 Boolean
- 'name|1': boolean
随机生成一个布尔值，值为 true 的概率是 1/2，值为false 的概率同样是 1/2。
- 'name|min-max': value
随机生成一个布尔值，值为 value 的概率是 min/ (min + max)，值为 !value 的概率是 max / (min + max)。
4. 属性值是对象 Object
- 'name|count': object
从属性值 object 中随机选取 count 个属性。
- 'name|min-max': object
从属性值 object 中随机选取 min 到 max 个属性。
5. 属性值是数组 Array
- 'name|1': array
从属性值 array 中随机选取 1 个元素，作为最终值。
- 'name|+1': array
从属性值 array 中顺序选取 1 个元素，作为最终值。
- 'name|min-max': array
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
- 'name|count': array
通过重复属性值 array 生成一个新数组，重复次数为 count。
6. 属性值是函数 Function
- 'name': function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
7. 属性值是正则表达式 RegExp
'name': regexp
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
})
// =>
{
"regexp1": "pJ7",
"regexp2": "F)\fp1G",
"regexp3": "561659409"
}
语法看起来比较枯燥，来看一个例子你就懂了。
如图，预览出来的话，数据就是
而在我们的实际项目中，可以对照接口，实现基本上所有数据。首先创建接口
然后编辑
如图，可以随机生成用户数据，方便，快捷
现在数据有了，如何请求这个接口呢？
复制这个地址
作为请求的url即可，如果你使用的是vue-cli构建项目的话，你可以在index.js文件中配置，
然后axios.get(‘/reading/a/u/user’).then()即可，
注意这里reading后面的地址是你自己定的
然后你就可以用渲染数据，实现自己相应的业务逻辑啦
更多讨论：
1：如果我想要获得的数据是手机号吗呢？
可以用正则，比如"phone": /^1[385][1-9]\d{8}/,就可以随机生成手机号码。灵活运用正则，可以让你的数据更真实。
2. 如何实现数据的增删改查？
可以借助响应式数据，玩出很多花样，我们可以在 数据编辑器 中，为某个属性指定一个 Function。在 Function 中，EasyMock提供了 _req 对象，这使得我们可以通过请求对象编写逻辑，实现响应式数据，如图所示。
当我们请求这个接口时，数据返回如下。如果我们传入的 name 为 nk，那么 name 将会随机变化。
删除数据
var arr=[
{name:'fei',age:20,id:1},
{name:'liang',age:30,id:2},
{name:'jun',age:40,id:3},
{name:'ming',age:50,id:4}
]
Mock.mock('http://www.bai.com','delete',function(options){
var id =parseInt(options.body.split("=")[1])//获取删除的id
var index;
for(var i in arr){
if(arr[i].id===id){//在数组arr里找到这个id
index=i
break;
}
}
arr.splice(index,1)//把这个id对应的对象从数组里删除
return arr;//返回这个数组,也就是返回处理后的假数据
})
这样就能实现数据的删除了，其他的也同理。更多的关于_req的内容，可以去官网的文档去看一下
3．手写数据也挺麻烦啊?
Easymock有一些语法提示，可以辅助编辑，如下
· em.base
· em.date
· em.image
· em.color
· em.text
· em.name
· em.web
· em.address
· em.helper
· em.miscellaneous
· em.demo.all
大家感兴趣的可以自己去试一试
参考文献：
Easy Mock官方文档
Mock.js文档