mockjs使用方法

• 在我们的实际开发过程中，经常性的会前端进程比较快，导致调试页面时没有数据支持，需要等待后台接口，其实我们可以通过使用mockjs来模拟自己需要的数据，然后让后台配合我们模拟的字段来写接口，这样前端就可以自行模拟逻辑了，那么mockjs要如何使用呢?这里以在vue中使用为例

首先是安装

npm install mockjs --save / yarn add mockjs --save

使用mockjs模拟数据并开发接口

//新建一个mockApi.js模块 来保存我们模拟的接口
var Mock = require('mockjs') // 导入mockjs
// 模拟一个列表数据
var arr = Mock.mock({
	"list|4-10": [  // 生成一个 length是 4~10之间的数组
		{
			"name": "@first", // @first用来生成名字
			"age|12-50": 12, // 生成一个 12-50之间的整数
			"id|+1": 1 // 生成的id每次递增1
		}
	]
})

// 获取列表数据的接口 第一个参数表示自定义的接口地址 第二个参数表示自定义的请求方法 
// 第三个参数是回调函数，定义返回的数据
Mock.mock('http://www.aaa.com', 'get', () => {
    return arr
})

导入定义好的mockApi模块

 //在main.js中导入定义好的mockApi模块
 require('mockApi文件的地址')

使用定义好的接口

//在任意vue文件中 当然axios如果自己已经定义 请使用自己的 这里只做演示用
import axios from 'axios'
export default {
	created() {
		axios.get('http://www.aaa.com').then(res => {
			// 这里的res就是mock模拟的接口返回的数据
		})
	}
}

mock模拟数据的语法

• 1.定义数据

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

// 属性名 key
// 生成规则 rule
// 属性值 value

1.‘name|min-max’: string 生成一个重复string min~max次的字符串
例子：‘name|2-3’:‘mu’, 重复wang这个字符串 2-5 次

2.‘name|count’: string 生成一个重复string count次的字符串
例子：‘name|3’:‘tou’, 重复tou这个字符串 3 次，打印出来就是’toutoutou’。

3.‘name|min-max’: number 生成一个大于等于 min、小于等于 max的整数，属性值 number 只是用来确定类型。
例子：‘age|20-30’:25, 生成一个大于等于 20、小于等于 30 的整数，属性值 25 只是用来确定类型

4.‘name|+1’: number 属性值自动加 1，初始值为 number
例子：‘big|+1’:0, 属性值自动加 1，初始值为 0，以后每次请求在前面的基础上+1

5.‘name|min-max.dmin-dmax’: number 生成一个浮点数，整数部分大于等于 min\、小于等于 max
，小数部分保留 dmin到 dmax 位。
例子：‘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.aaa’,‘port’:‘12345’,‘node’:‘selector’}

7-1.‘name|count’: object 从属性值 object中随机选取 count个属性。
例子：‘life1|2’:obj, 从属性值 obj 中随机选取 2 个属性

7-2.‘name|min-max’: object 从属性值 object 中随机选取 min 到 max 个属性
例子：‘life1|1-2’:obj, 从属性值 obj 中随机选取 1 到 2 个属性。

8.属性值是数组：var arr=[‘mu’,‘tou’,‘ren’]

8-1.‘name|1’: array 从属性值 array中随机选取 1 个元素，作为最终值
例子：‘friend1|1’:arr, 从数组 arr 中随机选取 1 个元素，作为最终值。

8-2.‘name|+1’: array 从属性值 array中顺序选取 1 个元素，作为最终值。
例子：‘friend2|+1’:arr, 从属性值 arr 中顺序选取 1 个元素，作为最终值，第一次就是’mu’,第二次请求就是’tou’

8-3.‘name|count’: array 通过重复属性值 array生成一个新数组，重复次数为 count。
例子：‘friend3|2’:arr, 重复arr这个数字2次作为这个属性值，得到数据应该是[‘mu’,‘tou’,‘ren’,‘mu’,‘tou’,‘ren’]

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