mock.js 的介绍与使用

JavaScript016

mock.js 的介绍与使用,第1张

Mock.js (官网地址:http://mockjs.com/)是一款模拟数据生成器,旨在帮助前端工程师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:

1,根据数据模板生成模拟数据

2,模拟 Ajax 请求,生成并返回模拟数据

3,基于 HTML 模板生成模拟数据

1.安装mock

2.在src下新建一个mock文件 引入mock.js

3.在页面中发送请求

4.在mock文件夹下的index.js中设置mock数据,并拦截请求,将假数据传入页面

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。

4.属性值是数组

'name|1': array

从属性值 array 中随机选取 1 个元素,作为最终值。

'name|+1': array

从属性值 array 中顺序选取 1 个元素,作为最终值。

'name|min-max': array

通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max。

'name|count': array

通过重复属性值 array 生成一个新数组,重复次数为 count。

前后端分离开发的时候,前端和后端是并行开发的,前端往往刚开始不能拿到测试的数据,都需要自己写测试数据。 编写测试数据还是比较浪费时间的,虽然简单,但是都是体力活。

那么是否有工具可以帮我们生成数据,生成API接口,让前端能够爽爽的开发。

Mock.js 正是这样一款类库,可以帮我们模拟生成一堆数据。

引入引入mock.js的包,然后生成数据。

生成的数据(数据的个数,1-10个中随机个数)

配置模拟数据

发送Ajax请求:

返回数据:

注意:

属性名 和 生成规则 之间用 | 分隔。生成规则 是可选的。生成规则 有 7 种格式:

生成规则 的 含义 需要依赖 属性值 才能确定。

属性值 中可以含有 @占位符。

属性值 还指定了最终值的初始值和类型。

参数的含义和默认值 如下所示:

使用示例 如下所示:

返回一个随机的自然数(大于等于 0 的整数)。

参数的含义和默认值 如下所示:

返回一个随机的整数。

参数的含义和默认值 如下所示:

参数的含义和默认值 如下所示:

返回一个随机的浮点数。

返回一个随机字符。

参数的含义和默认值 如下所示:

使用示例 如下所示:

返回一个随机字符串。

参数的含义和默认值 如下所示:

参数的含义和默认值 如下所示:

参数的含义和默认值 如下所示:

返回一个整型数组。

参数的含义和默认值 如下所示:

参数的含义和默认值 如下所示:

参数的含义和默认值 如下所示:

返回一个随机的日期字符串。

参数的含义和默认值 如下所示:

返回一个随机的时间字符串。

参数的含义和默认值 如下所示:

返回一个随机的日期和时间字符串。

参数的含义和默认值 如下所示:

返回当前的日期和时间字符串。

参数的含义和默认值 如下所示:

http://mockjs.com/