Mock.js 学习笔记

前几天就把 Mock.js 用法大概学习了一下，这几天又忙又累，也没时间发，其实实际任务难度不高，但是主要是业务系统比较复杂，开发习惯和以前差别太大，总是感觉特别别扭，还没有适应。

简介

是一款前端开发中拦截 Ajax 请求在生成随机相应的工具，可以用来模拟服务器响应，优点是简单方便、无侵入性，基本覆盖常用的接口数据类型

安装

文件结构（以Vue-cli中为例）

创建具体业务的 mock 文件

然后项目的入口文件 main.js 中引入入口文件 mock.js（关键）

这样就可以拦截ajax请求，同时返回模拟数据了

语法规范

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

生成规则有一下格式：

字符串：返回重复 区间次数的 字符串

数字：返回位于 区间的数字

布尔值：值为 的概率为 ，值为 的概率为

对象：从对象 中随机抽取 到 个属性

数组：通过重复 中所有元素生成一个新数组，重复次数大于等于 ，小于等于 。

: 返回固定值（或重复多次）

：从数组中随机选取一个元素作为返回值

：通过重复属性值 生成一个新数组，重复次数为

：从数组中顺序加上 选取一个元素作为返回值

字符串：返回重复 次的 字符串

数字：返回等于 的数字

布尔值：值为 true 的概率是 1/2，值为 false 的概率同样是 1/2

对象：从对象 中随机抽取 个属性

数组：

：整数部分位于 区间，小数部分的小数位数位于 之间

：整数部分位于 区间，小数部分的小数位数等于

：整数部分等于 ，小数部分的小数位数位于 之间

：整数部分等于 ，小数部分的小数位数等于

：每次返回值叠加

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

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

占位符

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

占位符的格式为：

其中：

用 来标识占位符

占位符引用 中的方法，通过对相应的方法生成随机数据

Mock.mock()

核心方法，用来拦截 ajax 请求，并返回模拟数据

： 当拦截到匹配 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

：当拦截到匹配 的 Ajax 请求时，函数 将被执行，并把执行结果作为响应数据返回。

：当拦截到匹配 和 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。注意 必须是小写

上面的参数：

： 表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 、。

： 表示需要拦截的 Ajax 请求类型，例如 、、、 等，注意必须是小写。

： 表示返回的数据模版

：函数中的参数 指向本次请求的 Ajax 选项集，含有 、、三个属性

Mock.setup(settings)

配置拦截 Ajax 请求时的行为。

支持的配置项有：。指定被拦截的 Ajax 请求的响应时间，单位是毫秒。

Mock.Random

一个工具类，生成各种随机数据，

在模板中通过占位符 引用

完整方法分为几类：

基础：包括各种数字、字符、范围、时间、日期等

图像：返回图片的地址或者 base64 格式编码

颜色：返回颜色的十六进制颜色码

文字：包括中文或英文的段落、标题、句子、单词等

名字：包括中文活跃英文的完整名字和以及名和姓

网址：包括网址、域名、邮箱、ip、和tld

地址：包括方位

格式化：包括首字母大写、全部大写、全部小写、数组随机选一项、数组乱序

完整方法：

image

还可以通过 来扩展内置方法，通过 同样引用扩展的方法

参考

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

http://mockjs.com/examples.html

https://segmentfault.com/a/1190000010211622