2012年11月28日水曜日

[node.js + express]フォームで送信されたデータにアクセスする

実行環境
OS Mac OS X 10.8.2
node v.0.8.3
express v3.0.3

bodyParser ミドルウェア


クライアントから express アプリケーションへ HTTP の POST メソッドでデータ送信した場合、( 正確には Content-Type が application/x-www-form-urlencodedか multipart/form-data のリクエストを送信した場合) リクエストが bodyParser ミドルウェアを経由すると、req.body オブジェクトにメッセージボディの値が追加されます。

また、メッセージボディの各パラメータ名が JavaScript のオブジェクトとして解釈できる場合は、オブジェクトにパースしてから req.body に追加してくれます。
もちろん、配列やネストしたオブジェクトでも問題なくパースしてくれます。

例として、entry というリソースを生成するフォームを jade で作成しました。

_form.jade
form(method="POST", action="/entries")

  label お名前
    input(type="text", name="entry[author][name]", id="entry[author][name]")
  br
  label タイトル 
    input(type="text", name="entry[title]", id="entry[title]")
  br
  label 本文 
    textarea(name="entry[body]", id="entry[body]")
  br
  lebel カテゴリ(複数可)
    input(type="checkbox", name="entry[category][]", value="diary")
    | 日記
    input(type="checkbox", name="entry[category][]", value="memo")
    | メモ 
  br
  input(type="submit")

上記フォームからのリクエストが bodyParser ミドルウェアを経由すると、 req.body.entry は下記のようなオブジェクトになります。

{ entry:
   { author: { name: 'takeshi' },
     title: 'test',
     body: 'This is test.',
     category: [ 'diary', 'memo' ] 
   }
}

関連性のある値をまとめることで、コードの可読性が上がるとともに、新しいオブジェクトを生成する際など、以下のような簡潔な記述が可能となります。

app.js
app.use(express.bodyParser());

var Entry = require('./models').Entry; 
app.post('/entries', function(req, res){

  //mongoose で Entry オブジェクトを生成
  var new_entry = new Entry(req.body.entry);
  new_entry.save(function(err){
    res.redirect('/entries');
  });
})


まとめ

  • bodyParser ミドルウェアを使うと、 req.body にリクエストボディの値が追加される。
  • リクエストボディのパラメータ名を JavaScript のオブジェクトとして解釈できる値にすると、オブジェクトにパースして req.body に追加してくれる。

0 件のコメント:

コメントを投稿