koa学习之路五

时间 2019-11-13

标签 koa 学习之路繁體版

原文原文链接

以前的文章咱们介绍了一下 koa 中使用 ejs 模板及页面渲染，本篇文章咱们来看一下 koa post提交数据及 koa-bodyparser中间件。html

在前端页面中，难免会用到 form 表单和 post 请求向后端提交数据，接下来咱们看一下 koa 是如何获取到前端经过 post 请求传过来的数据。前端

咱们接着上一篇的内容来写咱们的项目，咱们先来看一下原生 NodeJs 是如何获取 post 请求数据的，咱们先在 index.ejs 中写一些 form 表单：node

<!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>

咱们经过 form 表单的 post 请求向后端发送 username 和 password 两个数据，页面效果以下：npm

接下来咱们看一下 app.js json

//引入 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);

在原有内容上，咱们增长了一个 router.post("/add", ) 的路由，其中 "/add" 与 index.ejs 中 form 表单的 action 一致，咱们经过异步方式将获取到的数据经过 str+ 将数据拼接到一块，若是获取数据错误则返回错误信息，最后将信息返回给页面。后端

如今咱们启动项目，在页面 index.ejs 中的 input 中分别输入 admin 和 123456，而后点击 button 按钮，结果以下：app

从上面的页面显示效果说明咱们已经成功的接收 post 数据并拼接完成返还给了前端页面。koa

上面的 node 原生方式看起来仍是很费事的，接下来咱们看一下 koa-bodyparser 模块获取 post 数据。异步

首先得下载这个包：async

npm install koa-bodyparser --save

而后咱们将 app.js 改成以下：

//引入 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);

咱们先在头部引入 koa-bodyparser 模块，而后添加 app.use(bodyParser()) 中间件，以后就能够经过 ctx.request.body 来获取咱们的数据了。

如今咱们启动项目，在页面 index.ejs 中的 input 中分别输入 admin 和 654321，而后点击 button 按钮，结果以下：

从上面的页面输出结果咱们能够看出咱们不只获取到了 post 的请求数据，并且数据还被自动转成了 json 格式数据。

内容来自：http://www.javashuo.com/article/p-kludsfwk-cx.html