なんだかGoodVibes

日々の勉強メモです。

【Express入門】Body Parserを使ってみる

Node.js

フォームを作るときにとっても便利。
Body Parserを使ってみます。

まずは、インストールから。

npm install --save body-parser

インストールが完了したら早速サンプルです。
今回も以下のファイルを作成します。
- index.js
- index.ejs
- style.css

フォルダの配置などは以下の記事で説明していますので参考にしてください。

nandakagoodvibes.hatenablog.com

紹介するサンプルソースは、index.js、index.ejs です。
では、サンプルへ!

[index.js]

var express = require('express');
var ejs = require('ejs');
var bodyParser = require('body-parser');

var app = express();
app.engine('ejs', ejs.renderFile);
app.use(express.static('public'));

// 送信されたフォームの内容を変換して取得可能にする
app.use(bodyParser.urlencoded({extended:false}));

// ----- トップページ -----
app.get('/', (req, res) => {
    var msg = '送信サンプルです!<br>メッセージを書いてください。';
    res.render('index.ejs',
        {
            title:'Index',
            content:msg,
        });
});

// ----- POST送信処理 -----
app.post('/', (req, res) => {

    // <input type="text" name="message">で送信された値を使用する
    var msg = '送信サンプルです!<br>「' + req.body.message + '」と送信しました。';
    res.render('index.ejs',
        {
            title:'Index',
            content:msg
        })
})

var server = app.listen(ポート番号, () => {
    console.log('Server start!');
});

[index.ejs]

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type"
        content="text/html; charset=UTF=8">
    <title><%= title %></title>
    <link type="text/css" href="./style.css" rel="stylesheet">
</head>

<body>
    <head>
        <h1><%= title %></h1>
    </head>
    <div role="main">
        <p><%- content %></p>
        <form action="/" method="POST">
            <p><input type="text" name="message">
                <input type="submit" value="送信"></p>
        </form>
    </div>
</body>
</html>

非常に簡単ですね。
POSTで送信された値の取得はapp.post…での処理で取得することができます。