４. Koa2を使ってWebページを作成しよう ~koa-bodyでpostパラメーターを取得~

記事一覧

• 第一回 Koa2の環境を構築する
• 第二回 Hello World!! を表示する
• 第三回 koa-routerでGETパラメーターを取得する

概要

当ページでは、koa-bodyを利用してPOSTパラメーターの取得を行います。
また、前回の続きとして進めて行くので、上手くいかない場合は以前の記事をご覧ください。

koa-bodyとは

formなどで送信されたリクエストを取扱うミドルウェアで、multipartやjson形式のデータも扱うことができる特徴があります。
https://github.com/dlau/koa-body

インストール

コンソール上で以下のコマンドを入力
npm install koa-body

導入

koa-bodyを利用するために、/index.jsを以下のように修正してください

index.js

const path = require('path');
const Koa = require('koa');
const render = require('koa-ejs');
const koaBody = require('koa-body');

const app = new Koa();
render(app, {
   root: path.join(__dirname, 'view'),
   layout: 'layout',
   viewExt: 'ejs',
   cache: false
});

app.use(koaBody());

// POSTの送信を行うページをルーティングに追加
const postRequestRouter = require('./router/post-request');
app.use(postRequestRouter.routes());
app.use(postRequestRouter.allowedMethods());

// その他routerの記述は省略

app.listen(5000);

次に、POSTリクエストをクライアントから送信するために、送信フォームを作成します。

送信フォームを作成

/view/post-request.ejsを作成し、以下の記述を追加してください。

post-request.ejs

<form action="/post-request" method="post">
   <input type="text" name="post-text">
   <input type="submit" value="送信">
</form>

次に、今作成したejsをレンダリングする処理を作成します。
/router/post-request.jsを作成し、以下の記述を追加してください。

post-request.js

const Router = require('koa-router');
const router = new Router();

router.get('/post-request', async (ctx) => {
   // GETリクエスト時の処理
   console.log('GETリクエストを受け付けました。')
   await ctx.render('post-request');
});

router.post('/post-request', async (ctx) => {
   // POSTリクエスト時の処理
   // POSTされた値はctx.request.bodyに連想配列で格納される
   console.log('POSTリクエストを受け付けました。テキスト: ' + ctx.request.body['post-text']);
   await ctx.render('post-request');
});

module.exports = router;

以下のコマンドでサーバーとして起動し、localhost:5000/post-request にブラウザでアクセスしてください。

npm start

すると、 アドレスバーでのアクセス時にはGETが、送信ボタンが押された時にはPOSTが呼ばれており、POST時は入力した値を取得できていることがコンソール上で確認できます。

次に、これをブラウザの画面上で表示できるように、ejsファイルを修正します。
ejsの解説は前回の記事に書いているので、こちらをご覧ください。

POSTパラメーターをブラウザ画面に表示

/router/post-request.jsを以下のように修正してください。

post-request.js

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

router.post('/post-request', async (ctx) => {
   let text = ctx.request.body['post-text'];
   await ctx.render('post-request', {postText: text});
});

/view/post-request.ejsに以下の記述を追加してください。

post-request.ejs

<% if(typeof postText === "undefined"){ %>
   <p>GETリクエストを受け付けました。</p>
<% } else { %>
   <p>POSTリクエストを受け付けました。<%= postText %></p>
<% } %>

以上でPOSTパラメーターの取得と表示は完了です。

最後に

次の投稿では、MySQLへの接続とログイン機能を実装していく予定です。