1，大概为什么用，是为了与后端大哥进行美好的分离；
2，具体如下；
惯例：先放api出来，https://github.com/nuysoft/Mock/wiki/Syntax-Specification
mockJS语法规范包括两部分。
1，数据模板定义规范DTD
1，mockJS定义的一些模板的方式。
大概规定由三部分构成。即（'name|rule': value）
属性名
生成规则
属性值
let data = Mock.mock({
'list|1-10': [{
'id|+1': 1 (这个1是初始值)
}]
})
会随机生成什么？？？
list: [{id: 1}, {id: 2}, {id: 3}, {id: 4}]
我生成了一个 list的元素在1-10的范围内，每个元素都是一个对象，对象里面有一个属性id，值从初始值1开始，对应开始累加。
对于这些我有几点是要注意的。
1，属性名和规则是要用中竖线隔开，并且要用单引号包起来，
2，生成规则由7中，但是不同的数据类型是不同的
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
3，属性值中由占位符
4，属性值中可以指定（某些情况下的）初始值，譬如
'id|+1': 1
2，数据占位符定义规范DPD
1，自身关于一些常用名有定义，
即，我们可以拿到，一个人的名字的数据，他是一个随机的姓氏和名字，拼和而成。
2，有一些方法可以使用，
在Mock的对象中我们可以使用一些定义好的方法，这些方法，有些事基于不同的变量类型的，比如下面的natural，他是拿到一个最大值和最小值（做参数）去生成一个在范围内的数值，这也代表着，他是一个基于数值类型的方法。
3，支持自身的扩展的方式。
Mock.Random.extend()的方式。
Mock.Random.extend({
constellation: function (date) {
var constellations=['白羊座','金牛座','双子座','巨蟹座','狮子座','处女座','天秤座','天蝎座','射手座','摩羯座','水瓶座','双鱼座']
console.log(this.pick(constellations))
return this.pick(constellations)
}
})
let data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
})
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
自己总结。
从功能上分，我个人是把他分为两种的
1，是做模拟数据
2，一些系统自定义的数据方式
例如：
中英文名字
铭牌
地址
数字
通过正则去匹配实现的各种数字字母字串等，各种。
2，自身进行扩展的方式
例如：黄道12宫，月份，乱七八糟的，可以自身去随意定义的一些列数据组
2，对后端接口拿到的数据进行修改，是完全按照自己 即Mock自身定义的规则来，下面展示一个例子
api是一个我们登录后首页拿到的数据的接口，在正常来说，我们拿到的data是一个用户未登录的情况，还有一个要说明的是，我通过'/api/'接口拿到的数据时在axios中过滤了一下，包括errcode都是我在axios这个这里设置的。axios是vue作者推荐在vue中使用的，简单方便。
我们对比下面了两个的图片，其中都具备一下结构，具体是这个结构，我就不太了解了，可能还牵扯到http的协议等，以后再议。
config
data
headers
request
status
statusText
但是在右边的图上我们清晰的看到，request的类型是MockXMLHttpRequest，能定为mock的方式。在右边的data中便是我定义的mock值，拿到的是一个列表，ok，接下来展示我的代码。
letdata=Mock.mock('/api/', {
'list|1-10': [
'@natural(1111,2222)'
]
})
代码截图1
this.$http.get('/api/').then((response) => {
console.log(response)
}).catch()
代码截图2
正常返回值
mock截取返回值
总的来说，还是很好上手的，上面只是大概总结一些，mock的一些小秘密小彩蛋可以自己去源码里面发掘，这是一个优良的传统！！！
最后祝大家圣诞快乐。
12.25 圣诞夜 Eric
网友评论