iT邦幫忙

2023 iThome 鐵人賽
0
自我挑戰組

用ChatGPT詠唱來完成工作與點亮前後端技能樹系列 第 37 篇

【Day37】ChatGPT請教教我：NodeJS！Express！RESTful API ！

15th鐵人賽 chatgpt nodejs restful api express
1561 瀏覽

  • 分享至 

  • xImage
    •  

上個章節簡單的了解NodeJS要如何安裝、啟動、監聽，以及做檔案操作存取

這個章節要延續上章ChatGPT提供給我們的學習關鍵字
來討論「Express」和「RESTful API 」

Express

https://ithelp.ithome.com.tw/upload/images/20231019/20135750UrUrgMpCn0.png

當然可以！讓我用簡單易懂的方式介紹 Node.js 中的 Express。

Express 是一個 Node.js 的框架，它能夠幫助你建立 Web 應用程式，提供了許多實用的功能和方法，讓開發過程更為簡單和高效。

以下是一個簡單的例子來說明如何使用 Express：

首先，確保你已經安裝了 Node.js 和 npm（Node.js 的套件管理器）。

  1. 安裝 Express：

打開終端機，輸入以下指令來安裝 Express：

npm install express
  1. 建立一個基本的 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');
});
  1. 執行應用程式：

在終端機中輸入以下指令：

node app.js

這樣你的 Express 應用程式就會開始運行在本地伺服器上。

這只是一個簡單的開始，Express 還提供了許多其他功能，比如處理複雜的路由、處理表單、處理資料庫等等。不過現在，你可以開始以這個基本範例來進一步學習和發展你的應用程式。如果你有任何問題或需要進一步的幫助，隨時告訴我！

https://ithelp.ithome.com.tw/upload/images/20231019/20135750M99gX4cP54.png

在 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 請求。

這只是一個簡單的範例，你可以在實際開發中根據需要進一步擴展和處理不同的路由。如果你有其他問題或需要進一步的幫助，隨時告訴我！

https://ithelp.ithome.com.tw/upload/images/20231019/20135750Bi65X4QfjS.png

當然，我會針對 Express 的基本語法進行詳細的說明與教學，以確保你能夠清楚地理解如何使用它來建立網頁應用程式。

  1. 引入 Express 模組：

    在你的應用程式開頭，你需要引入 Express 模組。這樣才能使用 Express 提供的功能。

    import express from 'express';
const app = express();

  2. 建立路由：

    路由是指如何回應特定的 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 則代表回應的物件。

  3. 回應：

    使用 res.send() 方法來回應請求，你可以傳遞字串、HTML、JSON 或其他資料。

    app.get('/', (req, res) => {
  res.send('歡迎來到首頁！');
});

  4. 靜態檔案服務：

    使用 express.static() 中介軟體可以讓你提供靜態檔案，如 CSS、圖片等。

    app.use(express.static('public'));

    這裡假設你有一個 public 資料夾，裡面包含了你的靜態檔案。

  5. 啟動伺服器：

    最後，使用 app.listen() 方法來啟動伺服器。

    app.listen(3000, () => {
  console.log('伺服器已啟動，監聽埠號 3000');
});

    這樣你的 Express 應用程式就會在本地伺服器上運行。

這些是 Express 的基本語法，你可以進一步學習如何處理中間件、錯誤處理、資料庫連接等進階主題。如果你對某一個特定的功能或概念有疑問，歡迎隨時提問！

所以Express就是協助我們啟動伺服器、監聽所有發過來的請求
並針對發過來的網址，也就是路由進行解析，去做出對應的反應

ChatGPT說我們可以進一步學習一些進階主題，看看他要介紹些什麼
https://ithelp.ithome.com.tw/upload/images/20231019/20135750psiKcorsCK.png

