学习使用 mockjs

---

前言

mock.js 官网
mockjs 官网提供的示例

mock.js 主要用于：生成随机数据，拦截 Ajax 请求。

一、安装 mockjs

由于 mockjs 只用于开发环境实现模拟数据，而生产环境有真正的后台服务器因此需要 mockjs。所以只需要将 mockjs 安装在开发环境下即可，执行指令：

npm i mockjs -D

二、mockjs 语法

Mock.js 的语法规范包括两部分：

• 数据模板定义规范。
• 数据占位符定义规范。

1、数据模板定义规范

数据模板中的每个属性由 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,

• 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
• 属性值 中可以含有 @占位符。
• 可以给属性值设置 初始值及其类型。

（1）、属性值是字符串 String

'name|min-max': string

上述代码表示：通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。

'name|count': string

上述代码表示：通过重复 string 生成一个字符串，重复次数等于 count。

（2）、属性值是数字 Number

'name|+1': number

上述代码表示：属性值自动加 1，初始值为 number。

'name|min-max': number

上述代码表示：生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

'name|min-max.dmin-dmax': number

上述代码表示：生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。

（3）、属性值是布尔型 Boolean

'name|1': boolean

上述代码表示：随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

'name|min-max': value

上述代码表示：随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

（4）、属性值是对象 Object

'name|count': object

上述代码表示：从属性值 object 中随机选取 count 个属性。

'name|min-max': object

上述代码表示：从属性值 object 中随机选取 min 到 max 个属性。

（5）、属性值是数组 Array

'name|1': array

上述代码表示：从属性值 array 中随机选取 1 个元素，作为最终值。

'name|+1': array

上述代码表示：从属性值 array 中顺序选取 1 个元素，作为最终值。

'name|min-max': array

上述代码表示：通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

'name|count': array

上述代码表示：通过重复属性值 array 生成一个新数组，重复次数为 count。

（6）、属性值是函数 Function

'name': function

上述代码表示：执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 ‘name’ 所在的对象。

（7）、属性值是正则表达式 RegExp

'name': regexp

上述代码表示：根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

2、数据占位符定义规范

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

mockjs 占位符 的语法：

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

mockjs 占位符 的规则：

• 用 @ 来标识其后的字符串是 占位符。
• 占位符 引用的是 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"
    }
}

三、mockjs 的 API

1、Mock.mock()

Mock.mock() 方法用于：根据数据模板生成模拟数据。

mock() 方法可以接收 3 个参数：

• url：可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如：//domain/list.json/、‘/domian/list.json’。
• type：可选。表示需要拦截的 Ajax 请求类型。例如：GET、POST、PUT、DELETE 等。
• template 或 function：可选。
  • template：表示数据模板，可以是对象或字符串。例如：{ ‘data|1-10’: [{}] }、‘@EMAIL’。
  • function：表示用于生成响应数据的函数。其参数是一个包含 url、type 和 body 三个属性的对象，表示本次请求的 Ajax 选项。

2、Mock.setup()

Mock.setup() 方法用来：配置拦截 Ajax 请求时的行为。支持的配置项有：timeout。

setup() 方法可以接收 2 个参数：

• settings：必选。配置项集合。
• timeout：可选。指定被拦截的 Ajax 请求的响应时间，单位是毫秒。默认值是’10-100’。
  • 值可以是正整数，例如： 400，表示 400 毫秒 后才会返回响应内容；
  • 也可以是横杠 ‘-’ 风格的字符串，例如： ‘200-600’，表示响应时间介于 200 和 600 毫秒之间。

例如：

Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})

【注意】目前，接口 Mock.setup( settings ) 仅用于配置 Ajax 请求，将来可能用于配置 Mock 的其他行为。

3、Mock.valid()

Mock.valid() 方法用来：校验真实数据 data 是否与数据模板 template 匹配。

valid() 方法可以接收 2 个参数：

• template：必选。表示数据模板，可以是对象或字符串。例如 { ‘list|1-10’:[{}] }、‘@EMAIL’。
• data：必选。表示真实数据。

例如：

var template = {
    name: 'value1'
}
var data = {
    name: 'value2'
}
Mock.valid(template, data)
// =>
[
    {
        "path": [
            "data",
            "name"
        ],
        "type": "value",
        "actual": "value2",
        "expected": "value1",
        "action": "equal to",
        "message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2"
    }
]

4、Mock.toJSONSchema()

Mock.toJSONSchema() 方法用来：把 Mock.js 风格的数据模板 template 转换成 JSON Schema。

toJSONSchema() 方法可以接收 1 个参数：

• template：必选。表示数据模板，可以是对象或字符串。例如 { ‘list|1-10’:[{}] }、‘@EMAIL’。

例如：

