此项目后台采用 Koa2 进行开发配置,相关配置整理如下。

1. Koa2 概述

Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。

关于 Express、Koa、Koa2 的区别见下表:

框架 作用 异步处理
Express web 框架 回调函数
Koa web 框架 Generator + yield
Koa2 web 框架 async / await

async / await 在 node 7.6 版本后才支持使用,因此 Koa2 环境要求 Node v7.6.0 及以上。

2. Koa2 快速上手


> 基本步骤

  1. 检查 Node 环境( > 7.6 )
	node -v
  1. 安装 Koa
	npm init -y
	npm install koa
  1. 创建并编写 app.js 文件
	a. 创建 Koa 对象
	b. 编写响应函数(中间件)
	c. 监听端口
  1. 启动服务器
	node app.js

具体而言,实现代码如下:

const Koa = require('koa')

// 1. 创建 koa 对象
const app = new Koa()

// 2. 编写响应函数(中间件)
app.use((ctx, next) => {
  console.log(ctx.request.url);
  ctx.response.body = 'hello world'
})

// 3. 绑定端口号 3000
app.listen(3000)

> 中间件的特点

Koa 对象通过 use 的方式加入中间件,一个中间件就是一个函数,中间件的执行顺序符合洋葱模型。

app.use(async(ctx, next) => {
  // 刚进入中间件要做的事情
  await next();
  // 内层所有中间件结束之后想做的事情
})

如上代码即为一个中间件,其中 ctx 表示上下文,主要指 web 容器,可以通过 ctx.requestctx.response 分别获取请求对象和响应对象。而该代码中的 next 指代下一个中间件。内层中间件能否执行取决于外层中间件的 next 函数是否调用。

此外,需注意调用 next 函数得到的是 Promise 对象。

3. 后台项目


> 后台项目的目标

  1. 计算服务器处理请求的总耗时
  2. 在响应头中增加响应内容的 mime 类型
  3. 根据 URL 读取指定目录下的文件内容

> 后台项目的实现步骤

  1. 项目准备
  2. 总耗时中间件
  3. 响应头中间件
  4. 业务逻辑中间件
  5. 允许跨域

> 项目的准备

  1. 安装包
	npm init -y
	npm install koa
  1. 创建文件和目录结构
    在这里插入图片描述

相关文件目录说明:

文件(夹) 说明
app.js 服务器入口文件
data 存放前端图表所需的 json 文件数据
middleware 存放中间件(业务逻辑、总耗时、设置响应头)
utils 工具方法(读取文件的工具方法)

4. 总耗时中间件


此中间件位于第一层,计算中间时间为开始和结束时相减,通过响应头方式设置给前端浏览器。

> koa_resonse_dutation.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 设置响应头
  ctx.set('X-Response-Time', duration + 'ms')
}

5. 响应头中间件


> koa_response_header.js

// 设置响应头的中间件
module.exports = async (ctx, next) => {
  const contentType = 'application/json; charset=utf-8'
  ctx.set('Content-Type', contentType)
  await next()
}

在这里插入图片描述

6. 业务逻辑中间件


此中间件专门用于读取文件的内容。因为我们所要获取的是 json 文件,因此需要获取请求路径,拼接文件路径,才可正确读取文件内容。最后,将读取的文件内容设置到响应体中即可。

> koa_response_data.js

// 处理业务逻辑的中间件:读取某个 json 文件数据,响应给前端浏览器
const path = require('path')
const fileUtils = require('../utils/file_utils.js')

module.exports = async (ctx, next) => {
  // 根据 url 读取文件
  const url = ctx.request.url
  // /api.seller    ../data/seller.json
  let filePath = url.replace('/api', '')
  filePath = '../data' + filePath + '.json'
  filePath = path.join(__dirname, filePath)
  // 利用工具方法获取指定路径的数据
  const ret = fileUtils.getFileJsonData(filePath)
  ctx.response.body = ret
  console.log(filePath);
  await next()
}

> 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)
      }
    })
  })
}

> 接口总览

目标 接口
商家销量 /api/seller
预算开销 /api/budget
库存信息 /api/stock
销量趋势 /api/trend
销量排行 /api/rank
商家分布 /api/map
热销商品 /api/hotproduct

7. 允许跨域


通过 Ajax 访问服务器时,应遵循同源策略(同协议、同域名、同端口)。为了使跨域请求可以实现,需要对响应头进行设置。

> 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()
}
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