Echarts+vue电商平台数据可视化——后台实现笔记

项目最终效果涉及到6个图表, 5种图表类型,它们分别是折线图,柱状图,地图,散点图,饼图

每个图表的数据都是从后端推送到前端来的, 不过在项目的初期,我们会先使用 ajax 由前端主动获取数据, 后续会使用 WebSocket 进行改造.

整个项目的架构是基于 Vue 的, 所以我们需要创建 Vue 项目, 然后在 Vue 项目中开发各个图表组件.

代码实现(浏览器的网络network中可以看到发送的请求,点击请求,可以看到配置好的响应头):

javascript 复制代码
// 计算服务器消耗时长的中间件
module.exports = async (ctx, next) => {
  // 记录开始事件
  const start = Date.now();
  // 让内层中间件得到执行
  await next();
  // 记录结束的时间
  const end = Date.now();
  // 设置响应头 X-Response-Time
  const duration = end - start;
  // ctx.set 设置响应头
  ctx.set("X-Response-Time", duration + "ms");
};

访问文件中对应路径得到打印的结果,对打印出来的url进行处理,使得在网址中输入对应路径时,能够访问到对应的文件数据

javascript 复制代码
// 设置响应头的中间件
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返回的原因:

javascript 复制代码
//处理业务逻辑的中间件,读取某个json文件的的数据
const path = require("path");
const fileUtils = require("../utils/file_utils");
module.exports = async (ctx, next) => {
  // 只有三层中间件,next()这个函数写上还是不写上都可以,但是最好写上,如果不写上,调用的那一层中间件就不确定,特殊情况的话
  // 根据url
  const url = ctx.request.url; // /api/seller   ../data/seller.json
  let filePath = url.replace("/api", ""); // /seller
  filePath = "../data" + filePath + ".json"; // ../data/seller.json
  filePath = 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):

javascript 复制代码
// 读取文件的工具方法
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);
      }
    });
  });
};
相关推荐
HED41 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
清风细雨_林木木2 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
局外人LZ2 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
宝拉不想努力了3 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
图表制作解说(目标1000个图表)3 小时前
ECharts散点图-散点图15,附视频讲解与代码下载
echarts·统计分析·数据可视化·散点图·大屏可视化
神仙别闹4 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
云天徽上5 小时前
【数据可视化-28】2017-2025 年每月产品零售价数据可视化分析
机器学习·信息可视化·数据挖掘·数据分析·零售
沉迷...5 小时前
手动实现legend 与 echarts图交互 通过js事件实现图标某项的高亮 显示与隐藏
前端·javascript·echarts
HuaHua的世界6 小时前
说说 Vue 中 CSS scoped 的原理?
css·vue.js
H5开发新纪元7 小时前
Vue 项目中 Loading 状态管理及页面切换 Bug 分析
前端·vue.js