作者：吳祐賓
這期要來開始製作第一個 Http 服務程式。首先，先建立一個名為 "HelloHttp"
資料夾。
在資料夾新建專案 - 初始化專案
Node.js 新建專案的方式叫「初始化專案」，使用 Terminal 在前面建立的 HelloHttp 資料夾輸入：
npm init
輸入完成後 npm 會啟動互動式介面詢問我們這個專案的基本資料，原則上可以一直按
ENTER
來輸入預設值，這裡由於我的進入點想和一般網頁區隔，以便於識別服務的入口，所以命名為
"server.js"。完成後會在專案目錄下建立 package.json。
建立並編輯 server.js
接著使用編譯器新增 "server.js"，並將底下的程式碼複製到該檔案中並存檔。
// 引入 http 模組 const http = require('http'); // 建立一個 HTTP 伺服器 const server = http.createServer((req, res) => { // 處理請求 res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello, World!\n'); }); // 監聽 3000 port const PORT = 3000; server.listen(PORT, () => { console.log(`Server running at http://localhost:${PORT}/`); });
啟動第一支 Http 服務
使用以下指令來啟動服務。啟動服務後再開啟瀏覽器，在網址列輸入：http://localhost:3000，就可以看到如下圖的結果。
node server.js
建立計算機模組
在專案資料夾建立 "app" 目錄，並建立 "calc.js"
檔案，將底下的程式碼貼上後存檔。
// app/calc.js function add(a, b) { return a + b; } module.exports = { add, };
增加 sum 路由
修改 http.createServer 內的程式，加入 /sum 路由，並且讀取 request 裡的參數 a 和 參數 b，接著呼叫 add 函式將 a 和 b 加總，加總結果寫入 json 物件並回傳給客戶端。修改的程式碼可能長成下面的模樣。
// 引入 http 模組 const http = require('http'); const url = require('url'); // 引入 calc 模組 const calc = require('./app/calc'); // 建立一個 HTTP 伺服器 const server = http.createServer((req, res) => { // 解析 URL const parsedUrl = url.parse(req.url, true); // 處理路由 if (parsedUrl.pathname === '/sum' && req.method === 'GET') { // 取得 URL 參數 const { a, b } = parsedUrl.query; // 將字串轉為數字 const numA = parseInt(a, 10); const numB = parseInt(b, 10); // 使用 calc 模組計算結果 const result = calc.add(numA, numB); // 回傳結果 res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ result })); } else { // 其它路由都回傳 Hello World res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello, World!\n'); } }); // 監聽 3000 port const PORT = 3000; server.listen(PORT, () => { console.log(`Server running at http://localhost:${PORT}/`); });
|
| 程式運行結果 |
建立第一個 Http 服務總結
Node.js 透過幾個步驟就可以完成 Http Server 專案，和 Delphi WebBroker 專案相同，能夠在彈指之間建立專案，並且建立了 "/sum" 路由 (在 Delphi 中被稱為 action)。實際建構後你會發現程式碼全集中在 http.createServer 函式中，當專案需求功能越來越多，此函式會越來越難以維護。
下一篇文章會介紹 Express 套件如何來幫助我們完成原來的工作。
使用 Express 套件來升級 Http 服務為 RESTful API 專案
在建立 Node.js HTTP 伺服器的過程中，我們通常會面臨隨著專案成長，程式碼集中在
http.createServer 函式中，難以維護的情況。為了更有效地處理路由和中介軟體
(Middleware)，我們可以引入 Express 框架。
Express
是一個快速、靈活且精簡的 Node.js Web
應用程式框架，它提供了一組強大的功能，讓你可以更輕鬆地組織和延伸你的應用程式。以下是如何使用
Express 來改進你的程式碼：
首先，你需要安裝 Express 套件。在
Terminal 中執行以下指令：
npm install express
接著 npm 就會安裝 express 套件，並把它安裝在 node_modules 中。
|
|
網路上很著名的 node_modules 迷因圖 |
此時專案資料夾結構應如下圖所示。
接著把 server.js 裡的程式碼以下面的程式碼替代。
const express = require('express'); const app = express(); // 引入 calc 模組 const calc = require('./app/calc'); // 設定 "/sum" 路由 app.get('/sum', (req, res) => { // 取得 URL 參數 const { a, b } = req.query; // 將字串轉為數字 const numA = parseInt(a, 10); const numB = parseInt(b, 10); // 使用 calc 模組計算結果 const result = calc.add(numA, numB); // 回傳結果 res.json({ result }); }); // 加上 root 路由 app.get('/', (req, res) => { res.end('Hello, World!\n'); }); // 啟動伺服器 const PORT = 3000; app.listen(PORT, () => { console.log(`Server running at http://localhost:${PORT}/`); });
這段程式碼使用 Express 框架建立一個簡單的 HTTP 伺服器。以下是程式碼的主要部分的解釋：
1. 引入 Express 框架：
這裡引入了 Express 框架並創建一個應用程式實例。
const express = require('express');
const app = express();
2. 引入 calc 模組：
引入了 calc 模組，該模組包含一個 add 函數，用於執行兩數相加的操作。
const calc = require('./app/calc');
3. 設定 "/sum" 路由：
這個路由處理函數處理 GET 請求，接收 /sum 路由中的 URL 參數 a 和 b，然後使用 calc 模組的 add 函數計算結果，最後以 JSON 格式回傳結果。
app.get('/sum', (req, res) => {
// 處理 "/sum" 路由的 GET 請求
const { a, b } = req.query; // 從 URL 參數中取得 a 和 b
// 將字串轉為數字
const numA = parseInt(a, 10);
const numB = parseInt(b, 10);
// 使用 calc 模組計算結果
const result = calc.add(numA, numB);
// 回傳結果
res.json({ result });
});
4. 設定 "/" 路由：
這個路由就是還原根路徑的 GET 請求，回傳 Hello World 文字訊息。
app.get('/', (req, res) => {
res.end('Hello, World!\n');
});
5. 啟動伺服器：
啟動伺服器，使其監聽在本地端口 3000 上，並在伺服器啟動時輸出一條訊息到 Terminal 中。
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}/`);
});
使用 Express 套件來升級 Http 服務為 RESTful API 專案總結
使用 Express 框架的優點在於它提供了一個強大而靈活的 RESTful API 開發環境，我們可以在短時間內完成 Delphi WebBroker 和 DataSnap REST 框架所整合的效果。以下是我個人的總結：
中介軟體的優勢： Express 提供了一個稱為中介軟體（Middleware）的概念，這是一個處理 HTTP 請求和回應的功能強大機制。這使我們能夠在請求到達路由處理之前或之後，執行額外的操作。例如，身份驗證、日誌記錄和錯誤處理等功能都可以方便地透過中介軟體實現。
簡化的路由系統： Express 的路由系統相當簡單而直觀，對於建立 RESTful API 和處理複雜的路由配置都提供了極大的方便。這使得整合各種端點和資源變得輕鬆，並且易於擴展。
簡潔的程式碼風格： Express 的 API 設計簡潔，使得開發者能夠以一種清晰且易讀的方式組織和編寫程式碼。這種風格的程式碼結構使得專案的維護和擴充更加輕鬆。
豐富的社群技術支援： Express 是一個廣泛應用的框架，除了擁有龐大的社群和豐富的官方文件外，Stack Overflow 更有許多大神和無數追隨者的經驗傳承。這保證了開發者可以輕鬆找到解決問題的方法，並能夠分享最佳實戰之路。
快速整合的效果： 使用 Express 能夠讓開發者迅速構建出符合需求的後端服務。這種快速整合的效果特別迎合 Delphi WebBroker 和 DataSnap REST 框架轉換的要求，讓原 Delphi 開發者在業務需求變動時更容易應對。
Express 提供了一個優雅的開發環境，對於中介軟體、簡潔的路由系統和整合效果的需求都提供了令人滿意的解決方案。在未來的後端開發中，這種風格的開發方式將有助於保持程式碼的清晰度，提升延伸的可能性，並帶來更高效的開發流程。這種轉變同時也能夠讓開發者更容易維護並有效地應對專案的需求變化。
和你分享。
See also
文首圖片來源：攝影師：Klaus Nielsen: https://www.pexels.com/zh-tw/photo/6287465/
