前言
我们大前端怎么能够被后端掣肘？不可能。有了数据仿真，我们再也不用等待后端实现了，可以自己开心的测试。这里我推荐下Mock.js
正文
可能有小伙伴问，官网这么清楚，你还写篇博客，凑数么。
这里提供几个我写项目遇到的问题。
Array有缺陷
好吧。这个缺陷就是只有从属性值 array 中随机选取 1 个元素，作为最终值（'name|1': array）。你想取俩个，那就是重复两次。心好累有没有。
我不是很确定是不是我没发现。反正我是不知道。知道的小伙伴请告知。
/**
* 获取随机数
*
* @export
* @param {any} min
* @param {any} max
* @returns
*/
export function getRandomNumber(min, max) {
return parseInt(Math.random() * (max - min + 1) + min, 10);
}
/**
* 根据给定数组生成随机数组（打乱排序取值）
*
* @export
* @param {any} arr
* @param {any} count
* @returns
*/
export function getRandomArray(arr, count) {
const shuffled = arr.slice(0);
let i = arr.length;
count = count || getRandomNumber(1, i);
const min = i - count;
let temp, index;
while (i-- > min) {
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];
shuffled[i] = temp;
}
return shuffled.slice(min);
}
通过以上方法就可以机智的根据给定数组生成随机数组。原理简单：打乱排序取值。一看便知。
怎么仿真
我还能怎么仿真？用手啊啊。。。。
image.png
好吧，言归正传。一般而言都是这样子化模块
image.png
每个模块写自己的模块内的数据，然后暴露方法（相当于后端服务层方法）
//login.js
import { param2Obj } from 'utils';
const userMap = {
pzpzpz: {
role: ['admin'],
token: 'pz',
avatar: 'http://www.nymlc.com/assets/pz.jpg',
name: 'pz'
},
ln: {
role: ['guest'],
token: 'ln',
avatar: 'http://www.nymlc.com/assets/lc.jpg',
name: 'ln'
}
};
export default {
loginByUsername(data) {
const { username } = JSON.parse(data.body);
let res = {};
for (const key in userMap) {
if (username.indexOf(key) !== -1) {
res = userMap[key];
}
}
return res;
},
getUserInfo: config => {
const { token } = param2Obj(config.url);
if (userMap[token]) {
return userMap[token];
} else {
return userMap.pzpzpz;
}
}
};
不过这样子就有个问题，数据都是分散的。以我博客为例，我想做个按标签过滤文章。这时候发现文章数据里的本该存储标签外键和标签里的id对不上。很明显啊。
所以呢咱们可以这样子。想象下后端开发流程。后端呢每次会写一堆的SQL语句（都是insert）来造假数据。好吧，也是仿真啦。我们也这样子做。
要知道，后端数据都来源于数据库（这里假定只有一个），那我们也新建一个database.js来生成我们项目需要的所有数据。生成顺序当然是先生成外键表咯。数据格式使用json。
// database.js
import { getRandomArray } from 'utils';
import Mock from 'mockjs';
const coverMap = ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507457009232&di=6902e746b953a6ab67d8ea49c9915694&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1212%2F2239%2F2239-ntk36472.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507457009229&di=4fa2d5a9262925d99ea61c6edc010f57&imgtype=0&src=http%3A%2F%2Ff3.topit.me%2F3%2F9c%2Fbc%2F1133861393232bc9c3o.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508521724&di=f1f67331fb10b9f58671b6a6056c6a43&imgtype=jpg&er=1&src=http%3A%2F%2Fres.silver.org.cn%2FUploads%2FPicture%2F2017-07-04%2F595bb8ba38d6b.jpeg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507927008370&di=05e28eaaee801bcbb43f1212f636020c&imgtype=0&src=http%3A%2F%2Fwww.3dmgame.com%2Fuploads%2Fallimg%2F140110%2F153_140110160156_4.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507927008369&di=07d42b82018c597c92f20a32f54ffd66&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F2033%2Fntk-2033-4469.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507927008358&di=af02ad5053f0c3bdff832d2f0d78f7a0&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1212%2F2214%2F2214-ntk36035.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507927008356&di=838d3fab00002e89f731947f4bde01d7&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1207%2F1015%2Fntk123675.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507927008356&di=e009e6ee4acb68c79d6e5ab28f40e2ba&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1910%2Fntk-1910-28555.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507927008353&di=48ae779513b739164b4cd8b3797ba51c&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1459%2Fntk-1459-4782.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507457009222&di=55fbd0af6bf7735d378d5c6fe74456a1&imgtype=0&src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F130126%2F52%2F52-niutuku.com-1499.jpg'];
const articles = [];
const categorys = [];
const tags = [];
for (let i = 0; i < 10; i++) {
categorys.push(Mock.mock({
_id: '@increment',
name: '@name'
}));
}
for (let i = 0; i < 10; i++) {
tags.push(Mock.mock({
_id: '@increment',
name: '@name'
}));
}
for (let i = 0; i < 10; i++) {
articles.push(Mock.mock({
_id: '@increment',
title: '@ctitle',
title_color: '@color',
author: '@cname',
created_at: '@date("yyyy/MM/dd")',
updated_at: '@date("yyyy/MM/dd")',
'views|30-80': 40,
'praises|30-40': 36,
'comments|3-18': 6,
'cover|1': coverMap,
content: '@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph@cparagraph',
categorys: getRandomArray(categorys),
tags: getRandomArray(tags)
}));
}
export {
articles, categorys, tags
};
具体模块逻辑就可以随自己业务逻辑自由发挥。eg：article.js
import { articles } from './database';
// 根据标签获取文章
const getArticlesByTags = tags => {
const res = new Set();
articles.forEach(article => {
let i = 0;
tags.forEach(tag => {
if (article.tags.some(e => e._id === +tag)) {
i++;
}
});
if (i === tags.length) {
res.add(article);
}
});
return Array.from(res).sort((a, b) => a.updated_at > b.updated_at ? -1 : 1);
};
后记
发现我写文章后记没有一次是正经过。
网友评论