上個章節簡單的了解NodeJS要如何安裝、啟動、監聽,以及做檔案操作存取
這個章節要延續上章ChatGPT提供給我們的學習關鍵字
來討論「Express」和「RESTful API 」
當然可以!讓我用簡單易懂的方式介紹 Node.js 中的 Express。
Express 是一個 Node.js 的框架,它能夠幫助你建立 Web 應用程式,提供了許多實用的功能和方法,讓開發過程更為簡單和高效。
以下是一個簡單的例子來說明如何使用 Express:
首先,確保你已經安裝了 Node.js 和 npm(Node.js 的套件管理器)。
- 安裝 Express:
打開終端機,輸入以下指令來安裝 Express:
npm install express
- 建立一個基本的 Express 應用程式:
在你的專案目錄下,創建一個
app.js
檔案(或者你可以用其他名字,只要保證副檔名是.js
)。// 引入 Express 模組 import express from 'express'; // 建立一個 Express 應用程式 const app = express(); // 設定一個路由 app.get('/', (req, res) => { res.send('歡迎來到我的網站!'); }); // 監聽指定的埠號(例如 3000) app.listen(3000, () => { console.log('伺服器已啟動,監聽埠號 3000'); });
- 執行應用程式:
在終端機中輸入以下指令:
node app.js
這樣你的 Express 應用程式就會開始運行在本地伺服器上。
這只是一個簡單的開始,Express 還提供了許多其他功能,比如處理複雜的路由、處理表單、處理資料庫等等。不過現在,你可以開始以這個基本範例來進一步學習和發展你的應用程式。如果你有任何問題或需要進一步的幫助,隨時告訴我!
在 Express 中,處理路由非常簡單且直觀。路由指的是應用程式如何回應特定的 HTTP 請求(GET、POST、PUT、DELETE 等)和網址。
以下是一個簡單的例子來展示如何在 Express 中處理路由:
假設你有一個簡單的應用程式,需要有兩個不同的路由:一個用於首頁,一個用於顯示關於頁面。
import express from 'express'; const app = express(); // 處理首頁路由 app.get('/', (req, res) => { res.send('歡迎來到首頁!'); }); // 處理關於頁面路由 app.get('/about', (req, res) => { res.send('這是關於我們的頁面。'); }); app.listen(3000, () => { console.log('伺服器已啟動,監聽埠號 3000'); });
這裡使用了
app.get()
方法,它表示當收到一個 GET 請求時,該如何處理。第一個參數是路徑,例如'/'
表示首頁,'/about'
表示關於頁面。當你在瀏覽器中輸入
http://localhost:3000/
時,Express 會回應並顯示 "歡迎來到首頁!"。當你輸入http://localhost:3000/about
時,它會回應 "這是關於我們的頁面。"。你也可以使用
app.post()
、app.put()
、app.delete()
等方法來處理不同類型的 HTTP 請求。這只是一個簡單的範例,你可以在實際開發中根據需要進一步擴展和處理不同的路由。如果你有其他問題或需要進一步的幫助,隨時告訴我!
當然,我會針對 Express 的基本語法進行詳細的說明與教學,以確保你能夠清楚地理解如何使用它來建立網頁應用程式。
引入 Express 模組:
在你的應用程式開頭,你需要引入 Express 模組。這樣才能使用 Express 提供的功能。
import express from 'express'; const app = express();
建立路由:
路由是指如何回應特定的 HTTP 請求和網址。Express 提供了多種方法來定義路由。
使用
app.get()
處理 GET 請求:app.get('/', (req, res) => { res.send('歡迎來到首頁!'); });
使用
app.post()
處理 POST 請求:app.post('/create', (req, res) => { // 在這裡處理 POST 請求 });
使用
app.put()
處理 PUT 請求:app.put('/update/:id', (req, res) => { // 在這裡處理 PUT 請求 });
使用
app.delete()
處理 DELETE 請求:app.delete('/delete/:id', (req, res) => { // 在這裡處理 DELETE 請求 });
注意,這裡的
req
是指代表請求的物件,res
則代表回應的物件。回應:
使用
res.send()
方法來回應請求,你可以傳遞字串、HTML、JSON 或其他資料。app.get('/', (req, res) => { res.send('歡迎來到首頁!'); });
靜態檔案服務:
使用
express.static()
中介軟體可以讓你提供靜態檔案,如 CSS、圖片等。app.use(express.static('public'));
這裡假設你有一個
public
資料夾,裡面包含了你的靜態檔案。啟動伺服器:
最後,使用
app.listen()
方法來啟動伺服器。app.listen(3000, () => { console.log('伺服器已啟動,監聽埠號 3000'); });
這樣你的 Express 應用程式就會在本地伺服器上運行。
這些是 Express 的基本語法,你可以進一步學習如何處理中間件、錯誤處理、資料庫連接等進階主題。如果你對某一個特定的功能或概念有疑問,歡迎隨時提問!
所以Express就是協助我們啟動伺服器、監聽所有發過來的請求
並針對發過來的網址,也就是路由進行解析,去做出對應的反應
ChatGPT說我們可以進一步學習一些進階主題,看看他要介紹些什麼
當你熟悉了 Express 的基本語法後,可以開始學習一些進階的主題,讓你更有效地建立網頁應用程式。以下是一些進階主題的教學:
中間件(Middleware):
中間件是 Express 的一個重要概念,它可以用來處理請求和回應。你可以使用
app.use()
來加載中間件。例如,使用中間件來處理日誌、驗證、授權等:// 日誌中間件 app.use((req, res, next) => { console.log(`收到請求:${req.method} ${req.url}`); next(); }); // 自定義中間件 app.use((req, res, next) => { // 在這裡進行驗證或授權 if (authenticated) { next(); } else { res.status(403).send('未授權'); } });
路由參數:
Express 支援路由參數,你可以在路由中使用冒號(
:
)定義參數,然後在路由處理函數中獲取它們。app.get('/user/:id', (req, res) => { const userId = req.params.id; // 使用 userId 進行操作 });
模板引擎:
如果你想動態生成 HTML,可以使用模板引擎,如 EJS、Handlebars 或 Pug。首先,安裝一個模板引擎,然後設定 Express 使用它:
// 安裝 EJS 模板引擎 npm install ejs // 設定 Express 使用 EJS app.set('view engine', 'ejs');
然後,你可以使用
res.render()
方法來呈現模板:app.get('/user/:id', (req, res) => { const user = getUserById(req.params.id); res.render('user-profile', { user }); });
資料庫連接:
Express 應用程式通常需要與資料庫進行交互。你可以使用資料庫套件,如 Mongoose(用於 MongoDB)或 Sequelize(用於 SQL 數據庫),來建立連接並操作資料庫。
// 以 Mongoose 為例 const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/mydb');
API 開發:
如果你的 Express 應用程式是用來建立 RESTful API,你可以使用
app.get()
、app.post()
等方法來處理 API 請求,並返回 JSON 數據。app.get('/api/users', (req, res) => { // 獲取所有用戶數據 res.json(users); });
錯誤處理:
學習如何在 Express 中有效地處理錯誤非常重要。你可以使用中間件來捕獲錯誤並返回適當的錯誤狀態碼。
app.use((err, req, res, next) => { console.error(err); res.status(500).send('內部錯誤'); });
這些是 Express 的進階主題,它們可以幫助你建立更複雜和功能豐富的應用程式。根據你的需求,你可以深入研究這些主題中的任何一個,以提高你的 Express 應用程式開發技能。如果你有任何具體的問題或需要更深入的指導,請隨時提問。
粗略了解以上內容之後,再來要討論API的開發部分
過往擔任前端時只負責「串接API」,發送請求到API伺服器,然後接收回傳的資料
今天我們要來擔任API伺服器的角色,
接收發送過來的請求,處理之後回覆該請求
上面的Express 基本上很良好的幫我們解析了請求,也提供回傳結果的語法
甚至還有錯誤處理、中間件&日誌處理等等
那麼從頭來了解API,以及ChatGPT所提到的「RESTful API」是什麼
當然,我會提供詳細的介紹和教學。
API 是什麼?
API (Application Programming Interface) 是一組定義,允許軟體應用程式之間進行溝通和互動。它定義了不同軟體組件之間的通訊協定,並規定了如何使用這些組件。API 可以讓不同的軟體系統相互溝通,使它們可以共同工作。
RESTful API 是什麼?
RESTful API 是一種符合 REST (Representational State Transfer) 設計原則的 API。REST 是一種設計風格,用於建立可擴展的、分佈式的網路應用程式。RESTful API 的設計風格強調了資源的獨特識別、狀態和操作。
以下是 RESTful API 的一些重要原則:
- 資源(Resources):在 RESTful API 中,所有的數據或功能都被視為資源。每個資源都有一個唯一的識別符(URL)。
- 表現(Representation):資源的狀態以及資源之間的關係可以通過表現來表示,通常以 JSON 或 XML 格式。
- 狀態無關(Stateless):每一個請求都包含了所有必要的資訊,因此伺服器不需要保留先前的狀態。
- 統一接口(Uniform Interface):RESTful API 提供了統一的方式來訪問和操作資源,包括 URI 結構、請求方法(GET、POST、PUT、DELETE 等)以及回應格式。
- 無狀態通訊(Stateless Communication):每一個請求都包含了所有必要的資訊,因此伺服器不需要保留先前的狀態。
RESTful API 的基本操作:
- GET:用於從伺服器獲取資源。
- POST:用於在伺服器上創建新的資源。
- PUT:用於更新現有的資源。
- DELETE:用於刪除現有的資源。
如何設計一個 RESTful API?
以下是設計 RESTful API 的一些建議:
- 使用清晰的資源命名:URL 應該明確地指示資源的名稱,例如
/users
用於獲取所有使用者。- 使用請求方法:使用正確的 HTTP 請求方法來執行操作,如 GET 用於獲取資源,POST 用於創建新資源,PUT 用於更新資源,DELETE 用於刪除資源。
- 使用適當的狀態碼:將適當的 HTTP 狀態碼返回給客戶端,以指示操作的結果(例如 200 表示成功,404 表示資源未找到,500 表示伺服器錯誤等)。
- 提供合適的錯誤訊息:當發生錯誤時,應該提供清晰明確的錯誤訊息,幫助客戶端理解問題所在。
- 版本控制:在 API 的 URL 中包含版本號,以確保舊版本的 API 仍然可以運作,同時也允許引入新功能。
- 使用安全性措施:使用 HTTPS 來保護通信,並實施適當的驗證和授權機制,以確保只有授權的用戶可以訪問資源。
如果你想建立一個 RESTful API,你可以使用 Express 來快速搭建伺服器,並根據上述原則來設計你的 API 結構。如果你需要更具體的範例或教學,請隨時提問!
當你已經安裝好 Express,你可以開始建立 RESTful API。以下是一個簡單的範例,展示如何建立一個帶有基本 CRUD(Create, Read, Update, Delete)操作的 RESTful API。我們以一個用戶管理系統為例。
首先,確保你已經安裝了 Express:
npm install express
接下來,我們將建立一個 Express 應用程式並實現 RESTful API:
import express from 'express'; const app = express(); app.use(express.json()); // 使用 JSON 解析中介軟體 const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }, ]; // GET:獲取所有用戶 app.get('/users', (req, res) => { res.json(users); }); // GET:獲取特定用戶 app.get('/users/:id', (req, res) => { const userId = parseInt(req.params.id); const user = users.find((u) => u.id === userId); if (user) { res.json(user); } else { res.status(404).json({ error: '用戶未找到' }); } }); // POST:創建新用戶 app.post('/users', (req, res) => { const newUser = req.body; users.push(newUser); res.status(201).json(newUser); }); // PUT:更新用戶資訊 app.put('/users/:id', (req, res) => { const userId = parseInt(req.params.id); const user = users.find((u) => u.id === userId); if (user) { const updatedUser = req.body; user.name = updatedUser.name; res.json(user); } else { res.status(404).json({ error: '用戶未找到' }); } }); // DELETE:刪除用戶 app.delete('/users/:id', (req, res) => { const userId = parseInt(req.params.id); const userIndex = users.findIndex((u) => u.id === userId); if (userIndex !== -1) { users.splice(userIndex, 1); res.json({ message: '用戶已刪除' }); } else { res.status(404).json({ error: '用戶未找到' }); } }); const port = 3000; app.listen(port, () => { console.log(`伺服器已啟動,監聽埠號 ${port}`); });
在這個範例中,我們建立了以下路由:
GET /users
:獲取所有用戶。GET /users/:id
:獲取特定用戶。POST /users
:創建新用戶。PUT /users/:id
:更新用戶資訊。DELETE /users/:id
:刪除用戶。我們使用
express.json()
中介軟體來解析 JSON 資料,並使用不同的路由來執行不同的操作。當你使用 Postman、curl 或其他工具向這個伺服器發送請求時,你可以執行 CRUD 操作,操作用戶資料。請注意,這只是一個簡單的範例。在實際應用中,你可以加入身分驗證、資料庫連接、錯誤處理等功能,以提高安全性和可靠性。這個範例將幫助你入門 RESTful API 的開發。如果你有進一步的問題或需要更多幫助,請告訴我!
經歷了以上練習,我們開始知道如何「當一個API 伺服器」了
而身為API的開發者,遵照規範開發可以增加可維護性,以及減少人與人之間的衝突(?)
許多公司開出職缺來的時候,也都常常要求了解什麼是「RESTful API 」
那麼我們來看一些反例,「不遵循的話會是什麼樣子」
如果沒有遵照 RESTful API 的規則來開發 API,可能會導致以下問題:
- 缺乏統一性:RESTful API 提供了一個統一的設計風格,讓開發者和客戶端可以容易理解和使用。如果不遵循這種風格,API 的設計可能會變得混亂和不一致。
- 可讀性差:RESTful API 的 URL 模式通常具有清晰的結構,使得它們易於閱讀和理解。非RESTful API 的 URL 可能會變得複雜或不清晰,導致開發者難以理解其含義。
- 狀態管理困難:RESTful API 鼓勵無狀態通訊,這意味著每個請求都應包含所有必要的資訊,而不依賴於先前的狀態。如果不遵循這種原則,可能會導致伺服器必須保留先前的狀態,這會增加複雜度和可能導致錯誤。
- 不容易測試和維護:非RESTful API 可能會導致請求和回應的結構不一致,使得測試和維護變得困難。
- 不利於擴展:RESTful API 的設計風格使得它們更容易擴展和添加新功能。如果沒有遵循這種風格,可能會使得後續的擴展變得困難。
以下是一個以非RESTful API 為例的情況:
// 非RESTful API 的設計風格 app.get('/getUsers', (req, res) => { // 獲取所有用戶 }); app.post('/createUser', (req, res) => { // 創建新用戶 }); app.put('/updateUser/:id', (req, res) => { // 更新用戶資訊 }); app.delete('/deleteUser/:id', (req, res) => { // 刪除用戶 });
這個例子中,API 的路由命名和設計並不符合 RESTful API 的原則。例如,使用了
getUsers
、createUser
、updateUser
和deleteUser
這樣的動詞式命名,而非使用名詞式命名和 HTTP 方法來表示操作。這會讓 API 的使用和理解變得困難。因此,遵循 RESTful API 的規則可以使你的 API 更容易理解、測試、維護和擴展,並且與其他遵循相同風格的 API 集成時更加順暢。
恩...ChatGPT還是太嫩了,不知道人類要亂起來可以亂到什麼程度(X)
曾經看過的code當中
真的要亂的話,除了method全部都用post之外,狀態一律都回傳200 OKgetUsers
回傳有可能是字串:1;3;Charlie;
把資訊用 ; 隔開,讓前端自己去split 拆解意義
感想就兩個字:發瘋。
上個章節也有提到如何搭配Typescript進行nodeJS的開發
使用副檔名.ts,然後 用tsc
指令編譯成js,再讓nodejs執行
那麼Express搭配Typescript的開發,也來了解一下
要使用 TypeScript 開發 Express 應用程式,你可以遵循以下步驟:
初始化 TypeScript 項目:
首先,確保你已經在你的專案資料夾中初始化了一個 TypeScript 項目。
npm init -y npm install typescript --save-dev npx tsc --init
這會在你的專案中初始化 TypeScript 相關的設定檔,並安裝 TypeScript 套件。
安裝 Express 和相關套件:
安裝 Express 和其他相關的套件,並確保你將它們的型別定義也一併安裝。
npm install express npm install @types/express --save-dev
這樣你就可以在 TypeScript 中使用 Express 了。
設定 TypeScript 配置:
在專案根目錄下的
tsconfig.json
檔案中,確保以下設定:{ "compilerOptions": { "target": "ES6", "module": "CommonJS", "outDir": "./dist", "rootDir": "./src", "strict": true, "esModuleInterop": true } }
這個設定會指示 TypeScript 如何編譯你的程式碼。
建立 src 目錄:
在專案根目錄下建立一個名為
src
的目錄,這將是存放你的 TypeScript 檔案的地方。撰寫 TypeScript 應用程式:
在
src
目錄中創建你的 TypeScript 檔案,例如app.ts
,並開始撰寫你的 Express 應用程式。import express, { Request, Response } from 'express'; const app = express(); app.get('/', (req: Request, res: Response) => { res.send('Hello World!'); }); const port = 3000; app.listen(port, () => { console.log(`Server is running on http://localhost:${port}`); });
編譯 TypeScript:
使用以下指令來編譯你的 TypeScript 程式碼:
npx tsc
這會將 TypeScript 檔案編譯成 JavaScript,並將生成的 JavaScript 檔案存放在
dist
目錄中。執行應用程式:
在編譯完成後,你可以執行你的應用程式:
node dist/app.js
現在你就可以在 TypeScript 中開發 Express 應用程式了!這樣做的好處是,你可以享受到 TypeScript 提供的型別檢查和程式碼提示,幫助你開發更穩健和可靠的應用程式。
統整重點:
- Express 是什麼?
- Express 是一個 Node.js 的 Web 應用程式框架,用於快速建立強大且可擴展的網路應用程式。
- RESTful API 是什麼?
- RESTful API 是一種符合 REST 設計風格的 API,它提供了一套規範和原則,用於建立可擴展、分佈式的網路應用程式。
- Express 中的路由和路由參數:
- 在 Express 中,可以通過
app.get()
、app.post()
等方法來處理不同類型的請求。路由參數可以通過冒號(:
)來定義,用於獲取 URL 中的變數。- 錯誤處理:
- 在 Express 中,可以使用中間件來捕獲並處理 API 的錯誤。錯誤處理中間件通常放在所有路由和中間件的最後一個,用於處理在請求處理過程中出現的錯誤。
- TypeScript 開發 Express 應用程式:
- 使用 TypeScript 開發 Express 應用程式需要先初始化 TypeScript 項目,然後安裝 Express 和相關套件,並在
tsconfig.json
中進行相應的設定。- 範例代碼:
- 提供了一個簡單的 Express 應用程式範例,展示了如何建立一個基本的 RESTful API 以及如何進行錯誤處理。
結語:
透過本次的綜合內容,你已經學會了如何使用 Express 建立 RESTful API,以及在開發過程中如何進行錯誤處理。同時,你也了解了如何搭配 TypeScript 來開發更穩健、可靠的 Express 應用程式。
持續學習和實踐這些知識,將有助於你建立更強大、可擴展的網路應用程式。如有任何疑問或需要進一步的指導,請隨時提問,我們將樂意協助你!
本次的對話記錄在這裡:
https://chat.openai.com/share/9d03b04c-f1e9-4db8-9114-513579a4dcd4
有關Express 的內容先討論到這邊
這邊會發現資料仍然是假資料,我們沒有把資料儲存到資料庫
有關資料庫操作的語法會在下篇做討論
下一篇是SQL語法!
我是學會RESTful API 開發的前端工程師一宵三筵,我們明天見!