[Koa2 系列 05] Post 請求接收（下）

因為 POST 請求這種事情常常會做
這種東西一定會有人造好輪子給我們用
前面兩篇只是從原理上去了解 Koa2 中怎麼取得 POST 的查詢參數

而本篇要介紹的 koa-bodyparser 就是一個造好的輪子
在 koa 中把這種輪子就叫做 中間件 （Middleware）
對於 POST 請求 koa-bodyparser 可以把上下文的 formData 解析到 ctx.request.body 中

安裝中間件

就是熟悉的 npm

npm install --save koa-bodyparser@3

在程式中引入

const bodyParser = require('koa-bodyparser');

在程式中調用

引入之後要讓他在程式裡面開始做事情
所以要在程式內加入

app.use(bodyParser());

調用之後就可以直接在程式中使用 ctx.request.body 取得 POST 請求的參數
中間件會自動幫我們做解析

程式就變成了這樣

const Koa = require('koa');
const app = new Koa();
const bodyParser = require('koa-bodyparser');
app.use(bodyParser());

app.use(async(ctx) => {
    if (ctx.url==='/' && ctx.method==='GET'){
        //顯示表單頁面
        let html=`
            <h1>JSPang Koa2 request POST</h1>
            <form method="POST" action="/">
                <p>userName</p>
                <input name="userName" /><br/>
                <p>age</p>
                <input name="age" /><br/>
                <p>website</p>
                <input name="webSite" /><br/>
                <button type="submit">submit</button>
            </form>
        `;
        ctx.body=html;
    } else if (ctx.url === '/' && ctx.method === 'POST') {
         let postData = ctx.request.body;
         ctx.body = postData;
    } else {
        ctx.body='<h1>404!</h1>';
    }
});

app.listen(3000,() => {
    console.log('[demo] server is starting at port 3000');
});

如此就完成了 Post 請求的三部曲
這部分參考了很多的教學
多數都沒有前面兩篇那種原理的說明，就直接上中間件
而有了前兩篇的理論原理說明，現在我們不只會用中間件
還明白了為什麼人家中間件可以解析！