Express-RestfulApi起手教學3
By: 陳冠億 Kenny
Tags: Nodejs, Backend Development, JavaScript, Expressjs, Back End Development

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

body-parser使用

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

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

安裝body-parser

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

歡迎來我個人部落格參觀： https://kennychen-blog.herokuapp.com/