『現場で運用する力を身につける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にアクセスします。
名前を入力します。
送信ボタンを押します。
よし、成功。