细说 Mockjs
随着技术的不断发展，前后端分离已成为 Web 的标准。前端工程师需要更加独立的去做一些事情，别再傻傻的等后端工程师的 API 文档了，确定需求，我们就可以开始了。
文章将列举日常开发中常用的 Mock 用法，更多扩展请参考：代码示例。
一、引入方式
1.引入 js 文件：1
<script src="http://mockjs.com/dist/mock.js"></script>
2.node 引入及示例：1
2
3
4
5
6
7
8
9
10
11// 安装
npm install mockjs
// 使用
var Mock = require('mockjs');
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
console.log(JSON.stringify(data, null, 4))
3.bower 安装以及引入：1
2npm install -g bower
bower install --save mockjs
HTML 引入注意路径：1
<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>
4.RequireJS (AMD)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17// 配置 Mock 路径
require.config({
paths:{
'mock':'http://mockjs.com/dist/mock'
}
})
// 加载 Mock
require(['mock'], function(Mock){
// 使用 Mock
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
5.Sea.js (CMD)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17seajs.config({
alias: {
"mock": "http://mockjs.com/0.1/dist/mock.js"
}
})
// 加载 Mock
seajs.use('mock', function(Mock){
// 使用 Mock
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
二、字符串操作
1.生成随机长度字符串 'name|min-max': string:1
2
3Mock.mock({
"string|1-10": "★"
})
2.生成指定字符串长度， 'name|count': string:1
2
3Mock.mock({
"string|3": "★★★"
})
此处 count 为指定字符串循环次数。
三、Number 类型
1.生成 1－100 之间的整数，'name|min-max': number：1
2
3Mock.mock({
"number|1-100": 100
})
2.生成 1-100 间个数小于 10 位的小数，'name|min-max.dmin-dmax': number：1
2
3Mock.mock({
"number|1-100.1-10": 1
})
3.生成大于 123.1 且位数小于 10位的小数：1
2
3Mock.mock({
"number|123.1-10": 1
})
四、布尔类型
1.随机生成 boolen 类型的属性，'name|1': boolean：1
2
3Mock.mock({
"boolean|1": true
})
五、生成对象
1.从指定对象中随机选择两条数据，'name|count': object：1
2
3
4
5
6
7
8Mock.mock({
"object|2": {
"310000": "上海市",
"320000": "江苏省",
"330000": "浙江省",
"340000": "安徽省"
}
})
输出：1
2
3
4
5
6{
"object": {
"320000": "江苏省",
"330000": "浙江省"
}
}
2.选择 2-4 位指定位数属性，'name|min-max': object:1
2
3
4
5
6
7
8Mock.mock({
"object|2-4": {
"110000": "北京市",
"120000": "天津市",
"130000": "河北省",
"140000": "山西省"
}
})
六、数组操作
1.随机选择给定数组中某 1 项，'name|1': array：1
2
3
4
5
6
7Mock.mock({
"array|1": [
"AMD",
"CMD",
"UMD"
]
})
结果：1
2
3{
"array": "CMD"
}
2.在给定数组中选择 1 项，生成 1-10 次：1
2
3
4
5
6
7
8
9
10
11Mock.mock({
"array|1-10": [
{
"name|+1": [
"Hello",
"Mock.js",
"!"
]
}
]
})
3.随机生成 1-10 个给定数组项，｀’name|min-max’: array｀：1
2
3
4
5Mock.mock({
"array|1-10": [
"Mock.js"
]
})
4.将数组项复制 1-10 次：1
2
3
4
5
6
7Mock.mock({
"array|1-10": [
"Hello",
"Mock.js",
"!"
]
})
5.拷贝数组项三次，'name|count': array：1
2
3
4
5Mock.mock({
"array|3": [
"Mock.js"
]
})
同理：1
2
3
4
5
6
7Mock.mock({
"array|3": [
"Hello",
"Mock.js",
"!"
]
})
结果为：1
2
3
4
5
6
7
8
9
10
11
12
13{
"array": [
"Hello",
"Mock.js",
"!",
"Hello",
"Mock.js",
"!",
"Hello",
"Mock.js",
"!"
]
}
七、调用方法
1.可以将方法作为返回值：1
2
3
4
5
6Mock.mock({
'foo': 'Syntax Demo',
'name': function() {
return this.foo
}
})
结果：1
2
3
4{
"foo": "Syntax Demo",
"name": "Syntax Demo"
}
八、正则表达式
1.按照正则规则生成字符串：1
2
3Mock.mock({
'regexp': /[a-z][A-Z][0-9]/
})
结果为：1
2
3{
"regexp": "kN6"
}
2.生成 5-10 位数字：1
2
3Mock.mock({
'regexp': /\d{5,10}/
})
九、数据占位符定义
1.生成 boolean 类型：1
2
3Random.boolean() // true
Mock.mock('@boolean') // false
Mock.mock('@boolean()') // false
2.生成 60-100 间的整数：1
Random.integer(60, 100)
3.生成 60-100 之间浮点数，且小数点后保留 3-5 位：1
2Random.float(60, 100, 3)
Random.float(60, 100, 3, 5)
4.生成步近值为 2 的数组序列：1
Random.range(1, 10, 2)
结果：1
[1,3,5,7,9]
十、生成日期格式字符串
1.生成日期：1
2Random.date('yyyy-MM-dd') // "2008-04-11"
Mock.mock('@date("yyyy-MM-dd")') // "1979-05-03"
2.生成时间：1
2Random.time('A HH:mm:ss') // "PM 16:21:17"
Random.time('HH:mm:ss') // "12:20:39"
3.生成日期和时间：1
2Random.datetime('yyyy-MM-dd A HH:mm:ss') // "2008-01-18 PM 21:45:12"
Mock.mock('@datetime("yyyy-MM-dd A HH:mm:ss")') // "2005-08-01 AM 00:07:46"
4.当前时间：1
2
3Random.now() // "2017-12-03 19:02:13"
Mock.mock('@now') // "2017-12-03 19:02:13"
Mock.mock('@now()') // "2017-12-03 19:02:13"
十一、占位图片
1.Random.image( size?, background?, foreground?, format?, text? ):1
2
3
4
5
6
7
8// 200*100 的图片
Random.image('200x100')
// 生成背景色为 #50B347 前景色为 #FFF，写着 jartt 的图片
Random.image('200x100', '#50B347', '#FFF', 'jartt')
// 还可以指定生成的图片格式，如：png
Random.image('200x100', '#894FC4', '#FFF', 'png', 'jartto')
十二、生成色值
1.默认生成 16 进制：1
2
3Random.color() // "#79f28d"
Mock.mock('@color') // "#79f28d"
Mock.mock('@color()') // "#79f28d"
2.还有 rgb 和 rgba：1
2
3Random.rgb() // "rgb(242, 171, 121)"
Mock.mock('@rgb')
Mock.mock('@rgb()')
十三、生成英文/中文段落
1.随机生成 1-3 段英文段落，Random.paragraph( min?, max? )：1
2Random.paragraph(1,3)
Mock.mock('@paragraph(1,3)')
2.随机生成 3-5 个英文句子，Random.sentence( min?, max? )：1
2
3
4
5
6
7// Random.sentence( len )
Random.sentence(5)
Mock.mock('@sentence(5)')
// Random.sentence( min, max )
Random.sentence(3, 5)
Mock.mock('@sentence(3, 5)')
3.英文单词和英文标题：1
2
3
4
5
6
7// Random.word( len )
Random.word(5)
Mock.mock('@word(5)')
// Random.word( min, max )
Random.word(3, 5)
Mock.mock('@word(3, 5)')
4.中文段落：1
2
3
4
5
6
7// Random.cparagraph( len )
Random.cparagraph(2)
Mock.mock('@cparagraph(2)')
// Random.cparagraph( min, max )
Random.cparagraph(1, 3)
Mock.mock('@cparagraph(1, 3)')
5.中文句子：1
2
3
4
5
6
7// Random.csentence( len )
Random.csentence(5)
Mock.mock('@csentence(5)')
// Random.csentence( min, max )
Random.csentence(3, 5)
Mock.mock('@csentence(3, 5)')
6.随机汉字：1
2
3
4
5
6
7// Random.cword( min, max )
Random.cword(3, 5)
Mock.mock('@cword(3, 5)')
// Random.cword( pool, min, max )
Random.cword('零一二三四五六七八九十', 5, 7)
Mock.mock('@cword("零一二三四五六七八九十", 5, 7)')
结果：1
2
3
4
5
6
7// Random.cword( min, max )
"活第听参"
"总算场"
// Random.cword( pool, min, max )
"一三七一二八"
"五九八三七七"
7.汉字标题：1
2
3
4
5
6
7// Random.ctitle( len )
Random.ctitle(5)
Mock.mock('@ctitle(5)')
// Random.ctitle( min, max )
Random.ctitle(3, 5)
Mock.mock('@ctitle(3, 5)')
十四、中英文姓名
1.生成英文名字1
2
3
4// Random.name()
Random.name()
Mock.mock('@name')
Mock.mock('@name()')
结果：1
2
3
4// Random.name()
"Patricia Clark"
"Mary Jones"
"Jose Miller"
2.汉语名字：1
2
3
4// Random.cname()
Random.cname()
Mock.mock('@cname')
Mock.mock('@cname()')
结果：1
2
3
4// Random.cname()
"卢明"
"黎洋"
"董芳"
十五、地址相关
1.生成 URL：1
2
3
4// Random.url()
Random.url() // "mailto://wiau.gp/ashkjy"
Mock.mock('@url')
Mock.mock('@url()')
2.生成 Email：1
2
3
4// Random.email()
Random.email() // "h.qbhlgrab@srec.gm"
Mock.mock('@email')
Mock.mock('@email()')
3.生成 ip：1
2
3
4// Random.ip()
Random.ip() // "71.1.205.35"
Mock.mock('@ip')
Mock.mock('@ip()')
4.生成区域：1
2
3
4// Random.region()
Random.region() // "华南"
Mock.mock('@region') // "西北"
Mock.mock('@region()') // "西北"
5.生成省：1
2
3
4// Random.province()
Random.province() // "江西省"
Mock.mock('@province')
Mock.mock('@province()')
6.生成城市：1
2
3
4
5
6
7// Random.city()
Random.city()
Mock.mock('@city')
Mock.mock('@city()')
// Random.city( prefix )
Random.city(true)
Mock.mock('@city(true)')
结果：1
2
3
4
5
6
7// Random.city()
"桂林市"
"海口市"
"玉溪市"
// Random.city( prefix )
"内蒙古自治区 呼伦贝尔市"
"宁夏回族自治区 银川市"
7.区县：1
2
3
4
5
6
7// Random.county()
Random.county() // "南沙群岛"
Mock.mock('@county')
Mock.mock('@county()')
// Random.county( prefix )
Random.county(true) // "黑龙江省 齐齐哈尔市 克东县"
Mock.mock('@county(true)')
十六、Helper
1.首字母大写：1
2
3// Random.capitalize( word )
Random.capitalize('hello')
Mock.mock('@capitalize("hello")')
2.转大小写：1
2
3
4
5
6
7// Random.upper( str )
Random.upper('hello')
Mock.mock('@upper("hello")')
// Random.lower( str )
Random.lower('HELLO')
Mock.mock('@lower("HELLO")')
3.数组随机取值：1
2
3// Random.pick( arr )
Random.pick(['a', 'e', 'i', 'o', 'u']) // 'a'
Mock.mock('@pick(["a", "e", "i", "o", "u"])')
4.打乱数组项顺序：1
2
3// Random.shuffle( arr )
Random.shuffle(['a', 'e', 'i', 'o', 'u']) // ["o","e","i","u","a"]
Mock.mock('@shuffle(["a", "e", "i", "o", "u"])')
5.生成 guid：1
2
3
4// Random.guid()
Random.guid()
Mock.mock('@guid')
Mock.mock('@guid()')
6.生成 id：1
2
3
4// Random.id()
Random.id()
Mock.mock('@id')
Mock.mock('@id()')
