Koa教程之一：路由、Static、Cookie、连接数据库
本教程代码仓库请访问：
https://github.com/chencl1986/koa2-tutorial
Koa与Express的区别
Express是基于回调函数开发。
Koa是基于Promise思想开发。
Koa1基于Generator，Koa2同时支持Generator和Async/await，但使用Generator会收到警告，因为Koa3是完全基于Async/await。
使用Koa创建一个服务器
const Koa = require('koa')
const server = new Koa() // 使用new创建一个Server
server.listen(8080) // 监听8080端口
1
2
3
4
5
引入Koa路由
请查看server01.js
与Express不同，Koa并不自带路由，需要引入koa-router模块才可以使用路由。
/**
* 代码请查看：/server01.js
*/
const router = new Router()
// router常用方法有get（匹配get请求）、post（匹配post请求）、all（匹配所有请求）
// ctx为上下文对象，其中包括原生nodejs包含的request/response对象，分别为ctx.req/ctx.res。
// next函数被调用时，会暂停该中间件的运行，并将控制传递给下一个中间件。
// 判断以get方法请求的路由
router.get('/a', async (ctx, next) => {
console.log(ctx)
ctx.body = 'aaa' // 通过body属性向前台传输数据
ctx.body += 'bbb' // body属性的值可以添加或替换，与普通对象的属性相同。
})
server.use(router.routes()) // 使用use方法，将router中间件添加到Server中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
当然在项目中，我们往往会有多级路由，这时候就需要创建嵌套路由。
嵌套路由
请查看server01.js
通过路由嵌套，实现多级路由访问。
/**
* 代码请查看：/server01.js
*/
// 嵌套路由
const router = new Router() // 创建一个主路由
const userRouter = new Router() // 创建一个路由
const companyRouter = new Router()
companyRouter.get('/a', async (ctx, next) => { // 匹配路由后将输出相应内容
ctx.body = '企业的a'
})
userRouter.use('/company', companyRouter.routes()) // 将company路由添加到父级，表示当访问/company的子路由时，匹配company下的路由。
userRouter.get('/', async (ctx, next) => {
ctx.body = 'user'
})
userRouter.get('/company', async (ctx, next) => {
ctx.body = '企业'
})
router.use('/user', userRouter.routes()) // 将userRouter添加到主路由router中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
此时当浏览器访问不同路由时，显示相应内容：
访问路径 显示内容
/user user
/user/company 企业
/user/company/a 企业的a
Koa之所以选择这样的嵌套方式，更多的原因是为了支持大型项目。在大型项目中，若采用配置JSON的方式配置路由，会因为代码量过大造成阅读困难。
当然，若采用当前的配置方式，将所有路由都配置在一个文件中，对代码阅读毫无帮助，因此我们需要将每个层级的路由都配置到单独文件中，通过互相引用模块的方式，实现路由配置。
路由嵌套时，最终访问的路径是将各层级的路径，按字符串拼接起来的，因此需要注意不要出现拼接错误，例如出现’//user’。
’’ 空字符串代表根路由
’’ 字符串代表匹配所有路由
模块化嵌套路由
请查看server02.js
先在入口js文件中，将根节点的路由添加到server中。
server.use(require('./routers')) // 使用根路由配置
1
在根路由的配置中，引用下级路由的配置，以此类推。
const Router = require('koa-router')
const router = new Router()
// 此时require('./user')实际为router.routes()，为一个中间件，需要使用router.use
router.use('/user', require('./user'))
router.get('/user', async (ctx, next) => {
ctx.body = 'user'
})
module.exports = router.routes()
1
2
3
4
5
6
7
8
9
10
11
12
这样，我们就完成了整个项目的路由配置。
路由参数
请查看server03.js
在Koa中，支持通过路由传参。
router.get('/news/:id', async (ctx, next) => {
console.log(ctx.params) // 通过params属性获取参数
ctx.body = `新闻ID为：${ctx.params.id}`
})
1
2
3
4
同时也可以进行多级传参，此时需要注意的是，只有当传入参数数量与路由数量相同时，才可以正确匹配，同时参数的顺序是固定的。
router.get('/news/:id1/:id2/:id3', async (ctx, next) => {
console.log(ctx.params)
ctx.body = `多级新闻ID为：${ctx.params.id1}/${ctx.params.id2}/${ctx.params.id3}`
})
1
2
3
4
假设同时匹配了两层同样的路由，则以先匹配的路由为准，后一级路由不会执行。
router.get('/news/:id') // 只会执行该路由匹配。
router.get('/news/1')
1
2
如果希望匹配完第一级路由之后，还可以匹配第二级，则可以通过执行next()，将方法传入下一级，但因为此时next()返回值为Promise，则需要使用await。
// 若不执行next，则只会匹配该路由
router.get('/news/1', async (ctx, next) => {
console.log(ctx.params) // 通过params属性获取参数
ctx.body = `新闻ID为：固定的1`
await next() // 可通过next函数，执行下一级的匹配，同时因为此时next()返回值为Promise，则需要使用await。
})
router.get('/news/:id', async (ctx, next) => {
console.log(ctx.params) // 通过params属性获取参数
ctx.body = `新闻ID为：${ctx.params.id}`
await next()
})
router.get('/news/:key', async (ctx, next) => {
console.log(ctx.params) // 通过params属性获取参数
ctx.body = `新闻ID为：${ctx.params.key}`
await next()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Urlencoded传参与路由传参的区别
请查看server03.js
Urlencoded：http://localhost:8080/news/1/2/3/user/1/2/3
路由传参：http://localhost:8080/news?id1=1&id2=2&id3=3
Urlencoded传参 路由传参
通过ctx.query获取参数 通过ctx.params获取参数
顺序灵活 顺序固定
可省略 不可省略
动态地址，搜索引擎会认为只是一个地址，不利于SEO 静态地址，搜索引擎会判断为多个地址，利于SEO
参数之后不可挂载路由 参数之后可以挂载下级路由
context上下文
请查看server04.js
context是ctx的原型prototype，通常用来向整个项目添加全局属性或方法。
最经常的用法是添加全局数据库的连接池。
server.context.db = db();
server.use(async ctx => {
console.log(ctx.db);
});
1
2
3
4
5
添加一个全局属性并打印。
server.context.a = 123
router.get('/', async (ctx, next) => {
ctx.body = `abc${server.context.a}`
})
1
2
3
4
5
ctx.throw与ctx.assert
请查看server05.js
ctx.throw([status], [msg], [properties])
ctx.throw方法用于向前端抛出一个错误。
router.get('/login', async (ctx, next) => {
if (!ctx.query.user || !ctx.query.pass) {
ctx.throw(400, '用户名或密码不存在')
} else {
ctx.body = '成功'
}
})
1
2
3
4
5
6
7
ctx.assert(value, [status], [msg], [properties])
ctx.assert简单来说就是对throw的封装，第一个参数是触发条件。
等价于如下代码：
if (!value) {
ctx.throw(code, msg)
}
1
2
3
因此前一段throw的代码可以简写为：
router.get('/login', async (ctx, next) => {
ctx.assert(ctx.query.user, 400, '用户名不存在')
ctx.assert(ctx.query.pass, 400, '密码不存在')
ctx.body = '成功'
})
1
2
3
4
5
ctx.redirect
请查看server06.js
ctx.redirect用于重定向，可重定向到站内或站外，同时会向前端传一个302状态码。
router.get('/google', async (ctx, next) => {
ctx.redirect('https://www.google.com/')
})
router.get('/login', async (ctx, next) => {
ctx.redirect('/user')
})
1
2
3
4
5
6
7
使用koa-static处理静态文件
请查看server07.js
const Static = require('koa-static')
// 通过路由使用静态文件时，表示路由直接接受访问，所以需要用all方法。
server.use(Static('./static', { // 使用./static文件夹中的静态文件
maxage: 86400 * 1000, // 告知浏览器缓存时间
index: '1.html' // 当黄文根路由时，默认渲染的文件，前提是路由未匹配根路由
}))
1
2
3
4
5
6
7
使用路由处理静态文件
请查看server08.js
在项目开发中批量处理静态文件，可以使用路由匹配不同的文件类型，通过koa-static处理并添加不同缓存时间等参数。
const staticRouter = new Router()
staticRouter.all(/(\.jpg|\.png|\.gif)/, Static('./static', {
maxage: 60 * 86400 * 1000
}))
staticRouter.all(/(\.css)/, Static('./static', {
maxage: 1 * 86400 * 1000
}))
staticRouter.all(/(\.html|\.htm|\.shtml)/, Static('./static', {
maxage: 20 * 86400 * 1000
}))
staticRouter.all(/(\.js|\.jsx)/, Static('./static', {
maxage: 1 * 86400 * 1000
}))
// '' 空字符串代表根路由
// '*' 字符串*代表匹配所有路由
staticRouter.all('*', Static('./static', {
maxage: 30 * 86400 * 1000
}))
server.use(staticRouter.routes())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
koa-better-body中间件
请查看server09.js
koa-better-body中间件是用来解析post请求，包括数据和文件。
https://github.com/tunnckoCoreLabs/koa-better-body
新建一个post.html，用来上传表单：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://localhost:8080/upload" method="post" enctype="multipart/form-data">
名字：<input type="text" name="user" /><br>
头像：<input type="file" name="f1" /><br>
<input type="submit" value="提交">
</form>
</body>
</html>