koa2 從入門到進階之路 （五）

豐寸發表於2019-05-30

之前的文章我們介紹了一下 koa 中使用 ejs 模板及頁面渲染，本篇文章我們來看一下 koa post提交資料及 koa-bodyparser中介軟體。

在前端頁面中，不免會用到 form 表單和 post 請求向後端提交資料，接下來我們看一下 koa 是如何獲取到前端通過 post 請求傳過來的資料。

我們接著上一篇的內容來寫我們的專案，我們先來看一下原生 NodeJs 是如何獲取 post 請求資料的，我們先在 index.ejs 中寫一些 form 表單：

<!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 兩個資料，頁面效果如下：

接下來我們看一下 app.js 

 1 //引入 koa模組
 2 const Koa = require('koa');
 3 const Router = require('koa-router');
 4 const views = require('koa-views');
 5 
 6 //例項化
 7 const app = new Koa();
 8 const router = new Router();
 9 
10 //配置模板引擎中介軟體
11 app.use(views('views', {
12     extension: 'ejs'
13 }));
14 
15 router.get('/', async (ctx) => {
16     await ctx.render('index', {});
17 });
18 
19 router.post('/add', async (ctx) => {
20     getData = function () {
21         return new Promise(function (resolve, reject) {
22             try {
23                 let str = '';
24                 ctx.req.on('data', function (chunk) {
25                     str += chunk;
26                 });
27                 ctx.req.on('end', function (chunk) {
28                     resolve(str)
29                 })
30             } catch (err) {
31                 reject(err)
32             }
33         })
34     };
35     let data = await getData();
36     ctx.body = data;
37 });
38 
39 //啟動路由
40 app.use(router.routes());
41 app.use(router.allowedMethods());
42 
43 app.listen(3000);

在原有內容上，我們增加了一個 router.post("/add", ) 的路由，其中 "/add" 與 index.ejs 中 form 表單的 action 一致，我們通過非同步方式將獲取到的資料通過 str+ 將資料拼接到一塊，如果獲取資料錯誤則返回錯誤資訊，最後將資訊返回給頁面。

現在我們啟動專案，在頁面 index.ejs 中的 input 中分別輸入 admin 和 123456，然後點選 button 按鈕，結果如下：

從上面的頁面顯示效果說明我們已經成功的接收 post 資料並拼接完成返還給了前端頁面。

上面的 node 原生方式看起來還是很費事的，接下來我們看一下 koa-bodyparser 模組獲取 post 資料。

首先得下載這個包：

npm install koa-bodyparser --save

然後我們將 app.js 改為如下：

 1 //引入 koa模組
 2 const Koa = require('koa');
 3 const Router = require('koa-router');
 4 const views = require('koa-views');
 5 const bodyParser = require('koa-bodyparser');
 6 
 7 //例項化
 8 const app = new Koa();
 9 const router = new Router();
10 
11 //配置模板引擎中介軟體
12 app.use(views('views', {
13     extension: 'ejs'
14 }));
15 
16 //配置 koa-bodyparser 中介軟體
17 app.use(bodyParser());
18 
19 router.get('/', async (ctx) => {
20     await ctx.render('index', {});
21 });
22 
23 router.post('/add', async (ctx) => {
24     let data = ctx.request.body;
25     ctx.body = data;
26 });
27 
28 //啟動路由
29 app.use(router.routes());
30 app.use(router.allowedMethods());
31 
32 app.listen(3000);

我們先在頭部引入 koa-bodyparser 模組，然後新增 app.use(bodyParser()) 中介軟體，之後就可以通過 ctx.request.body 來獲取我們的資料了。

現在我們啟動專案，在頁面 index.ejs 中的 input 中分別輸入 admin 和 654321，然後點選 button 按鈕，結果如下：

從上面的頁面輸出結果我們可以看出我們不僅獲取到了 post 的請求資料，而且資料還被自動轉成了 json 格式資料。

 

相關文章