【老板要我啥都会】前端升全栈系列 使用Koa2重构项目

本文涉及的产品
云数据库 Tair(兼容Redis),内存型 2GB
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
日志服务 SLS,月写入数据量 50GB 1个月
简介: 介绍一下 async/await ,回到之前的 promise-test ,其实它就是 promise 的语法糖,我们新建一个 readFileData 函数, await 后面跟着一个 promise 对象就可以拿到里面的 resolve 的内容 了。

1.开始

使用koa2

  1. express中间件是异步回调,koa2原生支持async/await
  2. 新开发框架和系统,都开始基于koa2,例如egg.js
  3. express虽然未过时,但是koa2肯定是未来趋势
  4. 目录:
  5. async/await语法介绍,安装和使用koa2
  6. 开发接口,连接数据库,实现登录,日志记录
  7. 分析koa2中间件原理

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

2345_image_file_copy_525.jpg

2345_image_file_copy_526.jpg

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.jsapp 应该是当前请求的实例,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接口开发

  1. 实现登录;
  2. 开发路由;
  3. 记录日志
  4. 实现登录:
  5. 和express类似;
  6. 基于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')

2345_image_file_copy_527.jpg

2345_image_file_copy_528.jpg

6.开发路由准备工作

路由:

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

先安装好 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('尚未登录')

2345_image_file_copy_529.jpg

7.开发路由-代码演示

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

2345_image_file_copy_530.jpg

8.日志

日志:

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

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

2345_image_file_copy_531.jpg

9.中间件原理-分析

koa2中间件原理:

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

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

2345_image_file_copy_532.jpg

洋葱圈模型

就其实第一层洋葱就已经包含第二层洋葱,第二层洋葱又包 含了第三层洋葱... koa2(本身就没有路由功能)的中间件并不涉及路由什么的,仅仅是中间件的注册和传递。

2345_image_file_copy_533.jpg

2345_image_file_copy_534.jpg

2345_image_file_copy_535.jpg

相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore     ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库 ECS 实例和一台目标数据库 RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
3月前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
97 1
|
4月前
|
前端开发 Java 编译器
【前端学java】java基础练习缺少项目?看这篇文章就够了!(完结)
【8月更文挑战第11天】java基础练习缺少项目?看这篇文章就够了!(完结)
40 0
|
2月前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
135 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
1月前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
34 2
|
2月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
558 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
2月前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
2月前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
38 0
|
2月前
|
Web App开发 前端开发 JavaScript
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
53 0
|
2月前
|
Web App开发 移动开发 前端开发
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
51 0
|
2月前
|
前端开发 API 开发者
🥇前端宝藏:多项目掌握技能的冒险之旅🏆
在前端开发的学习旅程中,实践是提升技能的关键。本文介绍了多个前端项目,包括计算器、天气应用、经典游戏等,涵盖了从React到Svelte的各种技术栈。每个项目都附有在线演示和源代码,旨在帮助读者深入理解实现细节,激励更多人参与实际项目开发。通过这些项目,读者可以将理论知识转化为实践,拓展职业机会。
19 0