iT邦幫忙

2023 iThome 鐵人賽

0
自我挑戰組

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

【Day37】ChatGPT請教教我:NodeJS!Express!RESTful API !

  • 分享至 

  • 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 的原則。例如,使用了 getUserscreateUserupdateUserdeleteUser 這樣的動詞式命名,而非使用名詞式命名和 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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言