koa2基础知识整理

大家好，我是梅巴哥er。近阶段目标是后台应用框架和接口，所以开始整理koa的相关知识。

---

koa2基础知识整理

参考文档

• koa2中文文档
• koa官方文档

准备工作

• node --version 查看版本是否在7.6以上。 如果不是，就要重新安装7.6以上的node
• npm要在3.x以上的版本
• 如果不了解async/await的使用，先去了解相关文档后再学习koa。

koa简介

• 基于Node.js平台的web开发框架
• 可以认为是express的升级版，由express原团队研发
• 更轻量、更健壮
• 利用async函数，抛弃callback
• 增强了错误处理
• 没绑定任何中间件，换句话说所有的应用来自于npm和require

安装koa

• 默认安装最新版本，即koa2.x
• npm init -y 生成package.json文件
• npm install koa 安装koa

使用koa

• 在安装koa的同文件夹，创建demo.js

// demo.js
const Koa = require('koa') //引入koa构造函数
const app = new Koa() // 实例化

app.use(async (ctx) => { // 使用中间件
  ctx.body = 'hello koa2!'
})

app.listen(3000, () => { // 监听
  console.log('app is running at port 3000...')
})

• 打开管理器，node demo.js，启动koa
• 打开浏览器，输入localhost:3000/
• 在浏览器里看到hello koa2!。说明使用成功。

koa2开源文件目录结构

- lib
  - application.js //koa的入口文件。封装了context, request, response以及核心中间件。
  - context.js // 处理应用上下文。封装有部分request.js和response.js的方法
  - request.js // 处理http请求
  - response.js // 处理http响应

- package.json

一般来说，我们不需要关注目录结构，通过koa生成器可以直接生成核心文件的目录

• 生成器安装：npm install koa-generator -g
• 创建文件：koa koa-demo

// 就可以生成一个拥有核心文件的koa-demo文件夹
- koa-demo
	- bin	
	- node_modules
	- public // 公共资源
	- routes // 路由配置
	- views // 视图
	- app.js // 根入口
	- package.json // 项目配置

在熟悉使用项目中间件之前，先不用koa生成器。

koa路由的基本使用

路由，就是根据不同的URL地址，加载不同的页面，实现不同的功能。
koa中需要安装对用的包koa-router

• 安装npm install koa-router

引入并实例化

const Router = require('koa-router')

const router = new Router()

另一种合成写法：

const router = require('koa-router')()

koa-router的使用

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')() // 引入并实例化
// 这里和express是不同的
router.get('/', (ctx) => { 
  ctx.body = '欢迎来到koa首页！'
})

router.get('/lists', (ctx) => {
  ctx.body = '欢迎来到koa列表页！'
})

// app.use()使用中间件
// 前者作用是启动路由
// 后者作用是检测允许的请求方法
app.use(router.routes(), router.allowedMethods())

app.listen(3000, () => {
  console.log('app is running at port 3000...')
})

koa路由get传值

ctx是上下文的意思。

get请求参数是存放在query和querystring里的。

• query存放的是json形式的数据，
• 而querystring里存放的是字符串形式的数据。

从query或querystring中获取get请求参数有两种方式，

• 一种是从ctx.request中获取，即ctx.request.query或ctx.request.querystring。

• 另一种是直接从ctx中获取，即ctx.query或ctx.querystring。

常用的数据形式是json类型，所以获取数据常用方法的就是ctx.query。

// 举例说明
const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()

router.get('/', (ctx) => {
  ctx.body = '欢迎来到koa首页！'
})

router.get('/lists', (ctx) => {
  let url = ctx.url 
  // 从ctx的request中获取get请求参数
  let req_query = ctx.request.query 
  let req_querystring = ctx.request.querystring 

  // 从ctx中直接获取get请求参数
  let ctx_query = ctx.query 
  let ctx_querystring = ctx.querystring 

  // 输出
  ctx.body = {
    url,
    req_query,
    req_querystring,
    ctx_query,
    ctx_querystring
  }
})

