前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Koa入门(二)搭建 Koa 程序

Koa入门(二)搭建 Koa 程序

原创
作者头像
测不准
发布于 2021-04-10 03:20:13
发布于 2021-04-10 03:20:13
7950
举报
文章被收录于专栏:与前端沾边与前端沾边

1 项目搭建

1.1 初始化目录

安装 mkdir koa-demo && cd koa-demo && npm init -y && npm i koa --save && code .

package.json 文件中配置:

代码语言:txt
AI代码解释
复制
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node index.js"
}

1.2 根目录新建 index.js 文件

代码语言:txt
AI代码解释
复制
const Koa = require('koa')
const app = new Koa()

// 中间件
app.use((ctx) => {
  // ctx.body 相当于 http.createServer((req, res) => { res.end('你好,测不准') })
  ctx.body = '你好,测不准'
})

app.listen(3000, () => {
  console.log('监听3000端口')
})

ctx.body 就是返回给前端的数据,之前的开发是 MVC 模式,后端直接渲染完,返回给前端,你可以这么写 ctx.body = '<h1>你好,测不准</h1>',这样页面就可以直接渲染标签;但是现在的项目都是前后端分离的,后端直接返回 JSON 数据,前端拿到之后渲染,所以 Koa 返回的数据是这样的 ctx.body = [{name: 'uncertainty'}, {name: '测不准'}],希望我的表达让您理解。

执行 npm start

打开浏览器,输入 http://localhost:3000/

当然大家现在可以使用浏览器查看,因为是 get 请求,但是推荐大家安装 postman,后期可以方便测试 post 请求或者上传文件功能。postman下载地址

1.3 使用 postman 请求 http://localhost:3000/

但是这里每次改动代码都需要重新启动服务,不是很方便,这里我们安装 nodemon 辅助工具,更改之后会自动刷新,全局或者当前项目下安装都可以,我这里全局安装下 npm i nodemon -g

修改启动命令为 "start": "nodemon index.js"nodemon 会帮我们监听 js, mjs, json 文件的变化,自动启动程序)

2 实现简单 Koa

