WEB静态交互展示【数据mock】

背景

接到公司一个【离谱】的需求，要求把已有的项目做一个演示版本（静态文件版本）；本人觉得前端、后端搞个容器包，一个演示版本不就有了吗,奈何一大堆理由，什么太复杂了对演示人员不友好，什么操作关联硬件容易出问题；所以被迫开搞。前端开发中也常会用到数据mock；常用的 mockjs（简单易用，可以快速生成mock数据，文档也比较齐全，有很好的示例代码）。

需求分析

“静态交互展示”，本质上就是将数据静态化同前端项目一起【build】后 一起打成静态文件，通过静态文件加载实现预览。
正常流程下使用mockjs拦截XHR请求并返回 mock数据即可；问题在于这是我临时接手的项目，并且接口文档并不规范（数据结构混乱）；所以有没有一种方法，我不用管文档把数据填满呢？
我能想到的方法就是，把原项目的数据都拔下来作为基础数据，再适当优化。

实现过程

1.爬取原有项目数据

通过node服务代理已有项目请求,将拦截的路径、参数、数据等信息记录下来。

1. 使用【http-proxy-middleware】代理拦截请求；
2. 将拦截的 数据记录为如下格式

data ={path:{POST:{"page:1,size:10": "JSONdata"},GET:....}
}

实现逻辑参考代码如下：

var express = require("express");
var path = require("path");
var proxy = require("http-proxy-middleware");
var fs = require("fs");const basePath = __dirname;// 截取的数据
const data = {//   "[path]": {//     "[method]": {//       "[queryString || bodyString ]": "dataJson",//     },//   },
};// 代理配置
const proxyOptions = {target: "http://192.168.1.xxx",changeOrigin: true,onProxyRes(proxyRes, req, res) {const queryString = JSON.stringify(req.query) || "";const bodyString = req._body || "";if (!data[req.path]) data[req.path] = {};if (!data[req.path][req.method]) data[req.path][req.method] = {};if (queryString || bodyString)data[req.path][req.method][queryString + bodyString] = "";proxyRes.on("data", (chunk) => {if (chunk && chunk !== "undefined") {//没有queryString  bodyString 可另作处理data[req.path][req.method][queryString + bodyString] +=chunk.toString();}});},
};const app = express();// /build 打好包的前端静态文件
app.use(express.static(path.join(basePath, "./build")));//post body 获取一般会 采用 【body-parser】处理 但是会破坏结构 导致proxy 有异常
app.use("/api", (req, res, next) => {req._body = ""req.on("data", (d) => {if (d) req._body += d.toString();});next();
});
// 拦截 的xhr 地址
app.use("/api", proxy(proxyOptions));app.listen(3000);function writeData() {fs.writeFile("data.json", JSON.stringify(data), () => {console.log("Data.json is synchronized");});
}// 一分钟同步存一下数据
setInterval(writeData, 1000 * 60);

3. 在启动上面服务后，按正常流程 点点点，得到data.json的数据文件

2.将数据引入项目

具体的响应返回根据需求再调整优化

import Mock from "mockjs";
import data from "data.json" assert { type: "json" };const { mock } = Mock;for (let rurl in data) {for (let rtype in data[rurl]) {mock(new RegExp(rurl), rtype, (options) => {let queryString = getQueryString(options);let bodyString = getBodyString(options);return JSON.parse(data[rurl][rtype][queryString + bodyString]);});}
}

3.打包收工

后记

该国一次后，后面越到相同的，就可以通过点点点收工