[JavaScript知识库] 【老板要我啥都会】前端升全栈系列使用Koa2重构项目

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【老板要我啥都会】前端升全栈系列使用Koa2重构项目 -> 正文阅读

[JavaScript知识库]【老板要我啥都会】前端升全栈系列使用Koa2重构项目

1.开始

1.开始

使用koa2：

express中间件是异步回调，koa2原生支持async/await
新开发框架和系统，都开始基于koa2，例如egg.js
express虽然未过时，但是koa2肯定是未来趋势

目录：

async/await语法介绍，安装和使用koa2
开发接口，连接数据库，实现登录，日志记录
分析koa2中间件原理

介绍一下 async/await ，回到之前的 promise-test ，其实它就是 promise 的语法糖，我们新建一个 readFileData 函数， await 后面跟着一个 promise 对象就可以拿到里面的 resolve 的内容了。当然前面必须有 async 函数包裹！可以直接变成同步的写法（虽然还是异步）。另外执行 async 函数其实返回的也还是 promise 对象！try-catch 可以截获 promise 中 reject 的值。

2.介绍koa2

koa2 其实和 express 差不多（原班人马打造），只要 node.js 版本大于 8.0 就可以原生完美支持 async 和 await.

安装命令：

npm install koa-generator -g
Koa2 koa2-test
npm install & npm rup dev

?首先安装一个 koa2 脚手架，通过 koa2 建一个 blog-koa2 的文件夹，进去后把依赖给装上，当然还要加上 cross-env 包才能实现环境变量（npm i cross-env --save-dev），然后修改环境变量即可。打开 bin 下面的 www.js 其实跟 express 差不多，public 也是存放的前端静态文件，看看routes，其实是跟我们之前路由也差不多。views 里面是前端模板文件，也可以不管。

app.js

各个插件的作用
思考各个插件的实现原理（结合之前学过的知识)
处理get请求和post请求

?接下来重点看 app.js，app 应该是当前请求的实例，views 插件是关于前端模板那一个文件夹可以不管，json 这个是处理 postData 里面的数据（json 格式化），bodyparser 是把数据放到 body 里面（还可以指定格式什么的）.

3.路由

看得出来 koa 和 koa-router 是分离的，比较合适。 ctx.render 这个是将一些内容发送到某个页面然后替换页面中的某些内容（不是重点）。ctx.body 可以直接在网页上返回什么东西，注意路由的中间件函数必须是 async ！其中参数 ctx 就是 req 和 res 的整合（个人感觉合起来反而不清晰）。

那么什么是 prefix ？这个其实就是前缀也可以说是父路径，其它的路由需要在前面加上这个父路径才能访问到！建一个 blog.js ，简单定义一个 list 路由，当然需要再 app.js 引入和注册。可以通过 ctx （context） .query 拿到 url 中参数的值（其实 async 不写也是可以兼容的，只不过 next （）可

能会出错）。再建一个 user.js ，这个 post 的数据要在 ctx.request.body 获取（因为 ctx.body 已经是个方法了被占用了）。

总结一下 koa2 的路由：

1. 可以利用 render 发送内容到页面，展示页面而非直接打印

到页面上

2. 利用 body 的话则是直接打印到页面（可以传字符串和对

象）

3. 利用 prefix 即可添加父路径

const router =nequire( " koa-router" )()

router.prefix(./api/user')//设置父路

router.post('/login ', async function(ctx,next) {
  const { username,password } = ctx.request.bodyctx.body = {
   errno: 0,
   username,
   password
}
})

module.exports = router

4.中间件机制

app.use 就是在注册中间件， next 的机制也差不多，只不过是在 await 后面（毕竟也是返回一个 promise ，异步），就也是一个中间件（洋葱模型）。

5.实现session

koa2接口开发

实现登录；
开发路由；
记录日志

实现登录：

和express类似；
基于koa-generic-session和koa-Redis?

?安装这两个插件（当然还得加上 redis），在 app.js 引用 session 和 koa-redis，然后写的话需要在路由的前面写！

通过 app.keys 设置密匙， app.use （session）进行配置，首先是 cookie ，再配置 redis ，需要地址（可以先写死本地的 redis ）。回到 user.js 加一个验证，可以通过 ctx.session 进行判断，也是通过访问次数进行验证。

const session = require('koa-generic-session')
const redisStore = require('koa-redis')

6.开发路由准备工作

路由：

复用之前代码，如mysql、登录中间件、controller . model
初始化路由，并开发接口
联调测试

?先安装好 xss 和 mysql，拷贝 model 文件夹、conf 文件夹。之前提到 redis 的配置问题，我们把配置项移到 app.js，根据配置项配置 redis 而不是再写死了（从配置中获取）。拷贝 mysql.js 到新建的 db 文件夹，拷贝 controller 文件夹，不管这里面的内容还是需要修改一下，每个函数前面都加一个 async，在原本的 promise 之前要用 await 即可（里面也可以修改一下，把值取出来，返回整个值）。

拷贝 utils 文件夹， user 也需要修改。再拷贝 middleware 文件夹，里面的中间件也需要修改。

const { ErrorModel } = require(../model/resModel')

module.exports = async (ctx,next) =>{// 校验登录状态:未登录已经登录
  if (ctx.session.username){
     await next()
     return
}

ctx.body = new ErrorMode1('尚未登录')

7.开发路由-代码演示?

blog 这个先拷入引用， list 部分代码修改，记得换成 ctx ，换上 async 和 await （因为引用的是 promise ）。回到 user.js ，该引入的引入

8.日志?

日志：

access log记录，使用morgan
自定义日志使用console.log和,console.error
日志文件拆分、日志内存分析，之前讲过，不再赘述

?这里的 logger 其实只是让我们控制台打印地址什么的比较优美实际上并没有什么作用，函数需要借助 morgan（仅支持 express）。因此我们需要安装一个插件（koa-morgan）来让 morgan 支持我们的 koa。新建一个文件夹 logs，下面建一个 access.log。在 app.js 引入 fs、path、和 morgan，然后直接拷贝 express 的内容就行（logger 改成 morgan）。暂时修改下 prd 环境变量的路径来测试。

9.中间件原理-分析?

koa2中间件原理：

回顾中间件使用；
分析怎么实现；
代码演示

?直接搜 koa.bootcss.com 就可以找到这个示例代码，我们建一个 koa2-test 文件夹，npm 初始化，建一个 app.js，拷贝示例代码，安装 koa，直接运行就行。可以看出来在执行的时候就先注册了三个中间件（但是并不是同时执行，也不是一下子执行完），可以是第一个 next（）执行的话就是在执行第二个中间件（直到第二个中间件执行完成才算第一个 next（）执行完成，才会执行 next（）后面的语句）。第二个 next 需要等到第三个中间件执行完成才能执行 next 后面的语句才能执行完成第二个中间件（也就是说不同步，这样子可以先执行最关键的代码，再慢慢补充访问时间啊什么的信息）。因为是异步啊，当然要等异步的任务完成再接着往下走（因为前面有 await，那自然不能把异步挂起来），这个就是洋葱圈模型。