前後端分離應用指的是將應用的前端部分（使用者介面與互動邏輯）和後端部分（業務邏輯、資料處理、伺服器響應）拆分成獨立的模組，各自透過 API 進行通訊。這種架構設計的目的是提高開發效率、增強可擴充套件性和靈活性，使前端和後端能夠獨立開發、部署和維護。
一、傳統的前後端耦合應用 vs 前後端分離應用
-
傳統的前後端耦合應用
- 特點：前端與後端程式碼緊密耦合，通常是服務端渲染的頁面應用。前端頁面（HTML、CSS、JavaScript）與後端程式碼（如 Java、PHP、Python 等）混合在一起，伺服器端負責處理請求、生成 HTML 併傳送給客戶端。
- 缺點：
- 開發效率低：前端開發和後端開發常常互相依賴，無法完全並行工作。
- 難以複用：頁面渲染邏輯與後端邏輯耦合在一起，不容易將後端的邏輯複用到其他客戶端（如移動端）。
- 擴充套件性差：隨著前後端邏輯的複雜度增加，程式碼維護和擴充套件變得更加困難。
-
前後端分離應用
- 特點：前後端透過標準化的 API 進行通訊，前端由單獨的團隊或人員開發，主要負責介面展示與使用者互動，後端專注於業務邏輯、資料處理和提供 API 服務。前端和後端可以獨立開發、測試和部署。
- 優點：
- 獨立開發：前後端開發可以並行工作，前端與後端透過 API 定義進行解耦，前端開發人員只需呼叫後端提供的 API，而不關心後端實現細節。
- 靈活性和擴充套件性：後端服務可以為多個前端（如 Web、移動應用、小程式等）提供統一的 API 服務，且前後端可以各自獨立擴充套件。
- 更好的使用者體驗：前端可以構建更豐富的互動體驗，例如單頁應用（SPA）使用框架如 React、Vue、Angular 等，使得頁面部分重新整理，提供更流暢的使用者互動。
二、前後端分離的核心要素
-
前端部分
- 職責：前端主要負責使用者介面（UI）展示和使用者互動邏輯。它是執行在使用者瀏覽器中的應用，利用 HTML、CSS、JavaScript 等技術建立頁面並與使用者互動。
- 前端技術棧：主流的前端框架包括 React、Vue.js、Angular 等，通常使用 Webpack 等構建工具將程式碼打包成靜態資源。
- 典型實現：透過瀏覽器向後端傳送 API 請求（如 RESTful API 或 GraphQL 請求），獲取資料後更新頁面，前端本身可以託管在 CDN 或靜態資源伺服器上。
-
後端部分
- 職責：後端主要負責處理業務邏輯、資料儲存、認證與授權、負載均衡等。它通常由 Java、Node.js、Python、Go 等後端語言編寫，提供面向前端的 API 介面。
- 後端技術棧：後端常用的技術包括 Spring Boot（Java）、Django（Python）、Express（Node.js）等，使用 HTTP 協議來為前端提供資料。
- 典型實現：後端透過暴露 RESTful API、GraphQL 或 WebSocket 服務，處理來自前端的請求，並將處理後的資料返回給前端。
-
API 介面
- 職責：API 是前端和後端之間的通訊橋樑。前端透過 HTTP 請求向後端獲取或提交資料，後端透過返回 JSON、XML 或其他格式的資料響應。
- API 型別：
- RESTful API：基於 HTTP 協議的資源導向架構風格，使用 HTTP 方法（GET、POST、PUT、DELETE 等）進行操作。
- GraphQL：一種更靈活的查詢語言，允許前端按需查詢特定的資料欄位。
- WebSocket：用於實時雙向通訊的協議，適用於實時更新的應用場景，如線上聊天、實時推送等。
三、前後端分離的工作原理
-
使用者請求：
- 使用者在瀏覽器中訪問前端頁面（例如 React 應用），靜態資源透過 CDN 或 Nginx 等靜態資源伺服器載入到使用者瀏覽器中。
- 前端應用會根據使用者的操作（如點選按鈕或提交表單）向後端發出 API 請求。請求的 URL 通常是後端的 RESTful API。
-
後端處理請求：
- 後端應用接收到 API 請求後，處理業務邏輯。例如，查詢資料庫、驗證使用者許可權、執行計算等。
- 處理完成後，後端將資料（通常是 JSON 格式）作為響應返回給前端。
-
前端接收資料並更新檢視：
- 前端應用接收到後端返回的資料後，使用這些資料更新頁面的內容。例如，顯示使用者資訊、重新整理商品列表等。
- 由於前端採用單頁應用（SPA），頁面可以區域性重新整理，使用者體驗更好，頁面的響應速度更快。
四、前後端分離的典型架構
-
三層架構：前後端分離應用通常採用以下三層架構：
- 前端層：負責使用者介面與互動，通常是靜態頁面、JavaScript、CSS 組成的 Web 應用，執行在客戶端瀏覽器中。
- 後端層：負責處理業務邏輯，管理資料流動，通常是 RESTful API、GraphQL、WebSocket 等服務的提供者。
- 資料層：負責資料儲存，通常是資料庫（如 MySQL、PostgreSQL、MongoDB 等）或快取系統（如 Redis 等）。
-
微服務架構（可選）：
- 在更復雜的應用中，後端可以使用微服務架構，將不同功能模組（如使用者管理、訂單管理、支付服務等）拆分成多個微服務。
- 前端可以呼叫 API Gateway，後端的 API Gateway 會將請求分發給各個微服務，處理完成後再將結果返回給前端。
五、前後端分離的優勢
-
開發效率提升：
- 前後端可以並行開發，後端專注於提供 API，前端負責介面開發，不再需要頻繁等待對方完成某個功能才能繼續工作。
- 透過 API 文件（如 Swagger）前端可以基於介面協議開發和測試，即使後端服務尚未完成。
-
技術選型靈活：
- 前後端分離允許前端和後端使用不同的技術棧。比如，前端可以使用 React 或 Vue，而後端可以使用 Java、Node.js 或 Python。
-
獨立部署和擴充套件：
- 前後端可以獨立部署和擴充套件。前端可以透過 CDN 加速資源的載入，而後端可以透過負載均衡和微服務架構提升 API 效能。
- 業務擴充套件時，前端不必擔心後端的技術實現，後端也可以獨立維護和最佳化。
-
提升使用者體驗：
- 前端可以基於單頁應用（SPA）技術構建富互動應用，減少頁面的整體重新整理，提升使用者體驗。
六、前後端分離的挑戰
-
跨域問題：
- 由於前端和後端可能部署在不同的域名下，前端發起的請求會遇到瀏覽器的跨域限制（CORS 問題）。需要在後端配置 CORS 策略以允許跨域訪問。
-
資料同步與狀態管理：
- 在單頁應用中，前端的狀態管理變得複雜，前端需要使用狀態管理工具（如 Redux 或 Vuex）來管理全域性狀態和 API 資料。
-
效能最佳化：
- 需要透過合理的快取、懶載入、程式碼分割等手段最佳化前端效能，避免過大的資原始檔影響載入速度。
- 後端的 API 也需要進行負載均衡、資料庫索引等最佳化，保障響應速度。