記事一覧
概要
当ページでは、koa-bodyを利用してPOSTパラメーターの取得を行います。
また、前回の続きとして進めて行くので、上手くいかない場合は以前の記事をご覧ください。
koa-bodyとは
formなどで送信されたリクエストを取扱うミドルウェアで、multipartやjson形式のデータも扱うことができる特徴があります。
https://github.com/dlau/koa-body
インストール
コンソール上で以下のコマンドを入力npm install koa-body
導入
koa-bodyを利用するために、/index.jsを以下のように修正してください
constpath=require('path');constKoa=require('koa');constrender=require('koa-ejs');constkoaBody=require('koa-body');constapp=newKoa();render(app,{root:path.join(__dirname,'view'),layout:'layout',viewExt:'ejs',cache:false});app.use(koaBody());// POSTの送信を行うページをルーティングに追加constpostRequestRouter=require('./router/post-request');app.use(postRequestRouter.routes());app.use(postRequestRouter.allowedMethods());// その他routerの記述は省略app.listen(5000);次に、POSTリクエストをクライアントから送信するために、送信フォームを作成します。
送信フォームを作成
/view/post-request.ejsを作成し、以下の記述を追加してください。
<form action="/post-request" method="post">
<input type="text" name="post-text">
<input type="submit" value="送信">
</form>
次に、今作成したejsをレンダリングする処理を作成します。/router/get-request.jsを作成し、以下の記述を追加してください。
constRouter=require('koa-router');constrouter=newRouter();router.get('/post-request',async(ctx)=>{// GETリクエスト時の処理console.log('GETリクエストを受け付けました。')awaitctx.render('post-request');});router.post('/post-request',async(ctx)=>{// POSTリクエスト時の処理// POSTされた値はctx.request.bodyに連想配列で格納されるconsole.log('POSTリクエストを受け付けました。テキスト: '+ctx.request.body['post-text']);awaitctx.render('post-request');});module.exports=router;以下のコマンドでサーバーとして起動し、localhost:5000/post-requestにブラウザでアクセスしてください。
npm start
すると、 アドレスバーでのアクセス時にはGETが、送信ボタンが押された時にはPOSTが呼ばれており、POST時は入力した値を取得できていることがコンソール上で確認できます。
次に、これをブラウザの画面上で表示できるように、ejsファイルを修正します。
ejsの解説は前回の記事に書いているので、こちらをご覧ください。
POSTパラメーターをブラウザ画面に表示
/router/post-request.jsを以下のように修正してください。
router.get('/post-request',async(ctx)=>{awaitctx.render('post-request');});router.post('/post-request',async(ctx)=>{lettext=ctx.request.body['post-text'];awaitctx.render('post-request',{postText:text});});/view/post-request.ejsに以下の記述を追加してください。
<% if(typeof postText === "undefined"){ %>
<p>GETリクエストを受け付けました。</p>
<% } else { %>
<p>POSTリクエストを受け付けました。<%= postText %></p>
<% } %>
以上でPOSTパラメーターの取得と表示は完了です。
最後に
次の投稿では、MySQLへの接続とログイン機能を実装していく予定です。