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