Package.json のdependencies
"dependencies": {
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"ejs": "~2.6.1",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"morgan": "~1.9.1"
}
expressのForm作成について
expressで入力フォームを(ログイン、新規登録)作成する際にform入力を利用しました。
expressを用いたフォーム作成の忘備録を残します。
参考サイト:
Node.js + Express で 登録画面 を作る
Node.js+Expressでpostを使う!
Express v4.xでJSONのリクエスト/レスポンスを取得する正しい方法
フォーム取得側の設定について
POSTのRequestの取得について
今まではbaby-parserをインストールして対応していましたが、現在はExpress本体に用意されているので追加でインストールは不要です。(4.x系で対応)
const express = require('express')
const app = express()
app.use(express.json())
app.post('/', function (req, res) {
console.log(req.body);
res.send('Got a POST request')
})
上記内容を記述しておくことで、POSTでの"req.body"でJSON受け取りが可能です。
フォームのejsについて
<form action="/" method="post">
<input type="text" name="name" placeholder="name">
<input type="text" name="age" placeholder="age">
<input type="submit" value="送信!">
</form>
実際の出力は下記のようになります。
設定のポイントとしては、
action : データの送信先(受け取り側と一致するように)
method : 送信方法(今回はpost送信、受け取り側も一致するように)
name属性に設定されたものが
送信されるオブジェクトのkeyとなります。
出力結果(console.log(req.body))は下記のようになります。
[Object: null prototype] { name: 'test', age: '55' }
こちらのsubmitと設定されたボタンを押すことでPOST送信が実行されます。
後は、よしなにして頂ければということです。
以上、簡単にですがフォームの忘備録でした。