當你熟悉了 Express 的基本語法後，可以開始學習一些進階的主題，讓你更有效地建立網頁應用程式。以下是一些進階主題的教學：

  1. 中間件（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('未授權');
  }
});

  2. 路由參數：

    Express 支援路由參數，你可以在路由中使用冒號（:）定義參數，然後在路由處理函數中獲取它們。

    app.get('/user/:id', (req, res) => {
  const userId = req.params.id;
  // 使用 userId 進行操作
});

  3. 模板引擎：

    如果你想動態生成 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 });
});

  4. 資料庫連接：

    Express 應用程式通常需要與資料庫進行交互。你可以使用資料庫套件，如 Mongoose（用於 MongoDB）或 Sequelize（用於 SQL 數據庫），來建立連接並操作資料庫。

    // 以 Mongoose 為例
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/mydb');

  5. API 開發：

    如果你的 Express 應用程式是用來建立 RESTful API，你可以使用 app.get()、app.post() 等方法來處理 API 請求，並返回 JSON 數據。

    app.get('/api/users', (req, res) => {
  // 獲取所有用戶數據
  res.json(users);
});

  6. 錯誤處理：

    學習如何在 Express 中有效地處理錯誤非常重要。你可以使用中間件來捕獲錯誤並返回適當的錯誤狀態碼。

    app.use((err, req, res, next) => {
  console.error(err);
  res.status(500).send('內部錯誤');
});

這些是 Express 的進階主題，它們可以幫助你建立更複雜和功能豐富的應用程式。根據你的需求，你可以深入研究這些主題中的任何一個，以提高你的 Express 應用程式開發技能。如果你有任何具體的問題或需要更深入的指導，請隨時提問。

API 開發 & RESTful API

粗略了解以上內容之後，再來要討論API的開發部分

過往擔任前端時只負責「串接API」，發送請求到API伺服器，然後接收回傳的資料
今天我們要來擔任API伺服器的角色，
接收發送過來的請求，處理之後回覆該請求

上面的Express 基本上很良好的幫我們解析了請求，也提供回傳結果的語法
甚至還有錯誤處理、中間件&日誌處理等等

那麼從頭來了解API，以及ChatGPT所提到的「RESTful API」是什麼
https://ithelp.ithome.com.tw/upload/images/20231019/20135750iM0KxhdYS5.png

當然，我會提供詳細的介紹和教學。

API 是什麼？

API (Application Programming Interface) 是一組定義，允許軟體應用程式之間進行溝通和互動。它定義了不同軟體組件之間的通訊協定，並規定了如何使用這些組件。API 可以讓不同的軟體系統相互溝通，使它們可以共同工作。

RESTful API 是什麼？

RESTful API 是一種符合 REST (Representational State Transfer) 設計原則的 API。REST 是一種設計風格，用於建立可擴展的、分佈式的網路應用程式。RESTful API 的設計風格強調了資源的獨特識別、狀態和操作。

以下是 RESTful API 的一些重要原則：

  1. 資源（Resources）：在 RESTful API 中，所有的數據或功能都被視為資源。每個資源都有一個唯一的識別符（URL）。
  2. 表現（Representation）：資源的狀態以及資源之間的關係可以通過表現來表示，通常以 JSON 或 XML 格式。
  3. 狀態無關（Stateless）：每一個請求都包含了所有必要的資訊，因此伺服器不需要保留先前的狀態。
  4. 統一接口（Uniform Interface）：RESTful API 提供了統一的方式來訪問和操作資源，包括 URI 結構、請求方法（GET、POST、PUT、DELETE 等）以及回應格式。
  5. 無狀態通訊（Stateless Communication）：每一個請求都包含了所有必要的資訊，因此伺服器不需要保留先前的狀態。

RESTful API 的基本操作：

  1. GET：用於從伺服器獲取資源。
  2. POST：用於在伺服器上創建新的資源。
  3. PUT：用於更新現有的資源。
  4. DELETE：用於刪除現有的資源。

如何設計一個 RESTful API？

