ExpressJS - 表單資料

表單是網頁不可或缺的一部分。幾乎每個我們訪問的網站都提供表單，用於提交或獲取資訊。要開始使用表單，我們首先需要安裝`body-parser`（用於解析 JSON 和 url-encoded 資料）和 `multer`（用於解析 multipart/form-data）中介軟體。

要安裝`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-parser`和`multer`後，我們將使用`body-parser`解析 json 和 x-www-form-urlencoded 頭請求，而使用`multer`解析 multipart/form-data。

讓我們建立一個 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 應用程式將以相同的方式處理所有這些請求。要了解更多關於不同傳送請求的方法，請檢視此頁面。