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('請求成功!');
});
get user Express學習筆記(1) - 初識 Express.js

獲取 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 這類型的工具。

創建請求及獲取響應

開啟 Postman 之後在上方選擇 Wordspace ,接著點擊「APIs」-「New」就可以新增請求:

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

這邊我們選擇「HTTP Request

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

選擇 GET 請求,將剛剛寫好的 get user 連結填上後按「Send」就能測試請求了:

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

response 就是我們自己所寫的 json data:

POSTMAN 4 Express學習筆記(1) - 初識 Express.js
0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論