mock造数据
前端开发，需要和后台联调；很多时候，前端开发并不需要等后台完全写好接口在去联调，自己可以写死数据，渲染数据，加样式。后台人员有时会很忙，他没有时间写好返回所有的数据等等，特别是新开一个项目，从零开始的那种，前端要是等后台写好，开发效率就不高了。所以自己造数据很重要。有一段时间，我每天早上来就催后台给我开服务器，应该不开的话，代码不好写，效率不快，会影响每天的任务的，影响了的话就要苦逼的加班。
我做过一个项目，进件新增编辑的，表单字段，一个表单页面有20~30来个字段，填写完最快都要半首歌的时间，页面刷新又得重新填，又得花那个时间。后来同事小强建议写死一个json数据自动填写，填都不用填了。其实省下不少时间。突然间我就意识到写假数据对于一个前端来说，挺重要，可以节省时间，多出来的时间，可以休息，测试项目的功能或者学习新东西。
在上一家体育公司中，我写了一个体测数据的页面，一个页面很长，密密麻麻的全是体测的数据。记得当时页面的每一部分的数据，我都是用同一个数据，其实这样子不好，因为页面需要的最终数据（比如文字的长度，是否符合该字段正则表达式等等）和写的假数据有时很大出入，会影响页面效果的。如果有问题，你就要重新写样式，加班加点。之前写过一个大屏直播的页面，用户的那个名称，一般人都是2到3个汉字，所以我自然没有考虑到4个汉字的名称，结果悲剧了，真有4个字的人名，然后那一块样式排版乱掉，我又得改。这种场景就需要一个js工具帮我随机生成2到4字的名字。
上图为2019年的工作环境
研究了一个专门造假数据的库，叫mock。其实这个东西我在2018年的年初就已经知道了，有一次面试，面试官问过这个问题（结果是流泪的），后来只不过看了2天的官方文档，就让它在一边吃灰，因为在上一家体育公司的项目中应用场景不多。最近项目闲下来，我花了1天的时间（其实就是半天）写了一个工具类js，方便自己以后在新开项目时或者特别需要假数据时使用。
mock有两个好处：1. 随机的生成假数据，每次页面刷新都不一样；2. 它可以拦截ajax请求，就是说当你定义在mock里面的接口路径和真实的后台接口路径一样时，前者就把后者拦截。
代码如下面所示哈：
import Mock from 'mockjs';
let Random = Mock.Random;
//枚举的工具对象
//其实就是`map`方法遍历一个数组，生成一个数组和一个`code`数组，`code`和新数组的序号是一致的，所以就可以轻易的输入`code`拿到想要的值
class EsEnum {
constructor(arr) {
let typeArr = [];
if (!Array.isArray(arr)){
throw 'arr is not an array!';
return;
}
arr.map(element => {
if(!element.code || !element.name) {
return;
}
// 保存code值组成的数组，方便A.getName(name)类型的调用
typeArr.push(element.code);
// 根据code生成不同属性值，以便A.B.name类型的调用
this[element.code] = element;
});
// 保存源数组
this.arr = arr;
this.typeArr = typeArr;
}
// 根据code得到对象
valueOf(code) {
return this.arr[this.typeArr.indexOf(code)];
}
// 根据code获取name值
getNameByCode(code){
let prop = this.valueOf(code);
if (!prop){
throw 'No enum constant' + code;
return;
}
return prop.name;
}
// 返回源数组
getValues() {
return this.arr;
}
}
// 配置拦截 ajax 的请求时的行为，支持的配置项目有 timeout。
Mock.setup({
timeout: '200 - 400'
})
//接口api
/**
* * @description: 通用工具类
* * @author: StephenWu5
* * @paras 接口链接，接口类型，返回数据结构，返回数据的长度
* * @date: 2019-12-3 15:38:27
*/
export const createApiByMock = function(apiUrl,apiType,paraSet) {
let data = []; //等下要返回的数据
let returnData ={};
let dataLength = paraSet.dataLength || 10;
for (let i = 0; i < dataLength; i++) {
let images = [1,2,3].map(x=>Random.image('200x100', Random.color(), Random.word(2,6))); //随机成长3个图片信息 尺寸 颜色 和随机字母的数组
let paraSetNew = JSON.parse(JSON.stringify(paraSet))
let dataTypeEnum = new EsEnum([
//==============================================配置的开始==========================================================
{code: '0', i}, //id 唯一性
{code: '1', name: Random.cname()}, //中文姓名 cfirst 模拟姓氏 clast 模拟名字 name 英文名字
{code: '2', name: Random.cword(8,20)}, //标题 8和20是长度
{code: '3', name: Random.integer(100,5000)}, // 100到5000的随机整数 natural 返回随机的自然数
{code: '4', name: images.slice(0,Random.integer(1,3))},//截取随机一到三个图片
{code: '5', name: Random.image('200x100', '#4A7BF7', 'picture')}, //模拟图片 宽高不指定则随机
{code: '6', name: Random.date()}, //日期 yyyy-MM-dd yyyy-mm-dd是指定格式
{code: '7', name: Random.time()}, //时间
{code: '8', name: Random.province()}, //省
{code: '9', name: Random.city()}, //市 Mock.mock('@city(true)') 加参数true会有奇效哈
{code: '10', name: Random.county()}, //区 Mock.mock('@county(true)')
{code: '11', name: Mock.mock('@EMAIL()')}, //邮箱
{code: '12', name: Mock.mock(/^1[0-9]{10}$/)}, //手机(座机) 这里可以正则
{code: '13', name: Mock.mock('13531544954')}, //身份证
Mock.mock({ code: '14', "name|1":['精品语文班','精品作业A班','英语班','语文班']}), //身份证包括一切的枚举，使用率最高
{code: '21', name: Random.csentence(5, 10)}, //生成一条随机的中文句子
{code: '22', name: Random.cparagraph(0, 10)}, //随机生成0到10段句子
{code: '23', name: Random.url()}, //url
{code: '24', name: Random.ip()}, //ip
//==============================================配置的结束==========================================================
])
for(let key in paraSetNew){
if(!key){
return;
}
if(key === 'dataLength'){
continue;
}
paraSetNew[''+key] = dataTypeEnum[""+paraSet[""+key]]['name']
}
delete paraSetNew.dataLength; //就看你想不想留dataLength;
data.push(
//{allData: (dataTypeEnum)}, //这里就是精华所在哈
paraSetNew
)
}
//利用assign添加默认值 status message
returnData = Object.assign({
status: 200,
message: 'success',
length: data.length,
}, {data});
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock(apiUrl,apiType, returnData); // 获取验证码
}
使用就是新建一个js文件，把它导入到项目中，使用如下：
这一步只是在项目注册这个api，还要写一个调用该api的方法才可以。真有一个下午，就是今天，我在项目中引入这个工具类，也注册了，看不到效果，我以为是这两个地方写错了，找来找去，原来是缺了调用该api的方法（就是最后一步下方的代码）。半小时就这样折腾没了。西湖啊，我的泪。
import {createApiByMock} from './mock';
//使用实例 dataLength 是返回数组的长度哈
let paraSet = {
name: 1,
age: 3,
dataLength: 10
}
createApiByMock('http://localhost:8080/getMockData','get',paraSet);
最后一步，调用该api。
其实这个代码和mock无关，只不过我的接口名和项目的不一样，所以就写成这样子。
//得到mock数据，
export const getMockData = (data) => Request.get(`/getMockData`, data, createHeader());
这样子就可以快速拿到自己想要的数据，简单。需要特别注意的是，和mock相关的代码，特别是第2部分的代码，生产，测试环境不能提交，要是不小心提交了，领导会很生气的，他会让你不能下班或者不上班，所以还需要在项目中加上环境判断的代码，决定是否使用注册api那部分的代码哈。
写到这里，我突然感觉，那些vue，jquery，react其实就是和我这个js是类似的啊，只不过前者就是很多技术大佬写出来，维护，功能强大，可以做很多事情，文件体积大，经过了单元测试，使用的话不会出什么问题；而我这个体积小，功能单一，只能做一件事情，比较辣鸡。前者是优秀电视剧《甄嬛传》的话，后者就是抖音短视频。前者后者只不过都是前端工程师开发的工具，让我们快速的写页面，和那些ppt模版，编辑器vscode,vim没有什么两样都属于工具来的，类似父亲的泥水刀，农民耕田用的水牛，厨师的菜刀。
以后有空闲的话，再搞axios，utils，vue组件echart等几个常用的工具类出来吧。方便你我她他它使用，顺便假装大佬哈哈哈哈哈哈哈。
最后，欢迎关注我的公众号。
