共计 8232 个字符，预计需要花费 21 分钟才能阅读完成。

mock 的使用

1. 安装 mockjs
   bower install --save mockjs
2. 文件中导入 mockjs 返回有个 mock 对象
   const Mock = require('mockjs')
3. mock 对象中有一个 mock 函数 mock 会根据自己编写的模板自动生成模拟数据

官网：http://mockjs.com

初体验

 const Mock = require('mockjs')

/**
 * 返回的模拟数据都是对象类型
 *  返回对象的 key list
 */
const data = Mock.mock({
  // 生成的随机数组的长度是 5-10
  "list|5-10": [
    // 数组中的元素是对象类型 "id|+1": 1 生成的 id 是从 1 开始递增的
    { "id|+1": 1 }
  ]
})

console.log(data)
/*
{
  list: [
    { id: 1 }, { id: 2 }, { id: 3 },
    { id: 4 }, { id: 5 }, { id: 6 },
    { id: 7 }, { id: 8 }, { id: 9 }
  ]
}
*/   

Mock 语法规范

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

1. 数据模板定义规范（Data Template Definition，DTD）
2. 数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范 DTD

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

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

'id|+1':1 // 属性名是 id，规则是自增 1，从 1 开始

注意：

属性名 和 生成规则 之间用竖线 | 分隔。

生成规则 是可选的。

生成规则 有 7 种格式：

I. 'name|min-max': value

II. 'name|count': value

III. 'name|min-max.dmin-dmax': value

IV. 'name|min-max.dcount': value

V. 'name|count.dmin-dmax': value

VI. 'name|count.dcount': value

VII. 'name|+step': value

生成规则 的 含义 需要依赖 属性值的类型 才能确定。

属性值 中可以含有 @占位符。

属性值 还指定了最终值的初始值和类型。

生成规则和示例：

1. 属性值是字符串 String

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

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)。

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. 属性值是函数 函数

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

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

占位符 的格式为：

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

注意：

用 @ 来标识其后的字符串是 占位符。

占位符 引用的是 Mock.Random 中的方法。

通过 Mock.Random.extend() 来扩展自定义占位符。

占位符 也可以引用 数据模板 中的属性。

占位符 会优先引用 数据模板 中的属性。

占位符 支持 相对路径 和 绝对路径。

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

生成模拟数据模板

示例：http://mockjs.com/examples.html

字符串和数值一共有 7 种生成规则

生成规则	说明	示例
min-max	生成 min-max 之间的字符串	'list|1-10'
count	生成 count 个字符串	'list|5'
min-max.dmin-dmax	生成 min-max 之间的浮点数，小数点后面保留 dmin-dmax 位	'id|1-10.1-3'：1
count.dcount	生成 count 个浮点数，小数点保留 dcount 位	'id|10.2'：1
min-max.dcount	同上	'id|1-10.3':1
count.dmix-dmax	同上	'id|10.1-3':1
+step	每次累计 step 值	'id|+1':1

布尔值，对象和数组的生成规则

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

随机生成字符串

const Mock = require('mockjs')

const data = Mock.mock({
  "a": "#", // 返回数据对象的 key 就是 a，值是 #
  "b|3":"#",
  "c|1-3":"#", // 返回 1-3 个 #
})

console.log(data)

随机生成数字

const Mock = require('mockjs')

const data = Mock.mock({
  "a": 1, // 返回数据对象的 key 就是 a，值是 1
  "b|1-100": 1, // 随机生成 1-100 中数值
})

console.log(data)

随机生成布尔值

const Mock = require('mockjs')

const data = Mock.mock({
  "a": true, // 返回数据对象的 key 就是 a，值是 true
  "b|1-2": false, // 随机返回 true 或 false
})

console.log(data)

随机生成对象

const Mock = require('mockjs')

const cities = {
  "bj": "北京",
  "sh": "上海",
  "gz": "广州",
  "sz": "深圳",
  "xm": "厦门"
}
const data = Mock.mock({
  "a|3": cities, // 随机生成一个只有三个元素的对象，从 cities 里面
  "b|2-5": cities, // 随机生成一个有 2 个到 5 个元素的对象，从 cities 里面
})