以下是設計 RESTful API 的一些建議：

  1. 使用清晰的資源命名：URL 應該明確地指示資源的名稱，例如 /users 用於獲取所有使用者。
  2. 使用請求方法：使用正確的 HTTP 請求方法來執行操作，如 GET 用於獲取資源，POST 用於創建新資源，PUT 用於更新資源，DELETE 用於刪除資源。
  3. 使用適當的狀態碼：將適當的 HTTP 狀態碼返回給客戶端，以指示操作的結果（例如 200 表示成功，404 表示資源未找到，500 表示伺服器錯誤等）。
  4. 提供合適的錯誤訊息：當發生錯誤時，應該提供清晰明確的錯誤訊息，幫助客戶端理解問題所在。
  5. 版本控制：在 API 的 URL 中包含版本號，以確保舊版本的 API 仍然可以運作，同時也允許引入新功能。
  6. 使用安全性措施：使用 HTTPS 來保護通信，並實施適當的驗證和授權機制，以確保只有授權的用戶可以訪問資源。

如果你想建立一個 RESTful API，你可以使用 Express 來快速搭建伺服器，並根據上述原則來設計你的 API 結構。如果你需要更具體的範例或教學，請隨時提問！

https://ithelp.ithome.com.tw/upload/images/20231019/20135750zAQ3Aw0Ebm.png

當你已經安裝好 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 」

那麼我們來看一些反例，「不遵循的話會是什麼樣子」
https://ithelp.ithome.com.tw/upload/images/20231019/20135750uzENCUQQ5Z.png

如果沒有遵照 RESTful API 的規則來開發 API，可能會導致以下問題：

  1. 缺乏統一性：RESTful API 提供了一個統一的設計風格，讓開發者和客戶端可以容易理解和使用。如果不遵循這種風格，API 的設計可能會變得混亂和不一致。
  2. 可讀性差：RESTful API 的 URL 模式通常具有清晰的結構，使得它們易於閱讀和理解。非RESTful API 的 URL 可能會變得複雜或不清晰，導致開發者難以理解其含義。
  3. 狀態管理困難：RESTful API 鼓勵無狀態通訊，這意味著每個請求都應包含所有必要的資訊，而不依賴於先前的狀態。如果不遵循這種原則，可能會導致伺服器必須保留先前的狀態，這會增加複雜度和可能導致錯誤。
  4. 不容易測試和維護：非RESTful API 可能會導致請求和回應的結構不一致，使得測試和維護變得困難。
  5. 不利於擴展：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 OK
getUsers回傳有可能是字串：1;3;Charlie;
把資訊用 ; 隔開，讓前端自己去split 拆解意義

感想就兩個字：發瘋。

Express & Typescript

上個章節也有提到如何搭配Typescript進行nodeJS的開發
使用副檔名.ts，然後 用tsc指令編譯成js，再讓nodejs執行

那麼Express搭配Typescript的開發，也來了解一下
https://ithelp.ithome.com.tw/upload/images/20231019/20135750nAkU2E9w4a.png

要使用 TypeScript 開發 Express 應用程式，你可以遵循以下步驟：

  1. 初始化 TypeScript 項目：

    首先，確保你已經在你的專案資料夾中初始化了一個 TypeScript 項目。

    npm init -y
npm install typescript --save-dev
npx tsc --init

    這會在你的專案中初始化 TypeScript 相關的設定檔，並安裝 TypeScript 套件。

  2. 安裝 Express 和相關套件：

    安裝 Express 和其他相關的套件，並確保你將它們的型別定義也一併安裝。

    npm install express
