Node.js & Expressでフォーム送信プログラムを作る

『現場で運用する力を身につけるNode.jsの教科書』にフォーム送信プログラムの例があるんですが、 Express 3でのやり方らしく、そっくりそのまま打ち込んでも動きません。

そこで、勉強がてらExpress 4で動くようにしてみようと思います。

ここで使用するExpressのバージョンは以下のとおりです。

$ express --version
4.16.1

プロジェクトの作成

$ express mypost

以降、プロジェクトルートディレクトリをmypostとする。

コーディング

1. vies/index.jspの編集
フォーム部分を作ります。

extends layout

block content
  h1= title
  p Welcome to #{title}
  p= msg
  form(method='post', actoin='/')
    input(type='text', name='text1')
    input(type='submit')

2. routes/inex_post.jsの作成
router.postメソッドにパスと処理を指定します。

var express = require('express');
var router = express.Router();

router.post('/', function(req, res, next) {
    res.render('index', {
        title: '送信結果',
        msg: 'こんにちは、' + req.body.text1 + 'さん!'
    });
});

module.exports = router;

3. app.jsの変更
/へPOSTアクセスした時の処理を追加します。

// 〜省略〜
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var indexPostRouter = require('./routes/index_post'); // 追加
// 〜省略〜
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.post('/', indexPostRouter); // 追加

実行結果

アプリを起動します。

$ npm start

ブラウザでhttp://localhost:3000にアクセスします。

名前を入力します。

送信ボタンを押します。

よし、成功。