项目最终效果涉及到6个图表, 5种图表类型,它们分别是折线图,柱状图,地图,散点图,饼图
每个图表的数据都是从后端推送到前端来的, 不过在项目的初期,我们会先使用 ajax 由前端主动获取数据, 后续会使用 WebSocket 进行改造.
整个项目的架构是基于 Vue 的, 所以我们需要创建 Vue 项目, 然后在 Vue 项目中开发各个图表组件.
代码实现(浏览器的网络network中可以看到发送的请求，点击请求，可以看到配置好的响应头）：
// 计算服务器消耗时长的中间件
module.exports = async (ctx, next) => {// 记录开始事件const start = Date.now();// 让内层中间件得到执行await next();// 记录结束的时间const end = Date.now();// 设置响应头 X-Response-Timeconst duration = end - start;// ctx.set 设置响应头ctx.set("X-Response-Time", duration + "ms");
};
访问文件中对应路径得到打印的结果，对打印出来的url进行处理，使得在网址中输入对应路径时，能够访问到对应的文件数据
// 设置响应头的中间件
module.exports = async (ctx, next) => {const contentType = "application/json; charset=utf-8";ctx.set("Access-Control-Allow-Methods", "OPTIONS,GET,PUT,POST,DELETE");ctx.set("Access-Control-Allow-Origin", "*");ctx.set("Content-Type", contentType);ctx.response.body = '{"success": true}';await next();
};
代码实现，注意看一下注释，有解释为什么使用promise，而不是直接return返回的原因：
//处理业务逻辑的中间件,读取某个json文件的的数据
const path = require("path");
const fileUtils = require("../utils/file_utils");
module.exports = async (ctx, next) => {// 只有三层中间件,next()这个函数写上还是不写上都可以,但是最好写上,如果不写上,调用的那一层中间件就不确定,特殊情况的话// 根据urlconst url = ctx.request.url; // /api/seller ../data/seller.jsonlet filePath = url.replace("/api", ""); // /sellerfilePath = "../data" + filePath + ".json"; // ../data/seller.jsonfilePath = path.join(__dirname, filePath);try {const ret = await fileUtils.getFileJsonData(filePath);ctx.response.body = ret;} catch (error) {const errorMsg = {message: "读取文件内容失败,文件资源不存在",status: 404,};ctx.response.body = JSON.stringify(errorMsg);}console.log(filePath); // 得到访问的数据await next();
};
读取文件的方法（utils/file_utils.js)：
// 读取文件的工具方法
const fs = require("fs");
module.exports.getFileJsonData = (filePath) => {// 根据文件的路径,读取文件的内容return new Promise((resolve, reject) => {fs.readFile(filePath, "utf-8", (error, data) => {if (error) {// 读取文件失败reject(error);} else {// 读取文件成功// return data; // 这里的return返回的是这个函数的调用者,而不是getFileJsonData这个函数的调用者// 读取文件是一个异步任务,对于一个异步任务,我们也不能通过return的方式来将数据返回给调用者resolve(data);}});});
};