大家都知道,Koa 是对 node 的封装,先来个简单的服务实现:

  • 新建文件 application.js 使用 Koa 时是 new 的实例,所以需要实现个类,listen 方法监听端口,use 方法实现挂载中间件,如下:let http = require('http') class Application{ constructor() { this.callbackFunc } // 开启http srever 传入callback listen(...args) { let server = http.createServer(this.callback()) server.listen(...args) } /** * 挂载回调函数 * @param {*} fn 回调处理函数 */ use(fn) { this.callbackFunc = fn } /** * 获取http server所需的callback函数 */ callback() { return (req, res) => { this.callbackFunc(req, res) } } } module.exports = Application
  • 新建 example.js 文件 把刚创建的 application.js 文件引入let simpleKoa = require('./application') let app = new simpleKoa() app.use((req, res) => { res.writeHead(200) res.end('hello, uncertainty') }) // 这次监听 8000 app.listen(8000, () => console.log('监听8000端口'))
  • 执行命令 nodemon example.js

3 中间件

Koa 是一个中间件框架,本身没有捆绑任何中间件(核心代码简洁)。本身支持的功能并不多,功能都可以通过中间件拓展实现。通过添加不同的中间件,实现不同的需求,从而构建一个 Koa 应用。Koa 的中间件就是函数,现在基本都是 async 函数。

  • app.use() 是用于注册中间件并且必须是生成器函数(源码中有判断,后面大版本会移除,2.0 为了向下兼容)use(fn) { if (typeof fn !== 'function') throw new TypeError('middleware must be a function!'); if (isGeneratorFunction(fn)) { deprecate('Support for generators will be removed in v3. ' + 'See the documentation for examples of how to convert old middleware ' + 'https://github.com/koajs/koa/blob/master/docs/migration.md'); fn = convert(fn); } debug('use %s', fn._name || fn.name || '-'); this.middleware.push(fn); return this; }

生成器函数:generatorES6 新增的一个特殊函数,通过 function* 声明,函数体内通过 yield 来指明函数的暂停点,该函数返回一个迭代器,并且函数执行到 yield 语句前面暂停,之后通过调用返回的迭代器 next() 方法来执行 yield 语句

我们也可以使用生成器函数做中间件(不推荐):

代码语言:txt
AI代码解释
复制
const Koa = require('koa')
const app = new Koa()

app.use(function *(next){
  console.log(1)
  yield next;
  console.log(3)
  this.body = '你好,测不准啊'
})
app.use(function *(next){
  console.log(2)
  yield next
})

app.listen(3000, () => {
  console.log('监听3000端口')
})
  • Koa 的中间件通过一种更加传统的方式进行级联,摒弃了以往 node 频繁的回调函数造成的复杂代码逻辑
  • Koa 会把很多中间键函数组成一个处理链,每个中间键函数都可以做一些自己的事情,然后用 next() 来调用下一个中间键函数
  • 中间键必须是一个函数,可为异步函数:通过es7中的async和await来处理
  • use 内部封装了两个对象:ctx, next
  1. ctxcontext 的一般叫成上下文,主要包括 requestresponsebodyhttp 协议中的响应体,header 是指响应头,如果要抛异常可以直接使用 ctx.throw(500, '接口异常')ctx.status 设置状态码,ctx.url 获取请求 URL 等。
  2. next 起到串联中间件的作用,通过调用 next 函数,把执行权交给下一个中间件。最后一个中间件不使用该函数。

4 编写自己的中间件

4.1 log 中间件

日志模块也是线上不可缺少的一部分,完善的日志系统可以帮助我们迅速地排查出线上的问题。通过 Koa 中间件,我们可以实现属于自己的日志模块(当然可以直接用社区现成的库):

  • 新建 logger.jsconst fs = require('fs') module.exports = (options) => async (ctx, next) => { const startTime = Date.now() const requestTime = new Date() await next() const ms = Date.now() - startTime let logout = `${ctx.request.ip} -- ${requestTime} -- ${ctx.method} -- ${ctx.url} -- ${ms}ms` // 输出日志文件 fs.appendFileSync('./log.txt', logout + '\n') }const Koa = require('Koa') const app = new Koa() const logger = require('./logger') app.use(logger()) app.listen(3000, () => { console.log(`Server port is 3000.`) })
  • 入口文件引入 logger.js 文件

4.2 token 验证

前后端分离开发,我们常采用 JWT 来进行身份验证,其中 token 一般放在 HTTP 请求中的 Header Authorization 字段中(后面会介绍),每次请求后端都要进行校验,不可能每个接口都写判断,Koa 通过编写中间件来实现 token 验证。

  • 创建 token.jsmodule.exports = (options) => async (ctx, next) { try { // 获取 token const token = ctx.header.authorization if (token) { try { // verify 函数验证 token,并获取用户相关信息 await verify(token) } catch (err) { console.log(err) } } // 进入下一个中间件 await next() } catch (err) { console.log(err) } }const Koa = require('Koa') const app = new Koa() const token = require('./token') app.use(token()) app.listen(3000, () => { console.log(`Server port is 3000.`) })喜欢的朋友可以关注下公众号:与前端沾边,2021 年一起学习进步。
  • 入口文件引入 token.js 文件

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Koa入门(三)Koa 路由
在 Koa 应用中,通常会使用 koa-router 模块,提供对路由的支持。那为什么需要路由呢?做前后端分离开发的朋友都遇到过,对接接口的时候后台都会提供一个地址,请求这个地址,传相应参数就能实现相应地数据处理。你可以把这个接口理解为路由的地址。
测不准
2021/04/14
1.3K0
实现简单的 Koa
koa 为了能够简化 API,引入上下文 context,将原始请求对象 req 和 响应对象 res 封装并挂载到 context 上,并且在 context 上设置 getter 和 setter,从而简化操作
Cellinlab
2023/05/17
2800
实现简单的 Koa
【一题】通过手写 koa 源码更加深入洋葱模型
当我们在深入学习一个框架或者库时,为了了解它的思想及设计思路,也为了更好地使用和避免无意的 Bug,有时很有必要研究源码。对于 koa 这种极为简单,而应用却很广泛的框架/库更应该了解它的源码。
山月
2021/06/16
7310
【一题】通过手写 koa 源码更加深入洋葱模型
KOA2框架原理解析和实现
本文由 IMWeb 社区 imweb.io 授权转载自腾讯内部 KM 论坛,原作者:ruikunai。点击阅读原文查看 IMWeb 社区更多精彩文章。 什么是koa框架? koa是一个基于node实现的一个新的web框架,它是由express框架的原班人马打造的。它的特点是优雅、简洁、表达力强、自由度高。它更express相比,它是一个更轻量的node框架,因为它所有功能都通过插件实现,这种插拔式的架构设计模式,很符合unix哲学。 koa框架现在更新到了2.x版本,本文从零开始,循序渐进,讲解koa2的框
用户1097444
2022/06/29
7400
KOA2框架原理解析和实现
关于koa2,你不知道的事
koa 是一个基于 node 实现的一个新的 web 框架,它是由 express 框架的原班人马打造。特点是优雅、简洁、表达力强、自由度高。和 express 相比,它是一个更轻量的 node 框架,因为它所有的功能都通过插件来实现,这种插拔式的架构设计模式,很符合 unix 哲学。
lucifer210
2020/04/14
7420
关于koa2,你不知道的事
koa实践及其手撸
Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。
一粒小麦
2019/07/18
1.2K0
koa实践及其手撸
【nodejs】手写简易版 koa 及常用中间件
首先我们要实现 koa 的 use 和 listen 方法,我们这样使用 MyKoa。
一尾流莺
2022/12/10
7370
【nodejs】手写简易版 koa 及常用中间件
【koa快速入门】之基础使用
本文是koa快速入门的第一篇:基础使用,后续还会再写两篇文章,介绍「koa项目最佳实践」和「深究koa原理」。
luciozhang
2023/04/22
6060
【koa快速入门】之基础使用
知新 | koa框架入门到熟练第一章
是由Express原班人马打造,致力于成为一个更小的,更加富有表现力的,web框架。
mySoul
2020/07/15
9770
前端面试-实现一个简版koa
在koa官网有说明在ctx挂载了一系列request和response的属性别名。
Careteen
2022/02/14
4840
【koa快速入门】之深究原理
前两节我们已经介绍了koa的基本使用和koa项目的最佳实践,今天我们来深究下koa2的原理。
luciozhang
2023/04/22
2810
【koa快速入门】之深究原理
Vue+koa2开发一款全栈小程序(4.Koa入门)
1.Koa是什么? 基于nodejs平台的下一代web开发框架 1.Express原班人马打造,更精简 2.Async+await处理异步 3.洋葱圈型的中间件机制 新建一个koa项目 1.打开cmd
玩蛇的胖纸
2018/10/10
9390
源码共读-Koa
Koa是基于 Node.js 平台的下一代 web 开发框架,它的源码可以看这里,本章通过源码来简绍一下Koa是怎么实现的。
kai666666
2024/07/11
800
源码共读-Koa
# koa中间件开发和使用
九旬
2023/10/19
1970
koa 源码解析
本次的文章是之前 koa 专题的延续,计划书写两篇文章,本篇从零实现一个简单版的 koa 框架(里面可能涉及一点 node 知识,不会太讲,大家如果遇到不了解的可以自行百度查看,也可以看官网文档了解使用)。包括上下文 ctx 组合 req, res 的实现,中间件机制的实现。第二篇写下 bodyparser、 router 中间件的简单实现,理解其原理。
测不准
2021/07/14
5110
koa与express的中间件机制揭秘
TJ大神开发完express和koa后毅然决然的离开了nodejs转向了go,但这两个web开发框架依然是用nodejs做web开发应用最多的。
挥刀北上
2019/07/19
3.2K0
koa与express的中间件机制揭秘
koa-route 源码阅读
周末阅读完了 koa 的源码,其中的关键在于 koa-compose 对中间件的处理,核心代码只有二十多行,但实现了如下的洋葱模型,赋予了中间件强大的能力,网上有许多相关的文章,强烈建议大家阅读一下。
IMWeb前端团队
2019/12/03
4670
koa-route 源码阅读
【Koa】385- koa框架的快速入门与使用
Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序。
pingan8787
2019/10/23
5670
Koa2开发入门
首先,我们创建一个名为koa2的工程目录,然后使用VS Code打开。然后,我们创建app.js,输入以下代码:
xiangzhihong
2022/11/30
8190
Koa源码解析,带你实现一个迷你版的Koa
本文是我在阅读 Koa 源码后,并实现迷你版 Koa 的过程。如果你使用过 Koa 但不知道内部的原理,我想这篇文章应该能够帮助到你,实现一个迷你版的 Koa 不会很难。
WahFung
2020/08/24
8950
Koa源码解析,带你实现一个迷你版的Koa
相关推荐
Koa入门(三)Koa 路由
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文