聊聊 koa 中间件

时间 2019-11-17

标签聊聊 koa 中间件繁體版

原文原文链接

前言

koa是基于Node.js平台的下一代web开发框架,它体积小，扩展性强，给人一种干净利落的编程方式，且由express原班人马打造,国内不少互联网公司都在使用，所以有必要学习总结下。css

初出茅庐,来个hello word

按照惯例，先来个demo 输出hello world

let Koa = require('koa'); //引入koa
let app = new Koa();    //声明一个实例app
app.use(async (ctx,next)=>{   //  对于任何请求，app将调用该异步函数处理请求：
    ctx.body = "hello"
});
app.listen("3000");  //监听端口
复制代码

其中参数ctx是由koa传入的封装了request和response的变量，咱们能够经过它访问request和response。
next是koa传入的将要处理的下一个异步函数。
由async标记的函数称为异步函数，在异步函数中，能够用await调用另外一个异步函数，这个异步函数必须返回一个promise，上篇文章写过promise用法和实现原理,不了解能够先去看看。这两个关键字将在ES7中引入。

简捷的5行代码，帮咱们开启了3000端口的服务html

深刻理解Koa中间件之洋葱模型

学习Koa重点在于理解中间件实现原理，对后续引用第三方库中间件时候有更好了解。咱们单独讲讲vue

先来段测试代码

let Koa = require('koa');
let app = new Koa();
app.use(async (ctx,next)=>{
    console.log(1);
   await next();
    console.log(2);
});
app.use(async (ctx,next)=>{
    console.log(3);
   await next();
    console.log(4);
});
app.listen("3000");
复制代码

你可能对运行的结果会说 1234，其实否则，咱们先来看下输出结果git

一脸懵逼1342,这是什么顺序，这就是咱们要说的洋葱模型github

中间件的执行很像一个洋葱，但并非一层一层的执行，而是以next为分界，先执行本层中next之前的部分，当下一层中间件执行完后，再执行本层next之后的部分。
一个洋葱结构，从上往下一层一层进来，再从下往上一层一层回去,是否是有点感受了。

一、koa-router中间件

koa-router基础写法

为了讲的详细全面,把路由分为及部分来说解，先来看最基本的路由怎么写

let Koa = require('koa');
let app = new Koa();
let Router = require('koa-router');
let router = new Router();
router.get('/',async (ctx,next)=>{
    ctx.body = 'hello people';
    await next()
});
router.get('/list',async (ctx,next)=>{
    ctx.body = 'list';
});
app.use(router.routes()); // 挂载
app.use(router.allowedMethods());//当请求数据的方法与设置的方法不一致，会报错。好比默认get请求获取，用post发请求会报错
app.listen(3000);
复制代码

koa-router中嵌套路由写法

假如咱们想为单个页面设置层级，/home是咱们首页，再次基础上有/home/list 首页列表页 /home/todo 首页todo页。这时咱们就须要用到嵌套路由，看看怎么用web

const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
//home的路由
let home = new Router();
home.get('/list',async(ctx)=>{
    ctx.body="Home list";
}).get('/todo',async(ctx)=>{
    ctx.body ='Home ToDo';
});
//page的路由
let page = new Router();
page.get('/list',async(ctx)=>{
    ctx.body="Page list";
}).get('/todo',async(ctx)=>{
    ctx.body ='Page todo';
});
//装载全部子路由
let router = new Router();
router.use('/home',home.routes(),home.allowedMethods());
router.use('/page',page.routes(),page.allowedMethods());
//加载路由中间件
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000);

复制代码

这样一来就实现嵌套路由的写法express

koa-router参数的传递

一、经过/arcicle/id/name传参

let Koa = require('koa');
let app = new Koa();
let Router = require('koa-router');
let router = new Router();
//实现  /arcicle/id/name形式的传参
router.get('/acticle/:id/:name',(ctx,next)=>{
    ctx.body = ctx.params.id +"-"+ ctx.params.name;
});
app.use(router.routes());
app.listen(3000);
复制代码

测试下，学过vue应该比较熟悉编程

二、经过/arcicle?id=1&name=cgp传参

const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
router.get('/article', function (ctx, next) {
    ctx.body=ctx.query; //query方法实现json形式
});
app.use(router.routes())
app.listen(3000,()=>{
    console.log('starting at port 3000');
});
复制代码

二、koa-bodyparse()中间件

用来解析请求体的中间件，好比获取post提交的表单数据，经过koa-bodyparse解析后就能获取到数据。看demo

