前言：
前端写完静态页面以后后端接口数据还没有完成，前端需要自己手动调试，因为这时候就需要我们本地模拟一下假数据，以方便我们在后端联调的时候节省一下工作量
那模拟数据的方式有很多种，例如EasyMock、Hapi等在线平台模拟数据，但是这些在线平台模拟数据在我看来可能有两个缺陷：1.可能由于人数访问过多的原因导致平台经常宕机 2.数据其实等同于JSON字符串，这个JSON也是我们本地大量复制上去的，所以从本质上并没有减轻我们偷懒的习惯。
所以我们接下来介绍一下我是如何通过Mock.js是如何假数据的。
前置知识
- Mock.js
- Express
- fetch
因为安装过程较为简单，这里我就默认你已经会安装Mock.js,Express了
这里即使不会node相关知识也没关系，因为演示代码和JavaScript类似都比较简单通俗易懂。
后端代码
下面是主要代码：
const Mock = require("mockjs");
const express = require("express");
const app = express();
//根据传入的数量，生成num条模拟的数据列表
function generatorList(num) {
return Mock.mock({
[`list|${num}`]: [
{
//模拟(自增)id，作为唯一标识符
"id|+1": 1,
//@ctitle表示模拟随机中文字符，(15,25)表示字符串长度范围
title: `@ctitle(15,25)`,
//@naural模拟生成索引,(0,15)表示生成的数字大小
image: `@natural(0,15)`,
//from这个字段，模拟生成的中文字符3~7位
from: `@ctitle(3,7)`,
//data模拟日期格式
data: `@date('yyyy-MM-dd')`,
},
],
});
}
//允许请求的方式：
app.all("*", (req, res, next) => {
res.header("Access-Control-Allow-Origin", `*`);
res.header("Access-Control-Allow-Methods", `PUT,GET,POST,DELETE,OPTIONS`);
res.header("Access-Control-Allow-Headers", `X-Requested-With`);
res.header("Access-Control-Allow-Headers", `Content-Type`);
next();
});
//路由GET请求，返回数据
app.get("/data", (req, res) => {
//获取get请求的条数
const { num } = req.query;
//返回模拟好的数据
return res.send(generatorList(num));
});
//路由器POST请求返回数据
app.get("/postData",(req, res)=>{
//因为POST的使用和GET类似，详细请参考GET请求
})
//设置端口并且打印对应调用结果
app.listen(3040, () => {
console.log(`Open your browser to visit http://localhost:3040/data?num=xxx`);
});
程序跑起来的状态：
前端代码
(使用useEffect)前端请求的代码：
useEffect(() => {
const fetchData = async () => {
let url = `http://localhost:3040/data?num=20`
const response = await fetch(url);
const data = await response.json();
console.log("模拟请求的数据为20条：", data);
};
fetchData();
}, []);
总结
- 解决了
EasyMock平台经常宕机数据无法访问的缺陷。 - 节省了大量复制粘贴的工作，我只要通过本地设置num的值就可以获取我想要得到的数据条数
