koa2 从入门到进阶(五)-post请求参数

上一篇用 ejs 把页面渲染出来了。这一篇解决表单提交：Koa 怎么拿到前端 POST 过来的数据。可以自己拼 Node 原生的 data / end 事件，也可以直接上 koa-bodyparser，用 ctx.request.body 一次读完。

接着上一篇的项目：先在 index.ejs 里放表单，再分别用原生方式和中间件接收 username、password。

一、表单 POST 到 /add

action="/add"、method="post"，提交用户名和密码。后台路由路径必须和 action 一致。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="/add" method="post">
    用户名: <input type="text" name="username"/>
    <br/>
    <br/>
    密　码: <input type="password" name="password"/>
    <br/>
    <br/>
    <button type="submit">提交</button>
</form>
</body>
</html>

二、原生 Node 拼 POST 体

增加 router.post('/add')。监听 ctx.req 的 data 把 chunk 拼进字符串，end 时 resolve；出错则 reject。await 拿到完整字符串后再赋给 ctx.body。

//引入 koa模块
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');

//实例化
const app = new Koa();
const router = new Router();

//配置模板引擎中间件
app.use(views('views', {
    extension: 'ejs'
}));

router.get('/', async (ctx) => {
    await ctx.render('index', {});
});

router.post('/add', async (ctx) => {
    getData = function () {
        return new Promise(function (resolve, reject) {
            try {
                let str = '';
                ctx.req.on('data', function (chunk) {
                    str += chunk;
                });
                ctx.req.on('end', function (chunk) {
                    resolve(str)
                })
            } catch (err) {
                reject(err)
            }
        })
    };
    let data = await getData();
    ctx.body = data;
});

//启动路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

启动后在表单里输入 admin 和 123456 再提交，页面会回显拼好的 POST 原文（形如 username=admin&password=123456）。能收到，但每次都要手写 Promise，比较费事。

三、koa-bodyparser 读 ctx.request.body

先安装中间件，再 app.use(bodyParser())。之后 POST 体已经解析好，直接读对象即可。

npm install koa-bodyparser --save

//引入 koa模块
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views');
const bodyParser = require('koa-bodyparser');

//实例化
const app = new Koa();
const router = new Router();

//配置模板引擎中间件
app.use(views('views', {
    extension: 'ejs'
}));

//配置 koa-bodyparser 中间件
app.use(bodyParser());

router.get('/', async (ctx) => {
    await ctx.render('index', {});
});

router.post('/add', async (ctx) => {
    let data = ctx.request.body;
    ctx.body = data;
});

//启动路由
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

这次在表单输入 admin 和 654321 再提交，页面拿到的已经是解析后的对象，而不再是原始查询串。

一句话总结：POST 可以自己拼 req 的 data 事件，但日常用 koa-bodyparser，直接读 ctx.request.body 对象。