let Koa = require('koa');
let bodyParser = require('koa-bod')
let app = new Koa();
app.use(bodyParser()); // 解析请求体的中间件
app.use(async (ctx, next) => {
    if (ctx.path === '/' && ctx.method === 'GET') {
        ctx.set('Content-Type', 'text/html;charset=utf8');
        ctx.body = `
        <form action="/" method="post">
            <input type="text" name="username" >
            <input type="text" name="password" >
            <input type="submit" >
        </form>
        `
    }
});
app.use(async (ctx, next) => {
    if (ctx.method === 'POST' && ctx.path === '/') {
        // 获取表单提交过来的数据
        ctx.body = ctx.request.body;
    }
});
app.listen(3000);

复制代码

当post提交表单得到表单数据，测试下结果json

三、koa-better-body中间件

是用来上传文件的中间件
因为老的中间件都是基于koa1版本的generate函数实现的，在koa2中咱们须要用koa-convert，能够将他们转为基于Promise的中间件供Koa2使用

来个demo体验下，咱们把本地的1.txt文件上传到upload文件夹中。 1.txt内容为123456789数组

let Koa = require('koa');
let app = new Koa();
let betterBody = require('koa-better-body'); // v1插件 
let convert = require('koa-convert'); // 将1.0的中间件 转化成2.0中间件
app.use(convert(betterBody({
    uploadDir: __dirname //指定上传的目录 __dirname当前文件夹绝对路径
})))
app.use(async (ctx, next) => {
    if (ctx.path === '/' && ctx.method === 'GET') {
        ctx.set('Content-Type', 'text/html;charset=utf8');
        ctx.body = `
        <form action="/" method="post" enctype="multipart/form-data">
            <input type="text" name="username" autoComplete="off">
            <input type="text" name="password" autoComplete="off">
            <input type="file" name="avatar">
            <input type="submit" >
        </form>
        `
    } else {
        return next();
    }
});
app.use(async (ctx, next) => {
    if (ctx.method === 'POST' && ctx.path === '/') {
        // 获取表单提交过来的数据
        ctx.body = ctx.request.fields;
    }
});
app.listen(1000);
复制代码

看下上传结果

内容也是正确的，我就不给你们展现拉

四、kao-views中间件

koa-views对须要进行视图模板渲染的应用是个不可缺乏的中间件，支持ejs, nunjucks等众多模板引擎。

咱们以ejs为例子

let Koa = require('koa');
let app = new Koa();
let views = require('koa-views');
app.use(views(__dirname,{
    extension:'ejs' //指定用ejs模板
}));
app.use(async (ctx,next)=>{
    // 渲染index.ejs
    await ctx.render('index',{name:'cgp',age:9,arr:[1,2,3]});
});
app.listen(3000);
复制代码

咱们来看下index.ejs模板是怎么写的。ejs语法戳这里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1><%=name%></h1>
    <h1><%=age%></h1>
    <ul>
        <%arr.forEach(item=>{%>
             <li><%=item%></li>
        <%})%>
    </ul>
</body>
</html>

复制代码

咱们这里写的模板很简单，就是输出下name、age，而后循环下数组

五、koa-static

一个用于生成静态服务的中间件上篇文章手写了cgp-server的模块

let Koa = require('koa');
let server = require('koa-static');
let app = new Koa();
app.use(server(__dirname +'/public'));
app.listen(3000);
复制代码

用法很简单，有兴趣能够看下我写的静态服务器

六、koa自带cookie用法

好比咱们要存储用户名，保留用户登陆状态时，会用到cookie。

共两个方法

ctx.cookies.get()
ctx.cookies.set()

先来个demo测试，当输入/write写入cookie，当输入/read读到cookie

let Koa = require('koa');
let Router = require('koa-router');
let app = new Koa();
let router = new Router();
router.get('/read', (ctx, next) => {
    //有name读name
    let name = ctx.cookies.get("name") || '没有name';
    let age = ctx.cookies.get("age") || '没有age';
    ctx.body = `${name}-${age}`;
});
router.get('/write', (ctx, next) => {
    ctx.cookies.set('name', 'cgp',{
        domain:'127.0.0.1', //写入cookie所在的域名
        path:'/write',    // 写入cookie最大的路径
        maxAge:10*1000,    //Cookie最大有效时长
        httpOnly:false,  // 是否只用于http请求中获取
        overwrite:false  // 是否容许重写
    });
    ctx.cookies.set('age', '9');
    ctx.body = 'write Ok';
});
app.use(router.routes());
app.listen(4000);
复制代码

Cookie选项

domain：写入cookie所在的域名
path：写入cookie所在的路径
maxAge：Cookie最大有效时长
expires：cookie失效时间
httpOnly:是否只用http请求中得到
overwirte：是否容许重写

看下运行结果吧

未完待续

对经常使用中间件源码感兴趣能够参考下我总结

更多阅读原文能够看这里

都看到这里啦，喜欢就点个赞吧