ExpressJS-フォームデータ

フォームはWebの不可欠な部分です。私たちが訪問するほとんどすべてのウェブサイトは、私たちのために情報を送信または取得するフォームを提供します。フォームの使用を開始するには、最初に_body-parser_（JSONおよびurlエンコードデータの解析用）およびmulter（マルチパート/フォームデータの解析用）ミドルウェアをインストールします。

_body-parser_と_multer_をインストールするには、ターミナルに移動して使用します-

npm install --save body-parser multer

*index.js* ファイルの内容を次のコードに置き換えます-

var express = require('express');
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer();
var app = express();

app.get('/', function(req, res){
   res.render('form');
});

app.set('view engine', 'pug');
app.set('views', './views');

//for parsing application/json
app.use(bodyParser.json());

//for parsing application/xwww-
app.use(bodyParser.urlencoded({ extended: true }));
//form-urlencoded

//for parsing multipart/form-data
app.use(upload.array());
app.use(express.static('public'));

app.post('/', function(req, res){
   console.log(req.body);
   res.send("recieved your request!");
});
app.listen(3000);

bodyパーサーとmulterをインポートした後、jsonおよびx-www-form-urlencodedヘッダーリクエストの解析に body-parser を使用し、multipart/form-dataの解析に multer を使用します。

これをテストするためにhtmlフォームを作成しましょう。次のコードで form.pug と呼ばれる新しいビューを作成します-

html
html
   head
      title Form Tester
   body
      form(action = "/", method = "POST")
         div
            label(for = "say") Say:
            input(name = "say" value = "Hi")
         br
         div
            label(for = "to") To:
            input(name = "to" value = "Express forms")
         br
         button(type = "submit") Send my greetings

次を使用してサーバーを実行します。

nodemon index.js

ここでlocalhost：3000/に移動し、必要に応じてフォームに入力して送信します。次の応答が表示されます-

フォーム送信への応答

コンソールをご覧ください。次のスクリーンショットのように、JavaScriptオブジェクトとしてリクエストの本文が表示されます-

フォームのコンソール出力

*req.body* オブジェクトには、解析されたリクエスト本文が含まれます。 そのオブジェクトのフィールドを使用するには、通常のJSオブジェクトと同じように使用します。

これは、リクエストを送信するための最も推奨される方法です。他にも多くの方法がありますが、ここで説明することは重要ではありません。Expressアプリはこれらすべてのリクエストを同じ方法で処理するからです。リクエストを行うさまざまな方法の詳細については、https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_forms_through_JavaScript [this]ページをご覧ください。

Expressjs-form-data

ExpressJS-フォームデータ