聊聊 koa 中間件

前言

koa是基於Node.js平臺的下一代web開發框架,它體積小，擴展性強，給人一種乾淨利落的編程方式，且由express原班人馬打造,國內不少互聯網公司都在使用，所以有必要學習總結下。

初出茅廬,來個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端口的服務

深刻理解Koa中間件之洋蔥模型

學習Koa重點在於理解中間件實現原理，對後續引用第三方庫中間件時候有更好了解。咱們單獨講講

• 先來段測試代碼

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，其實否則，咱們先來看下輸出結果

一臉懵逼1342,這是什麼順序，這就是咱們要說的洋蔥模型

• 中間件的執行很像一個洋蔥，但並非一層一層的執行，而是以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頁。這時咱們就須要用到嵌套路由，看看怎麼用

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);

複製代碼

這樣一來就實現嵌套路由的寫法

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提交表單得到表單數據，測試下結果

三、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：是否容許重寫

看下運行結果吧

未完待續

對經常使用中間件源碼感興趣能夠參考下我總結

更多閱讀原文能夠看這裏

都看到這裏啦，喜歡就點個贊吧