1.介绍
- 官方文档，Mock.js用来生成随机数据，拦截 Ajax 请求
- 支持的数据类型丰富，包括文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
- 功能灵活，生成随机数据 和 拦截 Ajax 请求 这两个功能可以独立开来用，也可以混合到一起使用，适合模拟各种场景
- 引入Mock.js
<script src="http://mockjs.com/dist/mock.js"></script>
2.生成随机数据
<script>
//生成单个随机数据
var flag = Mock.Random.boolean() //true
var num = Mock.Random.natural(0, 100) //9
var date = Mock.Random.date() //2000-06-29
var time = Mock.Random.time() //03:34:09
var cname = Mock.Random.cname() //邱静
</script>
<script>
//生成单个对象
var obj = Mock.mock({
"flag|1": true,//各占50%几率
"num|0-100": 0,//随机数值
"date": "@date",//特殊类型
"time": "@time",//特殊类型
"cname": "@cname",//特殊类型
})
//模拟后台返回数据
var res = Mock.mock({
"code|0-1": 1,
"data|10": [
{
"flag|1": true,//各占50%几率
"num|0-100": 0,//随机数值
"date": "@date",//特殊类型
"time": "@time",//特殊类型
"cname": "@cname",//特殊类型
}
],
})
console.log('obj',obj)
console.log('res',res)
</script>
3.拦截Ajax请求
- 通过模版数据来返回对应的数据，这种模式生成的随机数据是一次性的，不支持缓存和修改
<script>
Mock.mock('/list','get',{
"code|0-1": 1,
"data|10": [
{
"id|+1": 1,
"name": "@cname"
}
],
})
</script>
- 通过回调函数来返回对应的数据，这种模式可以对生成的随机数据进行缓存和修改，推荐
Mock.mock('/list', 'get', function(options){
//{url: '/list', type: 'GET', body: null}
console.log('options',options)
//要返回的数据可提前生成，这里直接返回
return {}
})
- url支持正则表达式，可以给url添加参数，并在回调函数中读取
//ajax请求（带参数）
axios.get('/list?page=1&limit=10')
//正则匹配，可通过options.url对参数进行读取
var url_reg = /\/list*/
Mock.mock(url_reg, 'get', function(options){
//{url: '/list?page=1&limit=10', type: 'GET', body: null}
console.log('options',options)
//要返回的数据可提前生成，这里直接返回
return {}
})
4.数据模板定义规范
- 数据模板中的每个属性由 3 部分构成：属性名、生成规则（可选）、属性值：
- 当生成规则不存在时，则原样输出value，如果存在生成规则，详见下方说明
// 属性名 key
// 生成规则 rule
// 属性值 value
'key|rule': value
- 属性值是字符串：当以值为模板，进行批量复制，如果值是空的，则模板为随机的一个字符
"str|3-7":'hi', // 重复生成 3-7 次 'hi' 例如：str: "hihihihihi"
"str2|2":'hi', // 重复生成 2 次 'hi' 例如：str2: "hihi"
"str3|5":'', // 重复生成 5 次 随机字符 例如：str3: "BwpB9"
- 属性值是数字：+1代表自增，10-20数字代表生产的数值范围
"id|+1":0, // id默认为0 每生成一次数据 id就+1
"age|10-20":10, // age在10-20之间，且为整数
"weight|40-60.0-2":40 // weight在40-60直接，小数部分保留0到2位
"flag|1":true, // flag为随机的布尔值，true/false的概率都是50%
"flag2|10-40":true, // flag为true的几率为 10/(10+40)=0.2，及true与false的比例为10:40
- 属性值是对象：生成规则表示随机选取n个属性进行返回
// 属性值对象中随机选取2个属性
"userInfo|2":{
"name":'张三',
"age":18,
"hobby":'看电影',
"skill":'PHP'
}
// => userInfo: {hobby: "看电影", age: 18}
// 属性值对象中随机选取2-4个属性
"userInfo|2-4":{
"name":'张三',
"age":18,
"hobby":'看电影',
"skill":'PHP'
}
//规则为 1，从数组元素中随机选一个作为字段值
"gender|1":['男','女']
//规则为 大于1 循环生成数组元素
"userInfo|2":['hi'] // 循环创建数组中的内容，循环次数为2次 => "userInfo":['hi',hi']
"userInfo|2-4":['hi'] // 循环创建数组中的内容，循环次数为2-4次
//规则为 +1 依次输出数组元素
"music|+1":['爱你的早晨','玻璃鞋对白','梦的翅膀受了伤','寂寞在唱什么歌']
5.预定义的值类型
- 将属性值设置成下面的类型值，则可以生成特定格式的数据(格式固定，但值是随机的)
| 类型值 |
说明 |
示例 |
| @date |
年月日 |
2008-05-14 |
| @time |
时分秒 |
19:52:14 |
| @color |
颜色 |
#a8f279 |
| @name |
英文名 |
Elizabeth Brown |
| @cname |
中文名 |
叶洋 |
| @domain |
域名 |
bdor.wf |
| @ip |
ip |
13.226.27.93 |
| @email |
邮箱 |
i.mvxss@vstcgevu.tc |
| @province |
省 |
江苏省 |
| @city |
市 |
无锡市 |
| @county |
县/区 |
濮阳县 |
| @paragraph |
无规则长文本(英文) |
Znkgvut uspgwtqkt |
| @cparagraph |
无规则长文本(中文) |
节术该发速 |
Mock.mock('http://localhost:8080/userInfo',{
"userInfo":{
"name":'@name', // 英文名
"cname":'@cname', // 中文名
"province":'@province', // 随机的省
'city': '@city(true)', // 中国城市
"county":'@county', // 县
'color': '@color', // 16进制颜色编码
"date":'@date', // 年月日 "1993-08-15"
"time":'@time', // 时分秒 "03:34:51"
"text":'@paragraph', // 随机生成一段英文文本
"text2":'@paragraph(2)', // 随机 2句 英文文本
"ctext":'@cparagraph', // 随机生成一段中文文本
"ctext2":'@cparagraph(2)', // 随机生成 2句 中文文本
"domain":'@domain', // 随机的域名
"ip":'@ip', // 随机的ip
"email":'@email', // 随机的邮箱
}
})
