Koa实际应用

最新推荐文章于 2024-04-28 17:23:49 发布

Encounter∞

最新推荐文章于 2024-04-28 17:23:49 发布

阅读量556

点赞数

文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/qq_44482048/article/details/126264122

版权

一、后台项目的目标（这三个目录分别需要用三个中间件实现）

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

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

3.根据URL读取指定目录下的文件内容（这里为了简化代码，数据存储在一个个JSON文件中而没有存储在数据库中）

二、实现步骤

1.项目准备

1）安装包

	npm init  -y //快速生成package.json文件
	npm install koa  //在线下载最新版本的koa

2）创建文件和目录结构

app.js（入口文件）
data/(文件夹，准备一个个JSON数据)、
middleware/(文件夹，存放中间件代码，包括三个中间件）
- koa_response_data.js处理业务逻辑中间件
- koa_response_duration.js计算服务器总耗时中间件
- koa_response_header.js设置响应头的中间件
utils/
- file_utils.js帮助我们快速读取某个目录下的文件

2.总耗时中间件

第一层中间件
计算执行时间：：一进入时就开始记录开始时间，其他所有中间件执行完成后记录结束时间，将两者相减

设置响应头最后计算处来的时间需要通过响应头的方式设置给前端浏览器

X-Response-Time: 5ms

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

//koa_response_duration.js中

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

3.响应头中间件

第2层中间件
获取响应数据的mime类型（响应给前端的数据都是json格式的字符串，因此要把mime类型统一为application/json

设置响应头 Content-Type:application/json;charset=UTF-8

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

4.业务逻辑中间件

第3层中间件（是第2层还是第3层不一定，这里的第2层和第三层可以调换顺序）
读取文件内容（读取哪个文件取决于浏览器中请求的URL）

这里需要做的事情就是：获取请求的路径，根据请求的路径拼接文件路径，，然后读取该路径对应文件的内容
将文件内容设置到响应体中 ctx.response.body

5.允许跨域

实际是通过Ajax访问服务器

同源策略

同协议/同域名/同端口

相同不同在于当前页面的地址和Ajax获取数据的地址是否一样

//ajax中需要请求的地址
$.ajax({
    type: 'get',
  //当前界面的地址是http://127.0.0.1:5500/index.html
    url: 'http://127.0.0.1:8888/api/map',   //ajax请求的地址
    success: function (data) {
        console.log(data);
    }
})

浏览器中请求的地址

设置响应头

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

三、前端项目准备

1.vue-cli搭建项目

1）打开要创建项目所在文件夹的终端窗口，在全局环境中安装脚手架

npm install  @vue/cli  -g     //这个命令只需要在硬盘中安装一次

2）在要创建项目所在文件夹的终端窗口中，输入新建项目的命令

vue  create  vision

具体配置：

选择手动配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yWoiLSH5-1660105568598)(https://s2.loli.net/2022/08/10/8rMG7RIXotmLjQ2.png)]

勾选上Router，Vuex,CSS Pre-processors

是否选择历史模式的路由
选择Less作为CSS的预处理器
选择ESLint的配置（去除这个ESLint配置，可以将.eslintrc.js中的@vue/standard去除）
什么时候进行Lint提示
如何存放Babel，ESLint等配置文件
是否保存以上配置以便下次创建项目时使用选择no

3）运行提示的命令以编译这个项目

 cd  vision
 npm   run  serve

2.删除无关代码

1）将App.vue中的代码删除掉样式等，变为如下

<template>
  <div id="app">

  </div>
</template>

<style lang="less">

</style>

2）删除components/HelloWorld.vue这个文件

3）删除 views/About.vue 和 views/Home.vue 这两个文件

4）修改 router/index.js 中的代码,去除路由配置和 Home 组件导入的代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [

]
const router = new VueRouter({
  routes
})
export default router

3.静态资源的引入

将static文件夹复制在public文件夹下

4.项目的基本配置

1）在项目根目录下创建 vue.config.js 文件

2）在其中添加代码

// 使用vue-cli创建出来的vue工程, Webpack的配置是被隐藏起来了的
// 如果想覆盖Webpack中的默认配置,需要在项目的根路径下增加vue.config.js文件
module.exports = {
    devServer: {
        port: 8999, // 端口号的配置
        open: true // 自动打开浏览器
    }
}

5.全局echarts对象

1）全局echarts对象的挂载

因为需要全局使用到echarts对象，所以要将echarts对象全局挂载，在 public/index.html 文件中引入 echarts.min.js 文件

2）将全局echarts对象挂载在Vue原型上

在src/main.js文件中挂载，由于在 index.html 中已经通过script标签引入了 echarts.js 文件夹, 故在 window 全局对象中是存在 echarts 全局对象, 将其挂载到 Vue 的原型对象

// 将全局echarts对象挂载在Vue的原型对象上
// 别的组件中可以使用 this.$echarts
Vue.prototype.$echarts = window.echarts

6.axios的封装与挂载

1）安装axios包

 npm install axios

2）封装axios对象

在 src/main.js 文件中配置 axios 并且挂载到Vue的原型对象上

import axios from 'axios'
// 请求基准路径的配置
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'
// 将axios挂载在Vue的原型对象上
// 在别的组件中使用 this.$http来使用axios
Vue.prototype.$http = axios