Mockjs使用教程

一. 安装

1
npm install mockjs

官方文档：https://github.com/nuysoft/Mock/wiki

二. 使用

1. 基本使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import Mock from "mockjs";

const data = Mock.mock({
  // 属性 list 的值是一个数组，其中含有 3 到 3 个元素
  'list|1-3': [{
    // 属性 id 是一个自增数，起始值为 1，每次增 1
    'id|+1': 1,
    'name': '@name'
  }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

输出结果：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
    "list": [
        {
            "id": 1,
            "name": "王小明"
        },
        {
            "id": 2,
            "name": "王小明"
        },
        {
            "id": 3,
            "name": "王小明"
        }
    ]
}

2. 语法规范

2.1. 数据模板定义规范

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

1
2
3
4
// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

String属性

'name|min-max': string：通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
'name|count': string：通过重复 string 生成一个字符串，重复次数等于 count。

Number属性

'name|+1': number：属性值自动加 1，初始值为 number。
'name|min-max': number：生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
'name|min-max.dmin-dmax': number：生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
'name|min-max.d': number：生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 d 位。
'name|d': number：生成一个浮点数，整数部分大于等于 0，小数部分保留 d 位。

Boolean属性

'name|1': boolean：随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率也是 1/2。
'name|min-max': boolean：生成一个布尔值，值为 true 的概率是 min / (min + max)，值为 false 的概率是 max / (min + max)。

Object属性

'name|count': object：从属性值 object 中随机选取 count 个属性。
''name|min-max': object：从属性值 object 中随机选取 min 到 max 个属性。

Array属性

'name|1': array：从属性值 array 中随机选取 1 个元素，作为最终值。
'name|+1': array：从属性值 array 中顺序选取 1 个元素，作为最终值。
'name|min-max': array：通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
'name|count': array：通过重复属性值 array 生成一个新数组，重复次数为 count。

Function属性

'name': function：执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 ’name’ 所在的对象。

正则表达式

'name': regexp：根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

2.2. 占位符定义规范

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符的格式为：

@占位符
@占位符(参数 [, 参数])

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
Mock.mock({
    name: {
        first: '@first',
        middle: '@middle',
        last: '@last',
        full: '@first @middle @last'
    }
})
// 输出结果
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

三. Mock.Random

Mock.Random 是一个工具类，用于生成各种随机数据。

Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。

1
2
3
4
5
6
7
var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

方法

Mock.Random 提供的完整方法（占位符）如下：

Type	Method
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

扩展

Mock.Random 中的方法与数据模板的 @占位符一一对应，在需要时还可以为 Mock.Random 扩展方法，然后在数据模板中通过 @扩展方法引用。例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
Random.extend({
    constellation: function(date) {
        var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
    constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }

1. 基本类型Basic

1.1. boolean

Random.boolean( min?, max?, current? )：随机生成一个布尔值，值为 true 的概率是 min / (min + max)，值为 false 的概率是 max / (min + max)。

1
2
Mock.mock('@boolean')
// => false

1.2. natural

Random.natural( min?, max? )：随机生成一个大于等于 0 的整数，整数部分大于等于 min，小于等于 max。

1
2
Mock.mock('@natural')
// => 1234

1.3. integer

Random.integer( min?, max? )：随机生成一个整数，整数部分大于等于 min，小于等于 max。

1
2
Mock.mock('@integer')
// => 1234

1.4. float

Random.float( min?, max?, dmin?, dmax? )：随机生成一个浮点数，整数部分大于等于 min，小于等于 max，小数部分保留 dmin 到 dmax 位。

1
2
Mock.mock('@float')
// => 1234.1234

1.5. character

Random.character( pool? )：随机生成一个字符，pool 为字符池，如果传入了 ’lower’ 或 ‘upper’、’number’、‘symbol’，表示从内置的字符池从选取：

1
2
3
4
5
6
{
    lower: "abcdefghijklmnopqrstuvwxyz",
    upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
    number: "0123456789",
    symbol: "!@#$%^&*()[]"
}

1
2
Mock.mock('@character')
// => "a"

1.6. string

Random.string( pool?, min?, max? )：随机生成一个字符串，pool 为字符池，如果传入了 ’lower’ 或 ‘upper’、’number’、‘symbol’，表示从内置的字符池从选取。min、max 表示字符串的长度。

1
2
Mock.mock('@string')
// => "a"

1.7. range

Random.range( start?, stop, step? )：随机生成一个数组，数组元素从 start 到 stop，步长为 step。

Random.range( stop )
Random.range( start, stop )
Random.range( start, stop, step )

1
2
Mock.mock('@range')
// => [1, 2, 3]

2. 日期Date

2.1. date

Random.date( format? )：随机生成一个日期，format 为日期格式，默认值为yyyy-MM-dd

1
2
Mock.mock('@date')
// => "2017-01-01"

日期格式：

格式	说明	示例
yyyy	完整的年份数字表示，4位	1999 或 2003
yy	年份的两位数字表示	99 或 03
y	年份的两位数字表示	99 或 03
MM	月份的数字表示，带前导零	01 到 12
M	月份的数字表示，不带前导零	1 到 12
dd	月份中的日期，2位数字，带前导零	01 到 31
d	月份中的日期，不带前导零	1 到 31
HH	24小时制的小时表示，带前导零	00 到 23
H	24小时制的小时表示，不带前导零	0 到 23
hh	12小时制的小时表示，不带前导零	1 到 12
h	12小时制的小时表示，带前导零	01 到 12
mm	分钟，带前导零	00 到 59
m	分钟，不带前导零	0 到 59
ss	秒，带前导零	00 到 59
s	秒，不带前导零	0 到 59
SS	毫秒，带前导零	000 到 999
S	毫秒，不带前导零	0 到 999
A	大写的上午和下午标识	AM 或 PM
a	小写的上午和下午标识	am 或 pm
T	自1970-1-1 00:00:00 UTC以来的毫秒数	759883437303

2.2. time

Random.time( format? )：随机生成一个时间，format 为时间格式，默认值为HH:mm:ss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
Random.time()
// => "00:14:47"
Random.time('A HH:mm:ss')
// => "PM 20:47:37"
Random.time('a HH:mm:ss')
// => "pm 17:40:00"
Random.time('HH:mm:ss')
// => "03:57:53"
Random.time('H:m:s')
// => "3:5:13"

2.3. datetime

Random.datetime( format? )：随机生成一个日期和时间，format 为日期时间格式，默认值为yyyy-MM-dd HH:mm:ss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
Random.datetime()
// => "1977-11-17 03:50:15"
Random.datetime('yyyy-MM-dd A HH:mm:ss')
// => "1976-04-24 AM 03:48:25"
Random.datetime('yy-MM-dd a HH:mm:ss')
// => "73-01-18 pm 22:12:32"
Random.datetime('y-MM-dd HH:mm:ss')
// => "79-06-24 04:45:16"
Random.datetime('y-M-d H:m:s')
// => "02-4-23 2:49:40"

2.4. now

Ranndom.now( unit, format )
Ranndom.now()
Ranndom.now( format )
Ranndom.now( unit )

Random.now( format? )：随机生成一个当前日期和时间

format（可选），为日期时间格式，默认值为yyyy-MM-dd HH:mm:ss
unit（可选），表示时间单位，用于对当前日期和时间进行格式化。可选值有：year、month、week、day、hour、minute、second、week，默认不会格式化。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Random.now()
// => "2014-04-29 20:08:38 "
Random.now('day', 'yyyy-MM-dd HH:mm:ss SS')
// => "2014-04-29 00:00:00 000"
Random.now('day')
// => "2014-04-29 00:00:00 "
Random.now('yyyy-MM-dd HH:mm:ss SS')
// => "2014-04-29 20:08:38 157"

Random.now('year')
// => "2014-01-01 00:00:00"
Random.now('month')
// => "2014-04-01 00:00:00"
Random.now('week')
// => "2014-04-27 00:00:00"
Random.now('day')
// => "2014-04-29 00:00:00"
Random.now('hour')
// => "2014-04-29 20:00:00"
Random.now('minute')
// => "2014-04-29 20:08:00"
Random.now('second')
// => "2014-04-29 20:08:38"

其它格式还有Image、Color、Text、Name、Web、Address、Helper、Miscellaneous。详细可以查看官方文档：

https://github.com/nuysoft/Mock/wiki

一. 安装#

二. 使用#

1. 基本使用#

2. 语法规范#

2.1. 数据模板定义规范#

2.2. 占位符定义规范#

三. Mock.Random#

1. 基本类型Basic#

1.1. boolean#

1.2. natural#

1.3. integer#

1.4. float#

1.5. character#

1.6. string#

1.7. range#

2. 日期Date#

2.1. date#

2.2. time#

2.3. datetime#

2.4. now#