前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >echarts的学习(八)项目服务器端的准备

echarts的学习(八)项目服务器端的准备

作者头像
一写代码就开心
发布2021-01-05 12:31:13
3840
发布2021-01-05 12:31:13
举报
文章被收录于专栏:java和pythonjava和pythonjava和python

项目的准备

项目搭建

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总耗时中间件的开发

在这里插入图片描述
在这里插入图片描述
// 计算服务器消耗时长的中间件
//因为要导入这个中间件让其他的地方用,所以用exports导出
//参数  ctx  意思是上下文,next意思是中间件的入口
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')
}

响应头中间件

在这里插入图片描述
在这里插入图片描述
// 设置响应头的中间件
module.exports = async (ctx, next) => {
  const contentType = 'application/json; charset=utf-8';
  ctx.set('Content-Type', contentType);
  ctx.set("Access-Control-Allow-Origin", "*");
  ctx.set("Access-Control-Allow-Methods", "OPTIONS, GET, PUT, POST, DELETE");
  await next()
};

业务逻辑的中间件

// 处理业务逻辑的中间件,读取某个json文件的数据
const path = require('path');
const fileUtils = require('../utils/file_utils');
module.exports = async (ctx, next) => {
  // 根据url  也就是前端发过来的url
  const url = ctx.request.url; // /api/seller   ../data/seller.json
  let filePath = url.replace('/api', ''); //  /seller  将前端传过来的url进行处理
  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()
};

启动项目

node app.js

在这里插入图片描述
在这里插入图片描述

以上就是后端返回的数据

允许跨域

在这里插入图片描述
在这里插入图片描述

我们就可以在后端设置跨域请求

// 设置响应头的中间件
module.exports = async (ctx, next) => {
  const contentType = 'application/json; charset=utf-8';
  ctx.set('Content-Type', contentType);
  ctx.set("Access-Control-Allow-Origin", "*");
  ctx.set("Access-Control-Allow-Methods", "OPTIONS, GET, PUT, POST, DELETE");
  await next()
};
在这里插入图片描述
在这里插入图片描述

小结

这个项目就是搭建了一个服务端的项目,就是为了给前段返回json数据,其实我们可以使用django项目,springboot项目给前段返回json数据。

总之,后端只要给前段返回json数据就可以了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-01-02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 项目的准备
  • 项目搭建
    • 总耗时中间件的开发
      • 响应头中间件
        • 业务逻辑的中间件
          • 启动项目
            • 允许跨域
            • 小结
            相关产品与服务
            消息队列 TDMQ
            消息队列 TDMQ (Tencent Distributed Message Queue)是腾讯基于 Apache Pulsar 自研的一个云原生消息中间件系列,其中包含兼容Pulsar、RabbitMQ、RocketMQ 等协议的消息队列子产品,得益于其底层计算与存储分离的架构,TDMQ 具备良好的弹性伸缩以及故障恢复能力。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档