Express - RestfulAPI 起手教學 3

上次我們介紹了 nodemondotenv 兩個好用的套件,幫助我們快速開發。今天這篇文章要介紹一個套件 -----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 的功能:

1
2
3
4
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 在運作的樣子。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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。如下:

1
2
3
4
5
6
7
8
9
10
11
12
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
"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 最多可以點五次,而你不用付出任何一塊錢,就能給我寫這篇文章的最大的回饋!