首页
学习
活动
专区
工具
TVP
发布

mock.js学习使用心得

什么是mockJs呢?Mock.js是一款前端开发中拦截请求再生成随机数据响应的工具.可以用来模拟服务器响应. 优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型.

mockjs 官方地址:http://mockjs.com/

使用可以同过npm命令行安装也可直接引用如下

首先介绍Mock.js的数据定义规则:

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

// 属性名 name// 生成规则 rule// 属性值 value 'name|rule': value

1.'name|min-max': string 通过重复 生成一个字符串,重复次数大于等于 ,小于等于 例子:'lastName|2-5':'jiang', 重复jiang这个字符串 2-5 次

2.'name|count': string 通过重复 生成一个字符串,重复次数等于

例子:'firstName|3':'fei', 重复fei这个字符串 3 次,打印出来就是'feifeifei'。

3.'name|min-max': number 生成一个大于等于 、小于等于 的整数,属性值 只是用来确定类型。

例子:'age|20-30':25, 生成一个大于等于 20、小于等于 30 的整数,属性值 25 只是用来确定类型

4.'name|+1': number 属性值自动加 1,初始值为

例子:'big|+1':0, 属性值自动加 1,初始值为 0,以后每次请求在前面的基础上+1

5.'name|min-max.dmin-dmax': number 生成一个浮点数,整数部分大于等于 、小于等于 ,小数部分保留 到 位。

例子:'weight|100-120.2-5':110.24, 生成一个浮点数,整数部分大于等于 100、小于等于 120,小数部分保留 2 到 5 位

6.'name|1': boolean 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2

例子:'likeMovie|1':Boolean, 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。

7.属性值是对象:var obj={'host':'www.baidu','port':'12345','node':'selector'}

7-1.'name|count': object 从属性值 中随机选取 个属性。

例子:'life1|2':obj,从属性值 obj 中随机选取 2 个属性

7-2.'name|min-max': object从属性值 中随机选取 到 个属性

例子:'life1|1-2':obj,从属性值 obj 中随机选取 1 到 2 个属性。

8.属性值是数组:var arr=['momo','yanzi','ziwei']

8-1.'name|1': array 从属性值 中随机选取 1 个元素,作为最终值

例子:'friend1|1':arr, 从数组 arr 中随机选取 1 个元素,作为最终值。

8-2.'name|+1': array 从属性值 中顺序选取 1 个元素,作为最终值。

例子:'friend2|+1':arr, 从属性值 arr 中顺序选取 1 个元素,作为最终值,第一次就是'momo',第二次请求就是'yanzi'

8-3.'name|count': array 通过重复属性值 生成一个新数组,重复次数为 。

例子:'friend3|2':arr, 重复arr这个数字2次作为这个属性值,得到数据应该是['momo','yanzi','ziwei','momo','yanzi','ziwei']

8-4.'name|min-max': array 通过重复属性值 生成一个新数组,重复次数大于等于 ,小于等于

这是一段get请求

Mock.js 响应

回调函数输出

post请求

Mock.js 响应请求

回调返回结果

自定义响应时间

是一个工具类,用于生成各种格式随机数据

1.// 生成一个email格式的字符串

console.log(Mock.mock('@email'));

2.varRandom = Mock.Random;

console.log(Random.email());

Mock.Random提供的类有:

也可以自定义扩展

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180302G0PSF800?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券