首先介绍中间件是Koa中一个非常重要的概念。Koa应用程序就是包含一组中间件函数的对象，而且有了async/await语法糖，是中间件写起来更简单。
所有代码github传送门
https://github.com/z1811021/koa-middlewares
首先看最基础的hello wold 版本
const koa = require('koa');
const app = new koa();
//基础 hello wold
app.use(async (ctx, next)=>{
console.log(ctx.method, ctx.host, ctx.url)
await next();
ctx.body = 'hello world'
})
app.listen(3000);
npm install
node app.js
接下来抽象打印ctx方法 host url
const koa = require('koa');
const app = new koa();
// 抽象打印ctx方法 host url
const logger = async (ctx, next) => {
console.log(ctx.method, ctx.host, ctx.url)
await next();
}
app.use(logger);
app.use(async (ctx, next)=>{
ctx.body = 'hello world'
})
app.listen(3000);
此时logger就是中间件。 next用于把中间件的执行权交给下游的中间件。在next()之前使用await是因为next()会返回Promise对象。直到最后一个中间件执行完毕后再自下而上执行next()之后的代码。我们称为洋葱模型
关于Promise的介绍可以看我之前的文章
https://www.jianshu.com/p/2b535c6e63d0
image.png
用代码更好的展示执行顺序
const koa = require('koa');
const app = new koa();
app.use(async (ctx, next) => {
console.log(1);
await next();
console.log(6);
})
app.use(async (ctx, next) => {
console.log(2);
await next();
console.log(5);
})
app.use(async (ctx, next) => {
console.log(3);
await next();
console.log(4);
})
app.listen(3000, ()=>{
console.log("server is running")
})
koa-compose
如果要将多个中间件合并成单一中间件,方便重用和导出，可以用koa-compose
const koa = require('koa');
const app = new koa();
const compose = require('koa-compose');
middleware1 = async (ctx, next) => {
console.log(1);
await next();
console.log(6);
}
middleware2 = async (ctx, next) => {
console.log(2);
await next();
console.log(5);
}
middleware3 = async (ctx, next) => {
console.log(3);
await next();
console.log(4);
}
const all = compose([middleware1, middleware2, middleware3])
app.use(all)
app.listen(3000, ()=>{
console.log("server is running")
})
koa-bodyparser
koa-bodeyparser可以把POST的参数解析到ctx.request.body中。如果熟悉Express的话会发现是一样的。
我们将会用到koa-static等会会详细介绍先可以忽略。
前台html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form method="post">
<input type="text" name="name" placeholder="input anything" />
<button type="submit">submit</button>
</form>
</body>
</html>
后台app.js
看是否打印了我们传递的数据
const koa = require('koa');
const app = new koa();
const bodyparser = require('koa-bodyparser')
app.use(bodyparser({
enableTypes:['json', 'form', 'text']
}))
app.use(require('koa-static')(__dirname + '/public'))
app.use(async (ctx, next)=>{
await next();
console.log(ctx.request.body)
let retunData = ctx.request.body
ctx.body = retunData
})
app.listen(3000);
koa-router
加上koa-router中间件后我们可以直接使用get和post来定位并且减少代码量
const koa = require('koa');
const app = new koa();
const bodyparser = require('koa-bodyparser')
const Router = require('koa-router')
const router = new Router() // 初始化router
app.use(bodyparser({
enableTypes:['json', 'form', 'text']
}))
app.use(require('koa-static')(__dirname + '/public'))
app.use(router.routes()) // 加载router中间件
app.use(router.allowedMethods()) //对异常码处理
router.get('/', async (ctx, next) => {
ctx.render('index')
})
router.post('/test1', async (ctx, next)=>{
let retunData = ctx.request.body
console.log(ctx.request.body)
ctx.body = retunData
})
koa-static和koa-view
我们在之前就已经用了koa-static，它是用来加载静态资源
比如
app.use(require('koa-static')(__dirname + '/public'))
而koa-view用来加载html模板文件列入ejs或者pug
const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const bodyparser = require('koa-bodyparser')
const Router = require('koa-router')
const router = new Router() // 初始化router
// middlewares
app.use(bodyparser({
enableTypes:['json', 'form', 'text']
}))
//两种写法
app.use(require('koa-static')(__dirname + '/public'))
app.use(views(__dirname + '/views', {
extension: 'pug'
}))
app.use(router.routes()) // 加载router中间件
app.use(router.allowedMethods()) //对异常码处理
router.post('/test1', async (ctx, next)=>{
let retunData = ctx.request.body
console.log(ctx.request.body)
ctx.body = retunData
})
router.get('/', async (ctx, next) => {
ctx.render('index')
})
app.listen(3000);
网友评论