npm install @types/express --save-dev

    這樣你就可以在 TypeScript 中使用 Express 了。

  3. 設定 TypeScript 配置：

    在專案根目錄下的 tsconfig.json 檔案中，確保以下設定：

    {
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  }
}

    這個設定會指示 TypeScript 如何編譯你的程式碼。

  4. 建立 src 目錄：

    在專案根目錄下建立一個名為 src 的目錄，這將是存放你的 TypeScript 檔案的地方。

  5. 撰寫 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}`);
});

  6. 編譯 TypeScript：

    使用以下指令來編譯你的 TypeScript 程式碼：

    npx tsc

    這會將 TypeScript 檔案編譯成 JavaScript，並將生成的 JavaScript 檔案存放在 dist 目錄中。

  7. 執行應用程式：

    在編譯完成後，你可以執行你的應用程式：

    node dist/app.js

現在你就可以在 TypeScript 中開發 Express 應用程式了！這樣做的好處是，你可以享受到 TypeScript 提供的型別檢查和程式碼提示，幫助你開發更穩健和可靠的應用程式。

統整重點

https://ithelp.ithome.com.tw/upload/images/20231019/20135750H9OEd6DL7J.png

統整重點：

  1. Express 是什麼？
    • Express 是一個 Node.js 的 Web 應用程式框架，用於快速建立強大且可擴展的網路應用程式。
  2. RESTful API 是什麼？
    • RESTful API 是一種符合 REST 設計風格的 API，它提供了一套規範和原則，用於建立可擴展、分佈式的網路應用程式。
  3. Express 中的路由和路由參數：
    • 在 Express 中，可以通過 app.get()、app.post() 等方法來處理不同類型的請求。路由參數可以通過冒號（:）來定義，用於獲取 URL 中的變數。
  4. 錯誤處理：
    • 在 Express 中，可以使用中間件來捕獲並處理 API 的錯誤。錯誤處理中間件通常放在所有路由和中間件的最後一個，用於處理在請求處理過程中出現的錯誤。
  5. TypeScript 開發 Express 應用程式：
    • 使用 TypeScript 開發 Express 應用程式需要先初始化 TypeScript 項目，然後安裝 Express 和相關套件，並在 tsconfig.json 中進行相應的設定。
  6. 範例代碼：
    • 提供了一個簡單的 Express 應用程式範例，展示了如何建立一個基本的 RESTful API 以及如何進行錯誤處理。

結語：

透過本次的綜合內容，你已經學會了如何使用 Express 建立 RESTful API，以及在開發過程中如何進行錯誤處理。同時，你也了解了如何搭配 TypeScript 來開發更穩健、可靠的 Express 應用程式。

持續學習和實踐這些知識，將有助於你建立更強大、可擴展的網路應用程式。如有任何疑問或需要進一步的指導，請隨時提問，我們將樂意協助你！

結語

本次的對話記錄在這裡：
https://chat.openai.com/share/9d03b04c-f1e9-4db8-9114-513579a4dcd4

有關Express 的內容先討論到這邊
這邊會發現資料仍然是假資料，我們沒有把資料儲存到資料庫
有關資料庫操作的語法會在下篇做討論

下一篇是SQL語法！
我是學會RESTful API 開發的前端工程師一宵三筵，我們明天見！


上一篇
【Day36】ChatGPT請教教我：初次見面NodeJS！fs檔案存取！Promise & async/await！
下一篇
【Day38】ChatGPT請教教我：資料庫！MySQL！MySQL Workbench！
系列文
用ChatGPT詠唱來完成工作與點亮前後端技能樹 共 56 篇
  1. 52
    【Day52】ChatGPT幫我完成工作：分散式詠唱來寫NodeJS & JavaScript！
  2. 53
    【Day53】ChatGPT幫我完成工作：寫Jest單元測試！NestJS & Knex & Jest！
  3. 54
    【Day54】ChatGPT幫我完成工作：不會python也能用python爬蟲做出IT邦幫忙自動發文神器
  4. 55
    【Day55】用ChatGPT詠唱來完成工作與點亮前後端技能樹：完賽感言＆結語
  5. 56
    【出版】出成實體書了！《用 ChatGPT 詠唱來點亮 React ＆ 前端技能樹》！
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