有时后端接口还没有写好,前端开发进度比后端快,这是我们可以使用mock进行一个请求数据的模拟(并没有真的发请求,在请求发出去之前就被mock拦截,返回数据,所以在internet面板中看不到)
安装mockjs
在vue中使用mockjs
生成数据的一些常用语法
生成字符串
生成指定次数字符串
生成指定范围长度字符串
生成一个随机字符串
生成指定长度和范围
生成标题和句子
生成指定长度的标题和句子
生成指定范围的
生成段落
生成数字
生成数字
生成增量id
随机生成整数
整数需要范围在integer后面加最小最大范围
生成姓名-地址-身份证号
随机生成图片
- 参数1:图片可选大小
- 参数2:图片背景色
- 参数3:图片前景色
- 参数4:图片格式
- 参数5:图片文字
生成时间
生成指定格式时间:@date(yyyy-MM-dd hh:mm:ss)
生成数组
- 指定长度:‘data|5’
- 指定范围:‘data|5-10’
语法规范-数据模板定义
数据模板中每个属性由3部分组成: 属性名|生成规则:属性值
- ‘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.dcout’: value
- ‘name|+step’: value
属性值中可以包含@占位符 属性值还指定了最终值的初始值和类型
1.属性值是字符串
- ‘name|min-max’: string
通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max
- ‘name|count’: string
通过重复 string 生成一个字符串,重复次数等于 count
2.属性值是数字
- ‘name|+1’: number
属性值自动加 1,初始值为 number
- ‘name|min-max’: number
生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型
- ‘name|min-max.dmin-dmax’: number
生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin 到 dmax 位
3.属性值是布尔值
- ‘name|1’: boolean
随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2
- ‘name|min-max’: value
随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)
4.属性值是对象
- ‘name|count’: object
从属性值 object 中随机选取 count 个属性
- ‘name|min-max’: object
从属性值 object 中随机选取 min 到 max 个属性
5.属性值是数组
- ‘name|1’: array
从属性值 array 中随机选取 1 个元素,作为最终值
- ‘name|+1’: array
从属性值 array 中顺序选取 1 个元素,作为最终值
- ‘name|min-max’: array
通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max
- ‘name|count’: array
通过重复属性值 array 生成一个新数组,重复次数为 count
6.属性值是函数
- ‘name’: function
执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 ‘name’ 所在的对象
7.属性值是正则表达式
- ‘name’: regexp
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串
Mock.mock拦截
- Mock.mock( requestUrl?, requestType?, template|function(options) )
- Mock.mock( template )
- Mock.mock( requestUrl, template )
- Mock.mock( requestUrl, requestType, template )
- Mock.mock( requestUrl, requestType, function(options) )
requestUrl: 要拦截的URL,字符串或正则表达式
equestType: 要拦截的请求类型,get/post/put/delete/options…
template: 数据模板
function(options):生成响应数据的函数,options --> { url, type, body }