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.打包收工

后记

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