app.use(router.routes(), router.allowedMethods())

app.listen(3000, () => {
  console.log('app is running at port 3000...')
})

打开浏览器，输入一个测试地址：http://localhost:3000/lists?name=dilireba&age=18

可以看到对应的输出结果，我们用菜鸟的json在线解析工具格式化一下，可以清晰看到：

ctx里面有什么

借助上面的例子，我们不妨来输出一下ctx，看下ctx里面都有什么？

这里是输出结果：

我们可以看到，ctx是一个上下文对象，里面包含有

• request 请求内容

  • 请求方法method
  • 请求地址url(域名之后的内容)
  • 请求头header
    • 域名host
    • 连接内容connection
    • accept
    • cookie

• response响应内容

  • 状态码status
  • 响应信息message
  • 响应头header
    • 响应内容类型content-type

• app , originalUrl, req, socket等

koa动态路由

• 动态路由格式/:id，例如：

router.get('/lists/:id', (ctx) =>{...})

• 获取id动态数据方法ctx.params

• 用法举例：

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()

router.get('/', (ctx) => {
  ctx.body = '欢迎来到koa首页！'
})

router.get('/lists/:id', (ctx) => {
  console.log(ctx.params)
  ctx.body = `这里是列表页的第${ctx.params.id}页。`
})

app.use(router.routes(), router.allowedMethods())

app.listen(3000, () => {
  console.log('app is running at port 3000...')
})

在页面输出链接：http://localhost:3000/lists/233 ，可以看到如下输出结果：
cmd输出结果{ id: '233' }
页面显示内容为：

koa中间件

• 中间件就是匹配路由之前或者匹配路由完成后做的一系列操作。

在koa中，中间件写在app.use()括号内，即app.use(中间件)

中间件执行顺序：

• 洋葱模型：从外到内，再从内到外
• 由next控制中间件的执行顺序
• 没有next控制，执行完第一个匹配的中间件，就不会再去执行下一个中间件了

举例说明：

// 例子1，先把next注释掉
const Koa = require('koa')
const app = new Koa()


app.use(async (ctx, next) => {
  console.log(1)
  // await next()
  console.log(2)
})

app.use(async (ctx, next) => {
  console.log(3)
  ctx.body = 'hello koa2'
})

app.listen(3000, () => {
  console.log('app is running at port 3000...')
})

页面输入localhost:3000查看， 可以看到页面显示内容为not found，然后cmd里输出的结果是1 2 。也就是说，第二个app.use()里的中间件，根本没执行。

再来看个例子：

// 例子2 把注释掉的next释放出来
const Koa = require('koa')
const app = new Koa()


app.use(async (ctx, next) => {
  console.log(1)
  await next()
  console.log(2)
})

app.use(async (ctx, next) => {
  console.log(3)
  ctx.body = 'hello koa2'
})

app.listen(3000, () => {
  console.log('app is running at port 3000...')
})

再重新查看，可以看到页面上显示内容为'hello koa2'，在cmd里面的输出结果为1 3 2 .

也就是说，在输出完1之后，next把执行权交给了后面的中间件。 等后面的中间件执行完，再回头执行next下面的语句。

可以看出来，洋葱模型的核心点就是await next()语句。

这里的next()返回的是一个promise对象。

koa常用中间件

中间件是koa的核心，后续的学习基本上就是围绕中间件做事：

• koa-body

• koa-router

• koa-views + ejs

• koa-static

• koa-session

• koa-jwt

• 后续继续补充

post数据获取和中间件koa-bodyparser

*注：koa2中，使用koa-body代替了koa-bodyparser。两者不可同时存在或混用。

koa中获取post请求数据，需要使用中间件koa-bodyparser来完成。

• 安装

npm install koa-bodyparser

• 使用

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const bodyParser = require('koa-bodyparser') // 1，引入

app.use(bodyParser()) // 2，使用

app.use(async ctx => {
  ctx.body = ctx.request.body // 3，获取数据
})

