### 什么是Mock.js
Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。
### Mock.js能做什么
- 根据数据模板生成模拟数据
- 基于 HTML 模板生成模拟数据
- 模拟 Ajax 请求，生成并返回模拟数据
### 为什么要用Mock.js
- 数据太长了，将数据写在一个个json文件里，完成后挨个改url，接口多了表示很累
- 某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼
- 处理数组数据的js代码老是出现初始化的时候没有清空数组，当数据更新了的时候就发现bug了，如果在开发时就能实现数据更新，这个问题或许会早点发现
- 想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据
- 特殊的格式，例如IP,随机数，图片，地址，需要去收集。
- 分页显示、涉及请求传参的数据和**部署版本与本地版本**的切换是个很痛的痛点。
### 如何正确使用Mock.js
#### 开始使用：
支持Node、bower、RequireJS、Sea.js
#### 核心方法 Mock.mock()
- 根据数据模板生成模拟数据;
- 记录数据模板;当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
#### 语法规范：
- 数据模版定义规范：属性名|生成规则：属性值，如：‘value|10-100’ : 10
- 数据占位符定义规范:@占位符 或者 @占位符(参数 [, 参数])，如：‘value’ : ‘@cname’
### 数据模版
定义了属性值是String、Number、Boolean、Object、Array、Function和RegExp类型数据的数据格式
- 属性名 和 生成规则 之间用竖线 | 分隔
- 生成规则 的 含义 需要依赖 属性值的类型 才能确定
- 属性值 中可以含有 @占位符
- 属性值 还指定了最终值的初始值和类型
- 共有七种规则
1. 'name|min-max': value
2. 'name|count': value
3. 'name|min-max.dmin-dmax': value
4. 'name|min-max.dcount': value
5. 'name|count.dmin-dmax': value
6. 'name|count.dcount': value
7. 'name|+step': value
#### 数据占位符 Mock.random()
Mock.Random 是一个工具类，用于生成各种随机数据，有如下十种，还可以自行扩展
#### 扩展方法：
~~~
Mock.Random.extend({
hyStaff:function(data) {
var hy = ['zhanning','banghui','xiaoqiao','shuman','decai','xieyang','yuheng','liwei']
return this.pick(hy)
}
})
var data = Mock.mock({
'hyfe|1-8':[{'name':'@hystaff'}]
})
console.log(JSON.stringify(data,null,2))
~~~
下面是基本方法
#### Basic
~~~
var data = Mock.mock({
'range':Mock.Random.range(10,20,2),//返回一个整型数组
'boolean':'@boolean',//返回一个随机的布尔值
'natural':'@natural',//返回一个随机的自然数（大于等于 0 的整数）
'integer':'@integer',//返回一个随机的整数
'float':'@float',//返回一个随机的浮点数
'character':'@character',//返回一个随机字符,未传参默认3-7位
'string':'@string'//返回一个随机字符串
})
console.log(JSON.stringify(data,null,2))
~~~
#### Date
~~~
var data = Mock.mock({
'date':'@date',//返回一个随机的日期字符串 默认值为 yyyy-MM-dd
'time':'@time',//指示生成的时间字符串的格式,默认值为 HH:mm:ss
'datetime':'@datetime',//返回一个随机的日期和时间字符串,默认值为 yyyy-MM-dd HH:mm:ss
'now':'@now'//返回当前的日期和时间字符串
})
console.log(JSON.stringify(data,null,2))
~~~
#### Image
~~~
var data = Mock.mock({
'image':'@image',//生成一个随机的图片地址 --- 高度自定义
'dataImage':'@dataImage',//生成一段随机的 Base64 图片编码 -- 更简洁
'testImage':Mock.Random.dataImage('250x250','hydata')
})
console.log(JSON.stringify(data,null,2))
~~~
#### Color
~~~
var data = Mock.mock({
'color':'@color',
'hex':'@hex',
'rgb':'@rgb',
'rgba':'@rgba',
'hsl':'@hsl'
})
console.log(JSON.stringify(data,null,2))
~~~
#### Text
var data = Mock.mock({
'paragraph':'@paragraph',//随机生成一段文本
'cparagraph':'@cparagraph',//随机生成一段中文文本
'sentence':'@sentence',//随机生成一个句子，第一个单词的首字母大写
'csentence':'@csentence',//随机生成一段中文文本
'word':'@word',//随机生成一个单词
'cword':'@cword',//随机生成一个汉字
'title':'@title',//随机生成一句标题，其中每个单词的首字母大写
'ctitle':'@ctitle'//随机生成一句中文标题
})
console.log(JSON.stringify(data,null,2))
#### Name
~~~
var data = Mock.mock({
'first':'@first',//随机生成一个常见的英文名
'last':'@last',//随机生成一个常见的英文姓
'name':'@name',//随机生成一个常见的英文姓名
'cfirst':'@cfirst',//随机生成一个常见的中文名
'clast':'@clast',//随机生成一个常见的中文姓
'cname':'@cname'//随机生成一个常见的中文姓名
})
console.log(JSON.stringify(data,null,2))
~~~
#### Web
~~~
var data = Mock.mock({
'url':'@url',//随机生成一个 URL
'protocol':'@protocol',//URL协议：'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais'
'domain':'@domain',//随机生成一个域名
'tld':'@tld',//随机生成一个顶级域名
'email':'@email',//随机生成一个邮件地址
'ip':'@ip'//随机生成一个IP
})
console.log(JSON.stringify(data,null,2))
~~~
#### Address
~~~
var data = Mock.mock({
'region':'@region',//随机生成一个（中国）大区
'province':'@province',//随机生成一个（中国）省（或直辖市、自治区、特别行政区）
'city':'@city',//随机生成一个（中国）市
'county':'@county',//随机生成一个（中国）县
'zip':'@zip'//随机生成一个邮政编码（六位数字）
})
console.log(JSON.stringify(data,null,2))
~~~
#### Helper
~~~
var data = Mock.mock({
'capitalize':Mock.Random.capitalize('hyfe'),//把字符串的第一个字母转换为大写
'upper':Mock.Random.upper('hyfe'),//把字符串转换为大写
'lower':Mock.Random.lower('hyfe'),//把字符串转换为小写
'pick':Mock.Random.pick([1,2,3,4,5,6]),//从数组中随机选取一个元素，并返回
'shuffle':Mock.Random.shuffle([1,2,3,4,5,6])//打乱数组中元素的顺序，并返回
})
console.log(JSON.stringify(data,null,2))
~~~
#### Miscellaneous
~~~
var data = Mock.mock({
'guid':'@guid',//随机生成一个 GUID,啊？GUID?
'id':'@id',//随机生成一个 18 位身份证
'increment':'@increment'//生成一个全局的自增整数
})
console.log(JSON.stringify(data,null,2))
~~~
### Mock.valid()
校验真实数据 data 是否与数据模板 template 匹配
~~~
var template = {
'value|2-4':[
{
'name':'@cname'
}
]
}
var data = {
value:[
{
name:'周杰伦'
}
]
}
console.log(JSON.stringify(Mock.valid(template,data),null,2))
~~~
### 经验总结
总结使用中遇到的问题和解决方案
- 解决模拟websocket实时推送数据，采用定时器发ajax请求，但是出现了每次请求返回的数据都是一样的的问题，具体问题及解决办法直接上代码：
~~~
//API接口部分
var isOnline = false
// http host
var onlineApiHost = isOnline ? 'http://111.111.1.11:8080/' : 'http://test.com/'
// websokcet host
var onlineWsHost = isOnline ? 'ws://111.111.1.11:8080/': 'http://test.com/' //本地还是用的http，不是ws，因为采用定时器发ajax请求
//websocket请求数据方法
sendWebSocket: function(url, callback) {
var protocol = url.split(':')[0]
if(protocol == 'ws') { //线上版本
window.WS = new WebSocket(url)
WS.onmessage = function(response) {
if (response) {
var data = response.data
callback && callback(data)
}
}
WS.onclose = function() {
WS.close()
}
window.onunload = function() {
WS.close()
}
} else { //本地版本，采用定时器发ajax请求
request.sendAjax(url,callback)
setInterval(function() {
request.sendAjax(url,callback) //ajax方法代码不再展示
},5000)
}
}
//Mock数部分
//正确写法1
Mock.mock(util.urlReg('timewebsocket/time'), {
'code': 1,
'msg': 'success',
'result': '@datetime("yyyy-MM-dd HH:mm")'
})
//正确写法2
Mock.mock(util.urlReg('timewebsocket/time'), {
'code': 1,
'msg': 'success',
'result': function() {
return Mock.Random.datetime("yyyy-MM-dd HH:mm")
}
})
//错误写法
Mock.mock(util.urlReg('timewebsocket/time'), {
'code': 1,
'msg': 'success',
'result': Mock.Random.datetime("yyyy-MM-dd HH:mm")
})
~~~
- 1.Mock.js
- 2.conic-gradient 圆锥渐变
- 3.ES6 Module学习笔记
- 4.ES6函数扩展学习笔记
- 5.导入topojson模块的坑
- 6.git 内部分享
- 7.npm install --save
- 8.nvm和nrm
- 9.删除node_modules文件夹
- 10.es6 symbol
- 11.Set和Map数据结构
- 12.chrome控制台的$0
- 13.d3-ordinal
- 14.Object.assign() 和lodash的merge()
- 15.echarts x轴坐标文字显示不全
- 16.echarts地图配置项--中文
- 17.webpack自动浏览器打开插件
- 18.D3线条和面积动画--未采用
- 19.投影滤镜
- 20.文本挡住触发事件
- 21图表用法
- 22.大胆的表现自己把
- 23.裁剪clip-path
- 24svg线条动画的反向和时间误差
- 25.visibility和display的区别
- 26.SVG滤镜
- 27windo命令行的坑
- 28.textContent与innerText的不同
- 29.CSS3炫酷文本
- 30.更改webpack配置文件路径
- 31.大胖给我做的css codereivew
- 32.定义接口不要限定死
- 33.不使用浮动，用inline-block平分出现换行问题
- 34.输入框的校验
- 35.handlbars的registerHelper
- 36.animation-fill-mode
- 37.svg嵌套HTML，实现文本换行
- 38.SVN出现黄色感叹号
- 39.typeof与instanceof
- 40.SVG里面谨慎设置font-family
- 41.新脚手架里的相对路径问题