Express - RestfulAPI 起手教學 3

發表於 2019-09-18 更新於 2024-04-28 分類於 Express建立RestfulAPI教學 Disqus：文章字數： 3.3k 所需閱讀時間 ≈ 6 分鐘

上次我們介紹了 nodemon、dotenv 兩個好用的套件，幫助我們快速開發。今天這篇文章要介紹一個套件 -----body-parser 使用方式及 express 框架中 middleware 的概念。

body-parser 使用

現在專案裡面只有一個路由，且是採用 GET METHOD，但我們要知道原本的 express 框架，並無法接收 POST METHOD 傳過來的參數的。在舊版的 express 框架是會自動處理這件事情，但現在新版的把處理這件事情的套件拿掉了，需要我們自己裝套件來完成這件事情。

而這套鍵也就是 body-parser，它可以幫助我們解析 POST METHOD 所帶來過來的參數。

安裝 body-parser

1	npm install body-parser

body-parser 啟用

安裝成功之後，利用以下方式啟動 body-parser 的功能：

const bodyParser = require('body-parser');
const express = require('express');
const app = express();
app.use(bodyParser.json());

body-parser 套件主要可以解析兩種方式的 POST METHOD 帶過來的參數：

bodyParser.urlencoded

也就是最常見的表單方式。
bodyParser.json

專門用來接收 json 格式，也就是最常用在開發 restful 的格式。

更多的 body-parser 的功能，可參觀官方的 document：https://github.com/expressjs/body-parser

而在這邊，我們是要開發 restful api，所以只須採用第二種的功能就可以了。而這個 body-parser 功能是需要放在我們叫做 middleware 層上，使得每個路由被拜訪前，都會經過這個 middleware，由這個 middleware 先進行參數上的解析，最後在拜訪我們的路由。

使用 middleware

何謂 middleware？

在 express 的框架中，middleware 可以說是無處不在，就連整個 express 的運作方式，你也可以看成是多個 middleware 在運作的樣子。

例如我們看以下的程式碼：

const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.json());

app.post('/postTesting', (req, res, next) => {
    res.json(req.body);
});

app.listen(port, function () {
    console.log('Express app started on ' + port);
});

app.use，這個功用就是說建立一個 middleware，而我們可以選擇在 middleware 放置怎樣的 function，例如我們放置 body-parser 套件並啟用解析 json 格式的功能。而之後的程式碼是撰寫路由的 middleware，其 middleware 裡面的內容因應路由的 path，來作想對應的 function。

而因為開啟了 body-parser 套件的功能，因此我們透過 req.body，就能正確取到 POST 帶過來的參數。

但是，特別要注意的就是，這個是有順序性的。也就是假設我們把 **app.use(bodyParser.json())，放到撰寫路由程式碼下面的話，會發現當去拜訪 /postTesting** 的時候，response 的內容為空。因為它無法解析 req.body 是什麼，也就是不知道你 POST 帶過來的參數是甚麼。

通常 middleware 使用方式

所以如果是一般全局的套件設定，比如說像 body-parser，因為我們整個專案就是 restful api，所以一定是每個路由如果用到了 request body 的方式，就一定會需要有 body-parser 的功能來解析 json。我們就會在路由程式碼前面就寫 app.use，才能讓每個路由前面擁有 middleware 去做前段的解析。

當然其實 middleware 的位置，可以根據需求去做改變，我也可以在特定路由上，再啟動我想要放置的 middleware 的 function。如下：

const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const jsonParser = bodyParser.json();

app.post('/postTesting', jsonParser, (req, res, next) => {
    res.json(req.body);
});

app.listen(port, function () {
    console.log('Express app started on ' + port);
});

這樣的話就只有 **/postTesting** 會有解析 json 參數的功能而已。

整理一下現在的 Code!

app.js：

require('dotenv').config();
const bodyParser = require('body-parser');

const express = require('express');
const app = express();
const port = process.env.PORT;

app.use(bodyParser.json());

app.post('/postTesting', (req, res, next) => {
    res.json(req.body);
});

app.get('/', function (req, res, next) {
    res.send('Hello World');
});

app.listen(port, function () {
    console.log('Express app started on ' + port);
});

這邊主要就是示範了 POST METHOD 的路由，如何透過 body-parser 的套件來解析 json 參數。以及用到了 express 框架中，常用的 middleware 的設計方式。

package.json：

{
  "name": "node-rest-shop",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "dotenv": "^8.0.0",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^1.19.1"
  }
}

總結

下一個階段，可以來試試看如何連接資料庫，並且使用哪些 ORM 套件。

詳細的 Source Code 可參考：https://github.com/KennyChenFight/node-rest-shop/tree/section3

最後最後！請聽我一言！

如果你還沒有註冊 Like Coin，你可以在文章最下方看到 Like 的按鈕，點下去後即可申請帳號，透過申請帳號後可以幫我的文章按下 Like，而 Like 最多可以點五次，而你不用付出任何一塊錢，就能給我寫這篇文章的最大的回饋！