Echarts+vue电商平台数据可视化——背景实现条记

项目最终效果涉及到6个图表, 5种图表类型,它们分别是折线图,柱状图,地图,散点图,饼图
每个图表的数据都是从后端推送到前端来的, 不外在项目标初期,我们会先使用 ajax 由前端自动获取数据, 后续会使用 WebSocket 进行改造.
整个项目标架构是基于 Vue 的, 所以我们需要创建 Vue 项目, 然后在 Vue 项目中开发各个图表组件.
   

  

  

  

  

  代码实现(欣赏器的网络network中可以看到发送的请求，点击请求，可以看到设置好的响应头）：

1. // 计算服务器消耗时长的中间件
2. module.exports = async (ctx, next) => {
3.   // 记录开始事件
4.   const start = Date.now();
5.   // 让内层中间件得到执行
6.   await next();
7.   // 记录结束的时间
8.   const end = Date.now();
9.   // 设置响应头 X-Response-Time
10.   const duration = end - start;
11.   // ctx.set 设置响应头
12.   ctx.set("X-Response-Time", duration + "ms");
13. };

复制代码

访问文件中对应路径得到打印的效果，对打印出来的url进行处理，使得在网址中输入对应路径时，可以或许访问到对应的文件数据

   

1. // 设置响应头的中间件
2. module.exports = async (ctx, next) => {
3.   const contentType = "application/json; charset=utf-8";
4.   ctx.set("Access-Control-Allow-Methods", "OPTIONS,GET,PUT,POST,DELETE");
5.   ctx.set("Access-Control-Allow-Origin", "*");
6.   ctx.set("Content-Type", contentType);
7.   ctx.response.body = '{"success": true}';
8.   await next();
9. };

复制代码

  

  代码实现，留意看一下解释，有解释为什么使用promise，而不是直接return返回的原因： 

1. //处理业务逻辑的中间件,读取某个json文件的的数据
2. const path = require("path");
3. const fileUtils = require("../utils/file_utils");
4. module.exports = async (ctx, next) => {
5.   // 只有三层中间件,next()这个函数写上还是不写上都可以,但是最好写上,如果不写上,调用的那一层中间件就不确定,特殊情况的话
6.   // 根据url
7.   const url = ctx.request.url; // /api/seller   ../data/seller.json
8.   let filePath = url.replace("/api", ""); // /seller
9.   filePath = "../data" + filePath + ".json"; // ../data/seller.json
10.   filePath = path.join(__dirname, filePath);
11.   try {
12.     const ret = await fileUtils.getFileJsonData(filePath);
13.     ctx.response.body = ret;
14.   } catch (error) {
15.     const errorMsg = {
16.       message: "读取文件内容失败,文件资源不存在",
17.       status: 404,
18.     };
19.     ctx.response.body = JSON.stringify(errorMsg);
20.   }
21.   console.log(filePath); // 得到访问的数据
22.   await next();
23. };

复制代码

 读取文件的方法（utils/file_utils.js)：

1. // 读取文件的工具方法
2. const fs = require("fs");
3. module.exports.getFileJsonData = (filePath) => {
4.   // 根据文件的路径,读取文件的内容
5.   return new Promise((resolve, reject) => {
6.     fs.readFile(filePath, "utf-8", (error, data) => {
7.       if (error) {
8.         // 读取文件失败
9.         reject(error);
10.       } else {
11.         // 读取文件成功
12.         // return data; // 这里的return返回的是这个函数的调用者,而不是getFileJsonData这个函数的调用者
13.         // 读取文件是一个异步任务,对于一个异步任务,我们也不能通过return的方式来将数据返回给调用者
14.         resolve(data);
15.       }
16.     });
17.   });
18. };

复制代码

  

  



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。