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

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180326G1HJ2V00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券