最近想開始做一個自己包全端的項目，但對後端不夠熟練，所以想從頭開始完整、系統的學起 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 日
