mockjs使用总结(随机数据、对象数组随机、后端逻辑模拟等)

mockjs使用总结（随机数据、对象数组随机、后端逻辑模拟等）

1、安装mockjs

npm install mockjs -D
//mockjs默认是无法拦截到fetch请求，如果项目使用的是fetch还需要安装mockjs-fetch
//注：如果封装了fetch 要保证fetch的调用不受到阻碍
npm install mockjs-fetch -D

2、mockjs使用，新建一个mock.js文件，在项目入口文件中导入mock.js文件即可

/*mock.js*/

import Mock from 'mockjs';
//拦截fetch请求时添加
import mockFetch from 'mockjs-fetch';
mockFetch(Mock);

3、语法规范，可查阅https://github.com/nuysoft/Mock/wiki/Getting-Started

4、最常用到的生成规则

’name|+step':value
'name|count': value
'name|min-max': value

一、value为String时
	1.'name|count':value
    	表示生成一个字符串，重复次数等于 count
	2.'name|min-max':value
    	表示生成一个字符串，重复次数大于等于 min，小于等于 max
	
二、value为Number时
	1.'name|+count':value
    	value值自动加count
	2.'name|min-max':value
    	表示生成一个大于等于 min、小于等于 max 的整数

三、value为Boolean时
	1.'name|count': value
		随机生成一个布尔值，值为 value 的概率是 1/count，
		值为 false 的概率是count-1/count。
	2。'name|min-max':value
		随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是max / (min + max)。
		
四、value为Object
	1.'name|count': value
		从对象中随机选取count个属性。
	2.'name|min-max': value
		从对象中随机选取 min 到 max 个属性。
		
五、value为Array
	1.'name|1': value
		从数组中随机选取1个元素
	2.'name|+1': value
		从数组中按顺序选取1个元素
	3.'name|min-max': value
		将数组重复min到max次后返回（注意：不是随机选取min-max个元素）
	4.'name|count': value
		将数组重复count次后返回（注意：不是随机选取count个元素）
		
六、value为function
	返回函数执行后return的结果

七、value为正则表达式
	随机生成符合正则表达式的字符串

5、实现从数组中选取多个不重复的元素构成新的数组

/*mock.js*/
const Random = Mock.Random
let arr = ['a','b','c','d','e']

Mock.mock('api/getNewArray'{
    code: 0,
    data: {
        list:Random.pick(arr, 2, 4),	//从arr中随机选取2-4个元素组成新的数组list
    }
})

//可以使用Mock.extend扩展自定义的随机占位符,方便多次调用
Mock.Random.extend({
    constellations: arr,
    //自定义占位符名字为newArr
    'newArr':function(date){
        return this.pick(this.constellations, 2, 4);
    }
})
Mock.mock('api/getNewArray'{
    code: 0,
    data: {
        list:'@newArr'	//从arr中随机选取2-4个元素组成新的数组list
    }
})


/*
	特别需要注意的是以下PersonList每一项中（参见下图）
	1.list1是全随机的，且不含重复的arr项
	2.list2是全部相同的，仅随机了一次，之后项都取这个值
	3.list3不相同但是却嵌套了对象，且会出现从arr选取相同值的组成数组的情况
	
	可以按照需要嵌套Mock.mock使用，用res保存内层的返回值，再对res进行修改后作为最终值返回。
*/
Mock.mock('api/getNewArray'{
    code: 0,
    data: {
        'PersonList|11': [{
             name: '@cname',
             'age|12-80': 12,
             list1: '@newArr',
             list2: Random.pick(arr,2,4)，
             'list3|2-4': [{
                 'item|1': arr
             }]
         }]
    }
})

随机结果如下图：

6、模拟后端接口数据处理逻辑，并返回数据

/*mock.js*/

//Mock.mock( rurl?, rtype?, template|function( options ))，使用方式可以查看文档
//延时200-600毫秒请求到数据
Mock.setup({
    timeout: '200-600'
})
//用户列表（由于这里采用临时变量存储，页面刷新后随机的数据会丢失，不嫌麻烦的话可以封装到sessionStorage中）
let PersonList = [];

//随机生成一组用户列表数据
Mock.mock('api/getPersonList','GET',function(options){
    let res = Mock.mock({
        code: 0,
        data: {
            'PersonList|10': [{
             	name: '@cname',
                'age|12-80': 12    
            }]
        }
    })
    //保存此次的随机数据并返回
    PersonList = res.data.PersonList;
    return res;
})

//该方法拦截一个POST创建请求，并返回新的用户列表
Mock.mock('api/createPerson','POST',function(options){
    //options为请求提交的数据
    let {name, age} = options;
    //添加一个新用户
    PersonList.push({
        name,
        age
    })
    //Mock.mock方法可以嵌套使用
    let res = Mock.mock({
        code: 0,
        data： {
        	PersonList
    	}
    })
    return res;
})