高校网站建设目的,县城做信息网站,做网站和做app哪个容易,好的设计作品网站文章目录背景需求分析实现过程1.爬取原有项目数据2.将数据引入项目3.打包收工后记背景
接到公司一个【离谱】的需求#xff0c;要求把已有的项目做一个演示版本#xff08;静态文件版本#xff09;#xff1b;本人觉得前端、后端搞个容器包#xff0c;一个演示版本不就有…
文章目录背景需求分析实现过程1.爬取原有项目数据2.将数据引入项目3.打包收工后记背景
接到公司一个【离谱】的需求要求把已有的项目做一个演示版本静态文件版本本人觉得前端、后端搞个容器包一个演示版本不就有了吗,奈何一大堆理由什么太复杂了对演示人员不友好什么操作关联硬件容易出问题所以被迫开搞。前端开发中也常会用到数据mock常用的 mockjs简单易用可以快速生成mock数据文档也比较齐全有很好的示例代码。
需求分析
“静态交互展示”本质上就是将数据静态化同前端项目一起【build】后 一起打成静态文件通过静态文件加载实现预览。 正常流程下使用mockjs拦截XHR请求并返回 mock数据即可问题在于这是我临时接手的项目并且接口文档并不规范数据结构混乱所以有没有一种方法我不用管文档把数据填满呢 我能想到的方法就是把原项目的数据都拔下来作为基础数据再适当优化。
实现过程
1.爬取原有项目数据
通过node服务代理已有项目请求,将拦截的路径、参数、数据等信息记录下来。
使用【http-proxy-middleware】代理拦截请求将拦截的 数据记录为如下格式
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);
在启动上面服务后按正常流程 点点点得到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.打包收工
后记
该国一次后后面越到相同的就可以通过点点点收工