console.log(data)

随机生成数组

const Mock = require('mockjs')

const arr = ["北京", "上海", "广州"]
const data = Mock.mock({
  // 匿名数组：生成有几个元素到几个的元素数组
  "a|3": ["北京"], // 生成一个只有三个元素的数组
  "b|2-5": ["北京"], // 随机生成 2 个到 5 个元素的数组
  // 命名数组：将数组的元素生成几次
  "c|2": arr, // 将 arr 重复 2 次生成新数组
  "d|1-3": arr // 将 arr 重复 1-3 次生成新数组
})

console.log(data)

数据占位符定义

随机生成字符串

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.Random.string(), // 随机生成字符串
  "b": Mock.mock("@string"), // 模板方式，没有参数时可以不用加括号
  "c": Mock.mock("@string(6)"), // 随机生成 6 位字符串
  "d": Mock.mock("@string(upper,8)"), // 随机都是大写，长度为 8 位的字符串
  "e": Mock.mock("@string(4,8)"), // 获取指定长度范围的字符串
  "f": Mock.mock("@string(lower,4,8)"), // 获取都是小写指定长度范围的字符串
})
console.log(data)

随机获取整数元素数组

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock("@range(10)"), // 获取长度为 10 的数组，数组元素从 0 开始，每个元素递增 1
  "b": Mock.mock("@range(5,11)"), // 获取里面元素是 5~10 的数组
  "c": Mock.mock("@range(1,10,2)"), // [ 1, 3, 5, 7, 9 ] 步长是 2
})
console.log(data)

随机获取时间

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock('@date'), // 随机获取时间，年-月-日
  "b": Mock.mock('@date(yyyy/MM/dd HH:mm:ss)'), // 随机获取格式化后的时间，年/月/日 hh:mm:ss
})
console.log(data)

随机获取图片

const Mock = require('mockjs')

// Random.image( size?, background?, foreground?, format?, text? )
const data = Mock.mock({
  "a": Mock.mock('@image'), // 随机获取一张图片
  "b": Mock.mock('@image(300x300)'), // 随机获取指定大小的图片
  "c": Mock.mock('@image(300x300,#ffc0cb)'), // 随机获取指定大小指定背景的图片
  "d": Mock.mock('@image(300x300,#ffc0cb,#ff0000,xxx)'), // 随机获取指定大小指定背景指定文字颜色的图片
  "e": Mock.mock('@image(300x300,#ffc0cb,#ff0000,gif,xxx)'), // 随机获取指定大小指定背景指定文字颜色指定图片类型的图片
})
console.log(data)

随机获取颜色

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock('@color'), // 16 进制表示的颜色
  "b": Mock.mock('@hex'), // 16 进制表示的颜色
  "c": Mock.mock('@rgb'), // rgb 的颜色
  "d": Mock.mock('@rgba'), // rgba 的颜色
})
console.log(data)

随机获取文本

cparagraph

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock('@cparagraph'), // 随机生成一段中文段落
  "b": Mock.mock('@cparagraph(2)'), // 生成的段落包含 2 句话
  "c": Mock.mock('@cparagraph(1,3)'), // 生成的段落包含 1~3 句话
})
console.log(data)

csentence

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock('@csentence'), // 随机生成一句中文句子
  "b": Mock.mock('@csentence(5)'), // 随机生成含有 5 个字符的中文句子
  "c": Mock.mock('@csentence(5,10)'), // 随机生成含有 5~10 个字符的中文句
})
console.log(data)

cword

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock('@cword'), // 随机生成一个汉字
  "b": Mock.mock('@cword(5)'), // 随机生成 5 个汉字
  "c": Mock.mock('@cword(3,5)'), // 随机生成 3~5 个汉字
  "d": Mock.mock('@cword(零一二三四五六七八九十)'), // 从该字符串中随机取得一个字符
  "e": Mock.mock('@cword(零一二三四五六七八九十,3)'), // 从该字符串中随机取得 3 个字符
  "f": Mock.mock('@cword(零一二三四五六七八九十,3,5)'), // 从该字符串中随机取得 3~5 个字符
})
console.log(data)