var template = {
    'list|1-10': [{}]
}
Mock.toJSONSchema(template)
// =>
{
    "name": undefined,
    "path": ["ROOT"],
    "type": "object",
    "template": {
        "list|1-10": [{}]
    },
    "rule": {},
    "properties": [{
        "name": "list",
        "path": ["ROOT", "list"],
        "type": "array",
        "template": [{}],
        "rule": {
            "parameters": ["list|1-10", "list", null, "1-10", null],
            "range": ["1-10", "1", "10"],
            "min": 1,
            "max": 10,
            "count": 6,
            "decimal": undefined,
            "dmin": undefined,
            "dmax": undefined,
            "dcount": undefined
        },
        "items": [{
            "name": 0,
            "path": ["data", "list", 0],
            "type": "object",
            "template": {},
            "rule": {},
            "properties": []
        }]
    }]
}

5、Mock.Random 系列

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

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

例如：

var Random = Mock.Random
Random.email()
// => "[email protected]"
Mock.mock('@email')
// => "[email protected]"
Mock.mock( { email: '@email' } )
// => { email: "[email protected]" }

​

Mock.Random 提供的方法（占位符）

类型	方法	描述
Basic	boolean	随机生成一个布尔值（true 或 false）
	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	随机生成一个 URL
	domain	随机生成一个域名
	email	随机生成一个邮箱
	ip	随机生成一个 IP 地址
	tld	随机生成一个顶级域名
Address	area	随机生成一个地区
	region	随机生成一个七大地区之一（东北、西北、西南、华北、华中、华南、华东）
Helper	capitalize	将指定英文单词转换成首字母大写的单词
	upper	将指定英文字符串转换成全部大写的字符串
	lower	将指定英文字符串转换成全部小写的字符串
	pick	随机输出给定数组中的某一项
	shuffle	随机打乱指定数组里所有项的顺序
Miscellaneous	guid	随机生成一个 GUID（十六进制数的全局唯一标识符）
	id	随机生成一个身份证号
	increment	随机生成一个自增 id

【拓展】具体每个方法的使用请看：官网提供的案例。

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

Random.extend({
    constellation: function(date) {
        var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
    constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }

四、mockjs 的原理简析

Mockjs 实现的原理是对 XHR 对象的拦截，属于 js 拦截，并没有通过浏览器发出请求。

Mockjs原理简析

五、mockjs 的使用典例

mockjs 官网提供的示例

1、用 mock 模拟数据的案例

const arr = ['momo', 'yanzi', 'ziwei']
const obj = {
  'host': 'www.baidu',
  'port': '12345',
  'node': 'selector'
}

Mock.mock('http://www.bai.com', {
  'firstName|3': 'fei',//重复fei这个字符串 3 次，打印出来就是'feifeifei'。
  'lastName|2-5': 'jiang',//重复jiang这个字符串 2-5 次。
  'big|+1': 0, //属性值自动加 1，初始值为 0
  'age|20-30': 25,//生成一个大于等于 20、小于等于 30 的整数，属性值 25 只是用来确定类型
  'weight|100-120.2-5': 110.24,//生成一个浮点数,整数部分大于等于 100、小于等于 120，小数部分保留 2 到 5 位。
  'likeMovie|1': Boolean,//随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
  'friend1|1': arr,//从数组 arr 中随机选取 1 个元素，作为最终值。
  'friend2|+1': arr,//从属性值 arr 中顺序选取 1 个元素，作为最终值
  'friend3|2-3': arr,//通过重复属性值 arr 生成一个新数组，重复次数大于等于 2，小于等于 3。
  'life1|2': obj,//从属性值 obj 中随机选取 2 个属性
  'life1|1-2': obj,//从属性值 obj 中随机选取 1 到 2 个属性。
  'regexp1': /^[a-z][A-Z][0-9]$/,//生成的符合正则表达式的字符串
})

2、用 mock 实现模拟数据的增删改查

const arr=[
  {name:'fei',age:20,id:1},
  {name:'liang',age:30,id:2},
  {name:'jun',age:40,id:3},
  {name:'ming',age:50,id:4}
]

Mock.mock('http://www.bai.com', 'delete', (options) => {
  var id = parseInt(options.body.split("=")[1])// 获取删除的id
  var index;
  for(var i in arr){
      if(arr[i].id===id){// 在数组arr里找到这个id
          index=i
          break;
      }
  }
  arr.splice(index,1)// 把这个id对应的对象从数组里删除
  return arr;// 返回这个数组,也就是返回处理后的假数据
})

六、使用 mockjs 遇到的问题汇总

1、设置代理解决跨域

在 webpack 的开发环境配置文件中，或者在 vue.config.js 文件中，设置 devServer 配置项如下：

devServer: {
  port: 8080,
  hot: true,
  proxy: {
    '/api': {
      target: "http://xxx:xxx",
      ws: false,
      changeOrigin: true,
      pathRewrite: {
        '^/api': '' 
      }
    }
  }
},

【参考文章】
mock.js 官网
mockjs 使用简介
Mock.js简易教程，脱离后端独立开发，实现增删改查功能
Mockjs原理简析