Node.js + Express FW でフォームの値を受け取る

BackEnd

今回は「Node.js + Express FWでクエリーパラメータを取得する」のスピンオフ記事を書きたいと思います!

ソースは流用するため、上げておきます。こんな感じ

おし、ほんならフォームの送信処理とフォームからの値を受け取る実装を作り込んでいきたいと思いまーす!

手順はこんな感じ

1:index.ejsにフォームの送信処理を加える

2:フォームの値を取得する処理をindex.jsに加える

これだけ笑

ではやってきます。

1;index.ejsにフォームの送信処理を加える

普通にHTMLなんで、問題ないですね。リクエスト先のコンテキストパスは「/next」として、messageをキーに入力した内容を送信してます

2:フォームの値を取得する処理をindex.jsに加える

では、次にサーバ側の実装に移ります。

ここで1つポイントがあって、それは「body-parser」というモジュールをインストールすることです。このモジュールはフォームを扱うために便利なものなんで使っちゃおう!

nom install –save body-parser

インストールが完了したら「index.js」の実装に移ろう

こんな感じ。

まず「body-parser」オブジェクトを用意します。

そのあとポイント1の部分。これはbody-parserオブジェクトが持つ「urlencoded」関数の引数に「{extended:false}」というわけわからんオブジェクトを渡してるんやが

一体何のためにかっていうと送信されたフォームの内容は(ていうかクエリーパラメータもそうなんやが)、英数字以外の文字列は%とかにエンコードされてサーバ側に送られる

そのエンコードされたbodyを返す働きをするのが、この「urlencoded」という関数だ

で、引数の{extended:false}ってのは、querystringを使ってエンコードすることを指定するもの

らしい!自分もよくわかってない(笑)

フォームを使うときは必須で書くものとして覚えておけばいいかな!

で次にフォーム送信された値を取得する部分がポイント2の箇所

リクエストオブジェクト内のbodyオブジェクト内に「index.ejs」のフォーム処理のmessageをキーに、入力された値がvalueとして入っている

あとは、それを変数に組み込んで「next.ejs」に渡しているって流れ。

あ、ちなみに、「next.ejs」に書いてあるaタグ要素は削除しておいてください。

link.hrefであったり、link.textがindex.jsから渡されないためエラーになります。

以上、スピンオフ記事でしたーーーー! bye!

コメント

タイトルとURLをコピーしました