ctitle

const Mock = require('mockjs')

const data = Mock.mock({
  // min 不能小于3，max 不能大于7
  "a": Mock.mock('@ctitle'), // 随机生成一个标题，3~7 之间
  "b": Mock.mock('@ctitle(5)'), // 随机生成一个 5 个字符的标题，3~7 之间
  "c": Mock.mock('@ctitle(3,7)'), // 随机生成 3~7 个字符的标题
})
console.log(data)

随机获取名字

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock('@cfirst'), // 随机生成一个姓氏
  "b": Mock.mock('@clast'), // 随机生成一个名字
  "d": Mock.mock('@cname'), // 随机生成一个姓名
})
console.log(data)

随机获取 web 相关数据

const Mock = require('mockjs')

const data = Mock.mock({
  a: Mock.Random.protocol(), // 随机生成一个协议
  b: Mock.Random.domain(), // 随机生成一个域名
  d: Mock.Random.tld(), // 随机生成一个顶级域名
  e: Mock.Random.email(), // 随机生成一个邮箱
  f: Mock.Random.email('qq.com'), // 随机生成一个带有域名的邮箱
  g: Mock.Random.ip(), // 随机生成一个 ip 地址
  h: Mock.Random.url(), // 协议+域名
  i: Mock.Random.url('https'), // https 协议的域名
  j: Mock.Random.url('https','www.qq.com'), // https 协议的 www.qq.com 域名
})
console.log(data)

随机获取地域信息

const Mock = require('mockjs')

const data = Mock.mock({
  a: Mock.Random.region(), // 随机生成一个中国的大区域
  b: Mock.Random.province(), // 随机生成一个中国的省
  c: Mock.Random.city(), // 随机生成一个中国的市
  d: Mock.Random.city(true), // 随机生成一个中国的市，带前缀
  e: Mock.Random.county(), // 随机生成一个中国的县
  f: Mock.Random.county(true), // 随机生成一个中国的县, 带前缀
  g: Mock.Random.zip(), // 随机生成一个邮编
})
console.log(data)

帮助函数

const Mock = require('mockjs')

const data = Mock.mock({
  a: Mock.Random.capitalize('hello'), // 首字母大写 Hello
  b: Mock.Random.upper('Hello'), // 全部大写 HELLO
  c: Mock.Random.lower('Hello'), // 全部小写 hello
  d: Mock.Random.pick(['张三', '李四', '王五']), // 数组中随机取一个
  e: Mock.Random.shuffle(['张三', '李四', '王五']), // 数组中随机打乱
})
console.log(data)

生成混杂数据

const Mock = require('mockjs')

const data = Mock.mock({
  a: Mock.Random.guid(), // 随机生成一个 GUID
  b: Mock.Random.id(), // 随机生成一个 18 位身份证
  c: Mock.Random.increment(), // 生成一个全局的自增整数
  d: Mock.Random.increment(2), // 生成一个全局的自增整，数整数自增的步长为 2
})
console.log(data)

搭建服务器

1. 全局安装 mock-server 服务器包
   npm i @shymean/mock-server -g
2. 通过 mock 命令启动服务器 js 文件
   mock -p 9999 -f 文件名.js
3. 通过浏览器 postman 工具访问该服务器从而获取数据

https://www.npmjs.com/package/@shymean/mock-server

// mock.js
const Mock = require('mockjs')

/**
 * 参数1：请求路径
 * 参数2：请求方法
 * 参数3：返回数据
 */
Mock.mock('/home', 'get', {
  code: 200,
  data: {
    title: Mock.Random.ctitle(5),
    img: Mock.Random.image('200x200'),
    arr: Mock.Random.pick(['张三', '李四', '王五'])
  }
})

// mock -p 9999 -f mock.js