app.listen(3000, () => {
  console.log('app is running at port 3000...')
})

• 通过ctx.request.body 获取post提交的数据

静态资源加载中间件koa-static

koa-static用来访问静态资源

• 安装

npm install koa-static

• 使用

const Koa = require('koa')
const app = new Koa()
const static = require('koa-static') // 引入
const path = require('path')

app.use(static(path.join(__dirname, 'images'))) // 使用中间件并拼接路径



app.listen(3000, () => {
  console.log('app is running at port 3000...')
})

cookie在koa2中的使用

• 设置cookie值

ctx.cookies.set(name, value, [options])

• options里的名称和值

maxAge  // 值是一个毫秒数，cookie的有效期
expires cookie // 过期时间
path cookie // 路径， 默认是'/'
domain cookie // 域名
secure // 安全cookie， 默认false。设置成true，表示只有https可以访问
httpOnly // 是否只是服务器可访问cookie，默认是true
overwrite // 布尔值，表示是否覆盖以前设置的同名的cookie，默认是false。

• 获取cookie的值

ctx.cookies.get('name')

session在koa2中的使用

需要安装中间件，并对session进行配置后使用

• 安装

npm install koa-session

• 引入

const session = require('koa-session')

• 配置和使用

app.keys = ['some secret hurr'];
const CONFIG = {
   key: 'koa:sess',   //cookie key (default is koa:sess)
   maxAge: 86400000,  // cookie的过期时间 maxAge in ms (default is 1 days)
   overwrite: true,  //是否可以overwrite    (默认default true)
   httpOnly: true, //cookie是否只有服务器端可以访问 httpOnly or not (default true)
   signed: true,   //签名默认true
   rolling: false,  //在每次请求时强行设置cookie，这将重置cookie过期时间（默认：false）
   renew: false,  //(boolean) renew session when session is nearly expired,
};
app.use(session(CONFIG, app));

• 获取和设置session值

设置值 ctx.session.username = "张三";
获取值 ctx.session.username

koa-views中间件和ejs模板引擎

• 安装

npm install koa-views

npm install ejs

• 引入和使用

const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const views = require('koa-views') // 引入
// 使用中间件 意思是 在根目录下的views文件夹里匹配html文件，并用ejs模板渲染
app.use(views('views', {map: {html: 'ejs'}})) 
// 表示 当匹配/add路由时，渲染views文件夹里的名字为index的html文件
router.get('/add', async (ctx) => {
  await ctx.render('index')
})

app.use(router.routes(), router.allowedMethods())

app.listen(3000, () => {
  console.log('app is running at port 3000...')
})

• ejs模板引擎暂时不讲了

koa-multer上传图片

• 安装

npm install koa-multer

• 引入和使用

// 上传单张图片示例
const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const multer = require('koa-multer')

var storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'images/')
  },
  filename: function(req, file, cb) {
    var fileFormat = (file.originalname).split('.')
    cb(null, Date.now() + '.' + fileFormat[fileFormat.length - 1])
  }
})

var upload = multer({storage: storage})

router.get('/', async (ctx) => {
  ctx.body = `<html>
  <form action="/add" method="POST" enctype="multipart/form-data">
  <input type="file" name="face"><br />
  <input id="submit" type="submit" value="Submit">
</form>
  </html>`
})

router.post('/add', upload.single('face'), async(ctx, next) => {
  ctx.body = {
    filename: ctx.req.file.filename,
  }
})

app.use(router.routes(), router.allowedMethods())

app.listen(3000, () => {
  console.log('app is running at port 3000...')
})

*注：Form表单加上enctype="multipart/form-data"

另外，koa2中，koa-body已经包含了koa-bodyparser和koa-multer功能，而且更完善。

koa2-cors实现跨域

• 安装

npm install koa2-cors

• 引入并配置中间件

const cors = require('koa2-cors')

app.use(cors())

这些知识koa2基础知识的一部分。后续有更多使用的中间件，会继续更新到该博文里。

---

以上。