0
0

More than 3 years have passed since last update.

express Form作成

Posted at

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>

実際の出力は下記のようになります。

スクリーンショット 2021-03-14 21.23.26.png

設定のポイントとしては、


action : データの送信先(受け取り側と一致するように)
method : 送信方法(今回はpost送信、受け取り側も一致するように)

name属性に設定されたものが
送信されるオブジェクトのkeyとなります。
出力結果(console.log(req.body))は下記のようになります。
[Object: null prototype] { name: 'test', age: '55' }


こちらのsubmitと設定されたボタンを押すことでPOST送信が実行されます。

後は、よしなにして頂ければということです。

以上、簡単にですがフォームの忘備録でした。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0