前後端分離中的路由與錯誤處理：新手指南
更新日期： 2024 年 12 月 30 日
在現代 Web 開發中，前後端分離是常見的架構模式。
這種模式將前端和後端分開處理，用戶的每個請求會經過兩層路由判定：前端路由 和 後端路由。
本文將帶你了解它們如何協同工作，尤其是在處理 404 錯誤頁面時的數據傳輸過程。
整體流程
以下是完整的數據傳輸流程，以前端使用 React/Vue、後端使用 Django 為例：
- 用戶訪問錯誤的 URL
- 用戶在瀏覽器中輸入
example.com/nonexistent。 - 前端接收到請求，並判定這是一個不存在的路徑。
- 用戶在瀏覽器中輸入
- 前端檢查路由
- 前端框架（如 React Router 或 Vue Router）會檢查該路徑是否有對應的頁面。
- 如果沒有，會顯示一個預設的錯誤頁面（如「404 – 頁面不存在」）。
- 前端請求後端 API
- 錯誤頁面可能需要更多信息，前端會向後端 API 請求該路徑的數據，例如：
api.example.com/nonexistent。
- 錯誤頁面可能需要更多信息，前端會向後端 API 請求該路徑的數據，例如：
- 後端返回 JSON 格式的錯誤信息
- Django 檢查該 API 路徑，發現路徑不存在，返回一個標準化的 404 JSON 錯誤信息。
- 前端渲染錯誤頁面
- 前端接收到 JSON 數據，根據數據動態生成錯誤頁面，向用戶提供有用的信息和操作選項（如返回首頁）。
ASCII 流程圖
以下是上述流程的簡化展示：
用戶輸入錯誤 URL
|
v
+--------------------+
| 瀏覽器訪問前端 URL |
| example.com/404 |
+--------------------+
|
v
+-------------------------------+
| 前端檢查路由 (React/Vue 等) |
| 捕捉到不存在的路徑 |
+-------------------------------+
|
v
+-------------------------------------+
| 前端向後端 API 發送請求 |
| GET api.example.com/nonexistent |
+-------------------------------------+
|
v
+-----------------------------------+
| 後端 Django 返回 JSON 錯誤數據 |
| { |
| "error": "Page not found", |
| "status_code": 404, |
| "detail": "This page does not exist" |
| } |
+-----------------------------------+
|
v
+-------------------------------------+
| 前端接收 JSON 數據，渲染錯誤頁面 |
| 顯示錯誤信息和返回首頁按鈕等 |
+-------------------------------------+
|
v
+-----------------------+
| 用戶看到錯誤頁面 |
| example.com/404 |
+-----------------------+
詳細解釋每個步驟
用戶訪問錯誤的 URL
- 用戶在瀏覽器中輸入
example.com/nonexistent。 - 瀏覽器將請求傳遞給前端應用。
前端檢查路由
- 前端框架（如 React Router 或 Vue Router）負責處理路由。
- 如果路徑不存在，會渲染一個預設的錯誤頁面組件（如
NotFoundPage）。
示例代碼（React 路由配置）：
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</BrowserRouter>
);
}
- 訪問
/about：渲染AboutPage組件。 - 訪問
/nonexistent：渲染NotFoundPage組件。
前端請求後端 API
- 如果需要獲取後端提供的錯誤數據，前端會向後端 API 發送請求。
- 例如：
GET api.example.com/nonexistent。
後端返回 JSON 格式的錯誤信息
- Django 的自定義 404 視圖會返回 JSON 格式的錯誤信息：
from django.http import JsonResponse
def custom_404_view(request, exception):
return JsonResponse({
"error": "Page not found",
"status_code": 404,
"detail": "The requested resource does not exist."
}, status=404)
- 返回結果：
{
"error": "Page not found",
"status_code": 404,
"detail": "The requested resource does not exist."
}
前端渲染錯誤頁面
- 前端根據 JSON 數據渲染錯誤頁面：
- 顯示錯誤信息（如「頁面不存在」）。
- 提供返回首頁的按鈕或其他操作選項。
用戶看到錯誤頁面
- 錯誤頁面渲染完成後，用戶在瀏覽器中看到最終結果。
- 例如：
<h1>404 - Page Not Found</h1>
<p>Oops! The page you're looking for does not exist.</p>
<button onclick="window.location.href='/'">Return to Home</button>前後端路由如何協同工作？
1. 前端負責頁面路由
- 處理用戶輸入的 URL，渲染對應的頁面。
- 如果路徑不存在，渲染預設的 404 組件。
2. 後端負責 API 路由
- 接收 API 請求，返回對應的數據或錯誤信息。
- 如果路徑不存在，返回標準化的 JSON 錯誤信息。
為什麼需要兩層路由？
- 性能優化
- 前端直接處理頁面路由，避免每次都向後端發送請求。
- 只有需要數據時才向後端請求，減少伺服器負擔。
- 靈活性
- 前端可以快速更新路由邏輯，無需修改後端。
- 後端可以專注於數據提供，而非處理頁面。
- 用戶體驗
- 用戶訪問不存在的頁面時，立即看到錯誤頁面（前端處理）。
- 如果錯誤頁需要動態數據，後端提供詳細信息（API 支持）。
總結
在前後端分離的架構中：
- 前端負責頁面渲染與路由管理，確保用戶訪問的 URL 對應正確的頁面。
- 後端提供數據支持與 API 路由判定，返回所需數據或錯誤信息。
- 兩層路由協同工作，實現高效的數據傳輸與友好的用戶體驗。
希望這篇文章能幫助你理解前後端分離中的路由與錯誤處理！如果還有疑問，隨時提問！ 😊