后台项目初步(电商平台数据可视化实时监控系统)

Posted 2021-10-15 So istes immer

目录

1.后台项目的目标

①计算服务器处理请求的总耗时

②在响应头加上响应内容的mime类型

③根据URL读取指定目录下的文件内容

用三个中间件来实现

2.项目准备

①安装包

npm init -y

npm install koa

②创建目录和文件结构

app.js

data/        为了方便，数据不从数据库获取，而是以文件的形式存放在这个文件夹中

数据下载地址https://download.csdn.net/download/YINZHE__/24723387

middleware/

        koa_response_data.js              // 处理业务逻辑的中间件，读取某个json文件的数据

        koa_response_duration.js        // 计算服务器消耗时长的中间件

        koa_response_header.js          // 设置响应头的中间件

utils/

        file_utils.js                                //读取文件的工具方法

3.服务器入口文件

app.js 

// 服务器的入口文件
// 1.创建kos的实例对象
const Koa = require('koa')
const app = new Koa()
// 2.绑定中间件
// 绑定第一层中间件
const respDurationMiddleware = require('./middleware/koa_response_duration')
app.use(respDurationMiddleware)
// 绑定第二层中间件
const respHeaderMiddleware = require('./middleware/koa_response_Header')
app.use(respHeaderMiddleware)
// 绑定第三层中间件
const respDataMiddleware = require('./middleware/koa_response_data')
app.use(respDataMiddleware)
// 3.绑定端口号 8888
app.listen(8888)

4.总耗时中间件

必须是第一层中间件

因为根据洋葱模型，第一层中间件是最先接触的中间件，也是最后接触的中间件

这样才能计算总耗时

middleware/koa_response_duration.js

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

5.响应头中间件

在这个文件中还要处理一下跨域问题

同源策略：同协议/同域名/同端口

当前页面的地址和Ajax获取数据的地址要通同源

 middleware/koa_response_header.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()
}

6.业务逻辑中间件 

接口总览

①商家销售 /api/seller

②预算开销 /api/budget

③库存信息  /api/stock

④销量趋势  /api/trend

⑤销量排行  /api/rank

⑥商家分布  /api/map

⑦热销商品  /api/hotproduct

middleware/koa_response_data.js

// 处理业务逻辑的中间件，读取某个json文件的数据
const path = require('path')
const fileUtils = require('../utils/file_utils')
module.exports = async (ctx, next) => {
  // 根据url，拼接文件路径
  const url = ctx.request.url                // /api/seller
  let filepath = url.replace('/api','')
  filepath = '../data' + filepath + '.json'   // ../data/seller.json
  filepath = path.join(__dirname, filepath)   //本文件的绝对路径和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)
  }
  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 {
        resolve(data)
      }
    })
  })
}