Express學習筆記(1) - 初識 Express.js

最近想開始做一個自己包全端的項目，但對後端不夠熟練，所以想從頭開始完整、系統的學起 Node.js (主要還是 Express 框架)，並且會記錄下每天學習的筆記，順便也一同分享給大家，共同進步。

什麼是 Express

https://expressjs.com/

基於 Node.js 平台快速、開放、極簡的 Web 開發框架。
作用和 Node.js 內置的 http 模組類似，專門用來創建 Web 伺服器的。
本質就是 npm 上的第三方庫，提供快速創建 Web 伺服器的便捷方法。

為什麼不用 http 模組，要用 Express？

http內置模組用起來複雜且開發效率低，Express是基於內置的 http 模組進一步封裝出來的，能夠極大的提高開發效率。

http 內置模組和 Express 之間的關係

類似瀏覽器中 Web API 和 jQuery 的關係，後者是基於前者進一步封裝出來的。

Express 用處

對前端開發者來說最常見的兩種伺服器為：

Web網站伺服器
API 接口伺服器

Express 的基本使用

安裝 Express

npm init // 創建 package.json 檔

npm install express --save // 安裝 Express

創建基本的 Web 伺服器

const express = require('express')
// 創建伺服器
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})
// 啟動 web 伺服器
app.listen(port, () => {
  console.log(`Example app listening on port http://127.0.0.1:${port}`)
})

執行程式

npm i nodemon // 安裝 nodemon
nodemon app.js // 啟動伺服器

監聽 GET 請求

通過 app.get() 來監聽 client 端的 GET 請求：

參數1：client 端請求的 URL 地址
參數2：請求對應的處理函數
- req：請求物件（包含與請求相關的屬性和方法）
- res：響應物件（包含與響應相關的屬性和方法）

app.get("/user", (req, res) => {
 //處理函數;
});

監聽 POST 請求

通過 app.post() 來監聽 client 端的 POST 請求：

參數1：client 端請求的 URL 地址
參數2：請求對應的處理函數
- req：請求物件（包含與請求相關的屬性和方法）
- res：響應物件（包含與響應相關的屬性和方法）

app.post("/user", (req, res) => {
  //處理函數
});

把內容響應給 Client 端

可以通過 res.send() 方法把處理好的內容發送給客戶端：

app.get("/user", (req, res) => {
  res.send({ name: "王小明", age: 25, gender: "男" });
});

app.post("/user", (req, res) => {
  res.send('請求成功!');
});

獲取 URL 中的查詢參數

通過 req.query 物件可以訪問到 client 端通過查詢字串形式發送到 server 的參數：

app.get("/user", (req, res) => {
  const { date } = req.query;
  res.send(`今天是${date}`);
});

請求時在 url 後面加上 ?date=內容 ，內容代表 date 的值，例如：http://127.0.0.1:3000/user?date=2022-03-25

這樣 server 端就能獲取 URL 中的日期，並且返回：

POSTMAN 5 Express學習筆記(1) - 初識 Express.js

如果 Url 中什麼參數也沒給，那麼 req.query 預設會是空物件。

獲取 URL 中的動態參數

通過 req.params 物件可以訪問到 URL 中，通過 : 匹配到的動態參數：

比較常見的例子在於 CRUD，例如要獲取 id 為 1 的 book 可以這樣去寫

app.get("/book/:id", (req, res) => {
  const { id } = req.params;
  res.send(`搜索了 id 為 ${id} 的書`);
});

app.post("/book/:name", (req, res) => {
  const { name } = req.params;
  res.send(`新增了一本書，這本書的名稱為：${name}`);
});

app.put("/book/:id", (req, res) => {
  const { id } = req.params;
  res.send(`修改了 id 為 ${id} 的書`);
});

app.delete("/book/:id", (req, res) => {
  const { id } = req.params;
  res.send(`刪除了 id

dynamic params Express學習筆記(1) - 初識 Express.js

託管靜態資源

express.static()

Express 提供了一個函數叫 express.static()，我們可以藉由它創建一個靜態資源伺服器，例如可以通過下方程式碼將 public 資料夾底下的圖片、CSS、Javascript 檔案對外開放。

app.use(express.static('public')); // 將 public 資料夾底下的資源開放訪問, public 可以替換成任意路徑

所以我們只需要在 node.js 的資料夾中新增 public 資料夾，並在裡面新增 test.html，就能透過網址 http://127.0.0.1:3000/test.html 訪問 test.html。

注意：如果需要託管多個靜態資源資料夾，可以多次調用 express.static 這個函數，但是調用順序會根據在程式碼中的前後順序而定。

補充：使用 POSTMAN 測試請求

https://www.postman.com/

Postman 是一個可以模擬HTTP Request 的工具，除去直接用瀏覽器訪問之外，我們也可以用 POSTMAN 來測試請求以獲取響應結果。但你可能會好奇，既然瀏覽器可以直接訪問 API，為何還需要 POSTMAN？

我個人的理解為：在專案中，部分 API 並不是完全對外公開的，甚至有些應用所使用的 API 僅有公司內網可以訪問，有些是需要有帳號密碼登入後才可以訪問，代表需要有鑒權的這一過程。有些是登入後後端回傳 Token 給前端，用以判斷是否有權限呼叫 API，有些是用 session…等，看後端是如何去做的。除去授權以外，還有一些 headers 的設定和參數的傳遞並不是光靠瀏覽器訪問就能做到的，所以會需要用到 POSTMAN 這類型的工具。