前几天就把 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
领取专属 10元无门槛券
私享最新 技术干货