最近想開始做一個自己包全端的項目,但對後端不夠熟練,所以想從頭開始完整、系統的學起 Node.js (主要還是 Express 框架),並且會記錄下每天學習的筆記,順便也一同分享給大家,共同進步。
什麼是 Express
- 基於 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 中的日期,並且返回:
如果 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
託管靜態資源
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 測試請求
Postman 是一個可以模擬HTTP Request 的工具,除去直接用瀏覽器訪問之外,我們也可以用 POSTMAN 來測試請求以獲取響應結果。但你可能會好奇,既然瀏覽器可以直接訪問 API,為何還需要 POSTMAN?
我個人的理解為:在專案中,部分 API 並不是完全對外公開的,甚至有些應用所使用的 API 僅有公司內網可以訪問,有些是需要有帳號密碼登入後才可以訪問,代表需要有鑒權的這一過程。有些是登入後後端回傳 Token 給前端,用以判斷是否有權限呼叫 API,有些是用 session…等,看後端是如何去做的。除去授權以外,還有一些 headers 的設定和參數的傳遞並不是光靠瀏覽器訪問就能做到的,所以會需要用到 POSTMAN 這類型的工具。
創建請求及獲取響應
開啟 Postman 之後在上方選擇 Wordspace ,接著點擊「APIs」-「New」就可以新增請求:
這邊我們選擇「HTTP Request」
選擇 GET 請求,將剛剛寫好的 get user 連結填上後按「Send」就能測試請求了:
response 就是我們自己所寫的 json data:
- 解決 preact-router 資源請求路徑錯誤的問題 - 2022 年 6 月 24 日
- [楓之谷私服] 潮流轉蛋機 NPC 腳本優化 - 2022 年 6 月 19 日
- [楓之谷私服] 簡單的飛天椅子(坐騎)改法 v120 - 2022 年 6 月 19 日