Apeach Echarts|后台项目的开发初学

后台项目的开发

1.后台项目的目标

利用KOA2 的知识来进行后台项目的开发，后台项目需要达到这以下几个目标:

1. 计算服务器处理请求的总耗时
   计算出服务器对于这个请求它的所有中间件总耗时时长究竟是，我们需要计算一下
2. 在响应头上加上响应内容的 mime 类型
   加入mime类型, 可以让浏览器更好的来处理由服务器返回的数据.
   如果响应给前端浏览器是 json 格式的数据，这时候就需要在咱们的响应头当中增加 Content-Type 它的值就是 application/json ， application/json 就是 json 数据类型的 mime 类型
3. 根据URL读取指定目录下的文件内容
   为了简化后台服务器的代码，前端图表所要的数据, 并没有存在数据库当中，而是将存在文件当中的，这种操作只是为了简化咱们后台的代码. 所以咱们是需要去读取某一个目录下面的文件内容的。

每一个目标就是一个中间件需要实现的功能, 所以后台项目中需要有三个中间件

2.后台项目的开发步骤

创建一个新的文件夹，叫做koa_server，这个文件夹就是后台项目的文件夹

1.项目准备

• 安装包
  npm init -y
npm install koa
• 创建文件和目录结构
  
  app.js 是后台服务器的入口文件
  data 目录是用来存放所有模块的 json 文件数据
  middleware 是用来存放所有的中间件代码
  koa_response_data.js 是业务逻辑中间件
  koa_response_duration.js 是计算服务器处理时长的中间件
  koa_response_header.js 是用来专门设置响应头的中间件

接着将各个模块的 json 数据文件复制到 data 的目录之下, 接着在 app.js 文件中写上代码如下:

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

2.总耗时中间件

• ①第1层中间件
  总耗时中间件的功能就是计算出服务器所有中间件的总耗时，应该位于第一层，因为第一层的中间件是最先处理请求的中间件，同时也是最后处理请求的中间件。
• ②计算执行时间
  第一次进入中间件的时候，就记录一个开始的时间
  当其他所有中间件都执行之后，在记录下结束时间以后
  将两者相减就得出总耗时
• ③设置响应头
  将计算出来的结果，设置到响应头的X-Response-Time中，单位是毫秒ms

具体代码如下：
app.js:

// 绑定第一层中间件
const respDurationMiddleware =
	require('./middleware/koa_response_duration') 
app.use(respDurationMiddleware)

koa_response_duration.js

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

3.响应头中间件

• ①第2层中间件
• ②获取mime类型
  由于响应给前端浏览器当中的数据都是json格式的字符串，所以mime类型可以简化处理写成application/json。
• ③设置响应头
  响应头的key是Content-Type，它的值是application/json，加上charset=utf-8告诉浏览器，响应的数据类型是application/json，同时它的编码是utf-8.

app.js

// 绑定第二层中间件
const respHeaderMiddleware = require('./middleware/koa_response_header')
app.use(respHeaderMiddleware)

koa_response_header.js

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

4.业务逻辑中间件

• ①第3层中间件
  这个第3层中间件没有特定的要求
• ②读取文件内容

  • 获取URL请求路径

    const url = ctx.request.url
    

  • 根据URL请求路径，拼接出文件的绝对路径

    let filePath = url.replace('/api','')
    filePath = '../data' + filePath + '.json'
    filePath = path.join(__dirname,filePath)
    

    这个filePath就是需要读取文件的绝对路径

  • 读取这个文件的内容
    使用fs模板中的readFile方法进行实现

• ③设置响应体
  ctx.response.body

具体代码：
app.js

// 绑定第三层中间件
const respDataMiddleware = require('./middleware/koa_response_data')
app.use(respDataMiddleware)

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  ../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.reponse.body = ret
	}catch(error){
     
		const errorMsg = {
     
			message: '读取文件内容失败，文件资源不存在',
			status:404
		}
		ctx.response.body = JSON.stringify(errorMsg)
	}
	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)
			}

		})
	})

}

5.允许跨域

• 设置响应头

app.use(async (ctx,next) =>{
     
	ctx.set("Access-Control-Allow-Origin","*")
	ctx.set("Access-Control-Allow-Methods","OPTIONS, GET, PUT, POST, DELETE")
	await next();
})