正常網頁與 API 接口：新手指南
更新日期： 2025 年 1 月 1 日
本文為 Django + Vue 前後端分離解析，第 2 篇：
- 前後端分離的 404 錯誤處理：步驟指南
- 正常網頁與 API 接口：新手指南 👈 所在位置
- GraphQL 與 REST：理解新時代的 API 設計
- 為什麼自定義 404 頁面需要同時支持 API 和 HTML：新手指南
- 前後端分離中的路由與錯誤處理：新手指南
- 設計後端 API 的 404 錯誤處理：新手指南
- 前端與後端的 HTTP 請求與響應協議
- Django 中自定義 404 專案架構的最佳實踐
- 深入理解 Django 中的自定義 404 views 函數處理解析
- Django 的 handler404：自定義 404 錯誤頁面的核心
- Django 的 render 函數與 status 參數：為什麼重要？
- 使用 Accept 判斷請求格式：如何實現靈活的錯誤處理？
- 使用 Esbuild 搭建 Vue 開發環境的指南
- 新手入門：TailwindCSS 與 DaisyUI 的整合指南
- Django 靜態文件管理：static 與 staticfiles 完整指南
- 使用 WhiteNoise 簡化 Django 靜態文件管理：新手入門指南
- Vue 與 Django 整合：從編輯到部署的完整指南
- Django 與 Vue 的專案目錄與設計流程指南
- Django + Vue 前後端分離架構：後端路由渲染解析
- Vue 3 應用的主入口詳解：如何初始化應用
- 探索 Vue 應用的根組件：App.vue 的角色與設計
- Vue.js 單頁應用（SPA）邏輯與運作流程詳解
- 新手指南：使用 Axios 實現高效的 HTTP 請求
- 在 Vue 中處理 404 錯誤組件（component）設計：新手指南
- Vue Router 新手指南：設置 404 錯誤頁面
當使用者訪問網站時，可能是打開了一個普通的 HTML 頁面，也可能是透過 API 接口向服務器請求數據。
這兩種情境對應不同的需求：
- 正常網頁：直接為用戶顯示可視化內容。
- API 接口：為系統或應用提供數據支持。
了解它們的區別與應用，對於新手學習前後端開發至關重要。
訪問正常網頁
概念與特點
正常網頁是用於直接顯示的 HTML 頁面，為人類用戶提供可視化的內容和操作界面。
當使用者通過瀏覽器訪問時，服務器會返回完整的 HTML 文件，包含結構（HTML）、樣式（CSS）、以及交互邏輯（JavaScript）。
場景與用途
- 目標對象：人類用戶。
- 主要用途：展示內容或提供交互功能。
- 返回內容：HTML 文件，包含可直接渲染的網頁結構和資源。
舉例
- 訪問 URL：
https://example.com/users - 返回內容：
<!DOCTYPE html>
<html lang="en">
<head>
<title>User List</title>
</head>
<body>
<h1>Users</h1>
<ul>
<li>John Doe</li>
<li>Jane Smith</li>
</ul>
</body>
</html>適用場景
- 博客：例如文章閱讀頁面。
- 電商網站：例如商品展示頁面。
- 資訊網站：例如新聞首頁。
訪問 API 接口
概念與特點
API 接口（Application Programming Interface）是系統間的數據交換端點。它為機器或應用提供結構化的數據，而不是直接顯示的頁面內容。這些數據通常以 JSON 或 XML 格式返回，用於支援前端應用程序（如 React 或 Vue.js）或第三方系統。
場景與用途
- 目標對象：系統或應用。
- 主要用途：提供數據或執行操作。
- 返回內容：結構化數據（如 JSON 或 XML），供程式解析和使用。
舉例
- 訪問 URL：
https://api.example.com/users - 返回內容：
[
{
"id": 1,
"name": "John Doe",
"email": "john@example.com"
},
{
"id": 2,
"name": "Jane Smith",
"email": "jane@example.com"
}
]適用場景
- 前後端分離：前端調用 API 獲取數據後生成動態頁面。
- 多端支持：手機 App 和網站共用同一後端數據。
- 第三方集成：例如支付接口、地圖服務等。
正常網頁與 API 接口的對比
| 屬性 | 正常網頁（HTML） | API 接口（JSON 或 XML） |
|---|---|---|
| 訪問對象 | 人類用戶 | 應用程式或系統 |
| 返回內容 | 可直接渲染的 HTML | 結構化數據（如 JSON 或 XML） |
| 使用工具 | 瀏覽器 | 前端框架（如 React）、後端程式 |
| 適用場景 | 資訊展示、用戶互動 | 數據交換、前後端分離 |
應用場景：前後端分離
現代 Web 開發經常使用 前後端分離 的方式，其中 API 接口扮演著數據供應角色，而前端負責頁面的呈現。
以下是典型的工作流程：
舉例：動態生成用戶列表
- API 接口
- 後端設計：提供一個 API 接口
https://api.example.com/users，返回用戶列表數據（JSON）。 - 返回數據：
- 後端設計：提供一個 API 接口
[
{"id": 1, "name": "John Doe"},
{"id": 2, "name": "Jane Smith"}
]- 前端應用
- 前端請求：前端通過程式調用 API，獲取用戶數據。
- 動態生成頁面：根據返回的 JSON 數據生成用戶列表：
<ul>
<li>John Doe</li>
<li>Jane Smith</li>
</ul>優勢
- 靈活性：API 數據可供多端（網站、App、小程序）使用，避免重複開發。
- 分工明確：前端專注於 UI 設計，後端專注於業務邏輯。
- 易擴展性：API 功能可以根據需求擴展，而不影響前端頁面。
總結
- 正常網頁（HTML） 是直接展示給用戶的可視化內容，適用於傳統的網頁模式。
- API 接口（JSON 或 XML） 提供數據支持，專注於與其他系統或前端應用的通信。
兩者雖然功能不同，但在現代 Web 開發中常常結合使用，尤其是在前後端分離的架構中。
透過 API 接口提供數據，前端根據這些數據動態生成頁面，既靈活又高效。
希望這篇文章幫助你理解它們的區別與應用！