Node.js | 複数ページのルーティングとフォームのPOST送信

複数ページのルーティング

Node.jsアプリケーションで複数のページを扱う場合は、リクエストURLを解析し、表示するテンプレートへ対応付ける。共通レイアウトはtemplate.ejsに置き、各ページの本文はcontent1.ejsやcontent2.ejsのように分けておく。

基本の流れは、ルート表を用意し、url.parseでリクエストURLを解析して、その表からテンプレートを選ぶことになる。一致するルートがなければ404を返す。

var routes = {
  "/": "content1.ejs",
  "/content2": "content2.ejs"
};

var url_parts = url.parse(request.url);
var target = routes[url_parts.pathname];

ページ本文はfs.readFileで読み込み、EJSでレンダリングして共通テンプレートへ差し込む。これにより、複数ページで同じページ枠を共有しながら、本文だけを個別に管理できる。

フォームをPOSTで送信する

フォームの値を送信するには、content1.ejsにフォームを作成し、method="post"と受信先のactionを指定する。

<form method="post" action="/content3">
  <input type="text" name="idname">
  <input type="password" name="pass">
  <input type="submit">
</form>

送信先のページはcontent3.ejsなどの別テンプレートとして用意し、受け取った値を表示する。

<p>ID: <%= idname %></p>
<p>PASS: <%= pass %></p>

Node.jsではPOSTデータは分割して届くため、dataイベントで本文を集め、endイベントでquerystring.parseを使って解析する。

request.on("data", function(chunk) {
  body += chunk;
});

request.on("end", function() {
  var data = qs.parse(body);
  render(data);
});

GETアクセスとPOST送信は分けて処理する。GETではフォームを表示し、POSTではリクエスト本文を読み取って、送信された値を使って結果ページを描画する。この形が、Expressを使わない簡単な複数ページNode.jsアプリケーションの基本になる。