Mock
安装
生成随机数据，模拟ajax请求
# 安装
npm install mockjs
# 引用
import Mock from 'mockjs' //或者 let Mock = require('mockjs')
let mock = Mock.mock()
语法规范
Mock.js 的语法规范包括两部分：
数据模板定义规范（Data Template Definition，DTD）
数据占位符定义规范（Data Placeholder Definition，DPD）
数据模板定义规范 DTD
// 属性名name，生成规则 rule，属性值 value
'name|rule': value
注意：
1.属性名 和 生成规则 之间用竖线 | 分隔。
2.生成规则 是可选的。
3.生成规则 有 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
4.生成规则 的 含义 需要依赖 属性值的类型 才能确定。
5.属性值 中可以含有 @占位符。
6.属性值 还指定了最终值的初始值和类型。
生成规则和示例：
1. 属性值是字符串String
(1) 'name|min-max': string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
(2) 'name|count': string
通过重复 string 生成一个字符串，重复次数等于 count。
let strData = Mock.mock({
'name1|3-6':'a', // 随机生成重复a3-6次的字符串
'name2|2':'b', // 生成重复b2次的字符串
})
2. 属性值是数字Number
(1)'name|+1': number
属性值自动加 1，初始值为 number
(2)'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
(3) '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
(1) 'name|1': boolean
随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
(2) 'name|min-max': value
随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
let booleanData = Mock.mock({
'name1|1':true, // 生成一个布尔值,出现次数各一半
'name2|1-3':true // 1/4是true，3/4是false
})
4. 属性值是对象Object
(1)'name|count': object
从属性值 object 中随机选取 count 个属性。
(2)'name|min-max': object
从属性值 object 中随机选取 min 到 max 个属性。
5. 属性值是数组 Array
(1) 'name|1': array
从属性值 array 中随机选取 1 个元素，作为最终值。
(2) 'name|+1': array
从属性值 array 中顺序选取 1 个元素，作为最终值。
(3) 'name|min-max': array
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
(4) 'name|count': array
通过重复属性值 array 生成一个新数组，重复次数为 count。
6. 属性值是函数Function
(1) 'name': function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
7. 属性值是正则表达式 RegExp
(1) '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"
}
数据占位符定义规范 DPD
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符 的格式为：
@占位符
@占位符(参数 [, 参数])
注意：
1.用 @ 来标识其后的字符串是 占位符。
2.占位符 引用的是 Mock.Random 中的方法。
3.通过 Mock.Random.extend() 来扩展自定义占位符。
4.占位符 也可以引用 数据模板 中的属性。
5.占位符 会优先引用 数据模板 中的属性。
6.占位符 支持 相对路径 和 绝对路径。
Mock.mock({
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
})
=>
{
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}
}
Mock.mock()
Mock.mock( rurl?, rtype?, template|function( options ) )
Mock.mock(template)
根据数据模板生成模拟数据。
Mock.mock(rurl,template|function( options ) )
当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回，或函数 function(options) 将被执行，并把执行结果作为响应数据返回。
Mock.mock(rurl,rtype,template|function(options))
当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回，或函数 function(options) 将被执行，并把执行结果作为响应数据返回。
let data = Mock.mock('/demo','get',{
'list|5':[{
'id|+1':1, //从1开始循环按顺序增加step
name:'@cname',
email:'@email',
flag:'@boolean',
date:'@datetime',
age:'@natural(1,100)',
info:'@csentence',
address:'@county(true)',
'xingzuo|+1':arr //从arr数组里按顺序拿
}]
})
this.$axios.get('/demo').then(res=>{
console.log(res)
})
Mock.setup()
Mock.setup(settings)
配置拦截 Ajax 请求时的行为。支持的配置项有：timeout
指定被拦截的 Ajax 请求的响应时间，单位是毫秒。默认值是'10-100'。
Mock.setup({
timeout: 400
})
Mock.setup({
timeout: '200-600' //响应事件介于200和600毫秒之间
})
Mock.Random
Mock.Random 是一个工具类，用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。
let data = Mock.mock('/demo','get',{
name:'@cname',
email:'@email',
flag:'@boolean',
date:'@datetime',
age:'@natural(1,100)',
info:'@csentence',
address:'@county(true)'
})
Basic
(1)Mock.Random.boolean(min?,max?,current?)
随机生成布尔值
flag1:Mock.Random.boolean(), // true,false各一半
falg2:Mock.Random.boolean(1,2,false), // 1/3的可能性false
(2)Mock.Random.natural(min?,max?)
随机生成自然数min-max之间,默认值最大为 900719925474099
(3)Mock.Random.integer(min?,max?)
随机生成整数min-max之间
(4)Mock.Random.float(min?,max?,dmin?,dmax?)
随机生成小数浮点数
(5)Mock.Random.character(pool?)
随机生成一个字符，参数可以不填，可以是'upper'(26个大写字母)、'lower'(26个小写字母)、'number'(0-9十个数字)、'!@#$%^&*()[]'
(6)Mock.Random.string(pool?,min?,max?)
随机生成一个字符串，pool如上,字符串长度min-max
(7)Mock.Random.range(start?,stop,strp?)
返回一个整数数组,start数组起始值(闭区间),stop数组结束值(开区间),step为数据每一项间隔值
Date
(1)date日期
(2)time时间
(3)datetime日期时间
data:Mock.Random.date(format?) //随机生成日期字符串,参数默认'yyyy-MM-dd'
time:Mock.Random.time(format?) //随机生成时间字符串,参数默认'HH-mm-ss'
datetime:Mock.Random.datetime(format?) //随机生成日期时间字符串,参数默认'yyyy-MM-dd HH-mm-ss'
Image
(1) image
(2) dateImage
//一般情况下，使用dataImage更好,因为更简单，但是如果要生成高度自定义的图片，则最好用image。另外，dataImage生成的是base64编码
image:Mock.Random.image(size?,background?,foreground?,format?text?)
// 返回一段base64编码,两个参数同上
dataImage:Mock.Random.dataImage(size?,text?)
// 参数说明
size 图片宽高，格式是'宽x高',取值
['300x250', '250x250', '240x400', '336x280', '180x150', '720x300', '468x60', '234x60', '88x31', '120x90', '120x60', '120x240', '125x125', '728x90', '160x600', '120x600', '300x600']
background:图片的背景色，默认值#000000
foreground：图片的文字前景色，默认#FFFFFF
format：图片的格式，默认'.png',可以选择.png,.gif,.jpg
text:图片上的默认文字，默认值为参数size
Color
color:Mock.Random.color() //格式格式'#rrggbb'
Mock.Random.hex() //好像和color没什么不同
Mock.Random.rgb() //生成格式如rgb(133,233,244)
Mock.Random.rgba() //生成格式如rgba(111,222,233,0.5)
Mock.Random.hsl() //生成格式如(345,82,71)
Text
(1)paragraph文本
paragraph=Mock.Random.paragraph(min?,mix?,len?) // 随机生成长度[min,max)的文本
(2)sentence句子
sen:Mock.Random.sentence(min?,max?,len?) // 随机生成一个有[min,max)单词个数的句子，首字母大写
sen1:Random.sentence() //默认长度12到18
sen2:Random.sentence(10) //随机生成一个单词个数为10的句子
sen3:Random.sentence(5,10) //随机生成一个5到9单词个数的句子
(3)word单词
word:Mock.Random.word(min?,max?,len?) //随机生成一个单词
word1:Mock.Random.word() //默认长度3到10
word2:Mock.Random.word(7) //随机生成长度是7的单词
word3:Mock.Random.word(2,12) //随机生成2到11位长度的单词
(4)title标题
title:Mock.Random.title(min?,max?,len?) //随机生成一段标题，每个单词的首字母大写
(5)cparagraph、csentence、cword、ctitle中文文本句子单词标题
Random.cparagraph, 返回中文文本
Random.csentence, 返回中文句子
Random.cword, 返回中文文字
Random.ctitle. 返回中文标题
Name
(1) first
(2) last
(3) name
(4) cfirst
(5) clast
(6) cname
let first = Random.first() 随机生成常见英文名
let last = Random.last() 随机生成常见英文姓
let name = Random.name() 随机生成常见英文姓名
let cfirst = Random.cfirst() 随机生成常见中文姓
let clast = Random.clast() 随机生成常见中文名
let cname = Random.cname() 随机生成一个常见中文姓名
Web
Random.url(protocol?,host?) //随机生成一个url,var url3 = Random.url('http','58.com')
Random.protocol() //随机生成一个协议
protocol可以选的值'http'、'ftp'、'gopher'、'mailto'、'mid'、'cid'、'news'、'nntp'、'prospero'、'telnet'、'rlogin'、'tn3270'、'wais'。
Random.domin() //随机生成一个域名
Random.ip() // 随机生成一个ip地址
Random.tld() //随机生成一个顶级域名
Random.email(domain?) //随机生成一个email地址，domain表示域名
let email2 = Random.email('58.com') //生成xxxx@58.com
Address
Random.region() //随机生成一个中国的大区，如华北，西南
Random.province() //随机生成一个中国省直辖市自治区特别行政区
Random.city(prefix?) //随机生成一个中国城市，prefix布尔值，表示是否标注所在省
Random.county(prefix?) //随机生成一个中国县，prefix布尔值，表示是否显示所属的省市
Random.zip() //随机生成一个六位数邮政编码
Helper
Random.capitlize(word) //把第一个字母转成大写,var capitalize = Random.capitalize('hello')
Random.upper(str) //转成大写,var upper = Random.upper('zhang')
Random.lower(str) //转成小写,var lower = Random.lower('JINGWEI');
Random.pick(arr) //从数组中随机选取一个元素,var pick = Random.pick(arr);
Random.shuffle(arr); //打乱数组的顺序并返回
Miscellaneous
Random.guid() // 随机生成一个GUID,var guid = Random.guid()
Random.id() // 随机生成一个18位身份证id,var id = Random.id()
扩展Mock.Random.extend()
Mock.Random.extend({
constellation:function(date){
let arr=['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
return this.pick(arr)
}
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }
Mock.valid(template,date)
校验真实数据 data 是否与数据模板 template 匹配。
Mock.toJSONSchema( template )
把 Mock.js 风格的数据模板 template 转换成 JSON Schema。