「摘要」

隨著網際網路技術的發展以及終端裝置的不斷增多，前後端分離技術已成為移動網際網路領域不可或缺的技術。前後端分離技術的不斷完善，讓前後端的分工與系統邊界劃分越來越清晰。正是由於這種日趨嚴格的邊界定義，致使前端工程師很少關注後端技術架構，後端工程師很少關注前端技術框架。

本篇內容通過闡述前後端技術體系，讓前後端工程師同時瞭解前後端技術，在設計整體移動網際網路工程時，能夠充分利用前後端技術優勢，設計出更高效更穩定的移動網際網路系統架構。

前後端分離架構演進過程

1、前後端未分離架構模式

前後端未分離時代，頁面邏輯處理以及頁面渲染全部由後端完成。如最具代表性的MVC三層框架。使用者發起請求至服務端控制層（Controller），控制層通過呼叫模型處理器（Model）以及渲染檢視（View）並最終將頁面返回給客戶端。

如圖-1 MVC架構所示，檢視與模型均放在後端處理，致使前端程式碼無法獨立上線執行。前端工程師完成HTML等靜態程式碼開發之後，將頁面程式碼傳遞給後端工程師。後端工程師來完成上線釋出操作。整個開發流程如圖-2所示，前後端工程師開發流程相互牽制，整體開發效率較低。

此種架構，要求後端研發關注前端HTML、CSS程式碼等。前端無法單獨除錯，前後端無法並行開發，後期維護成本較高，前後端未分離架構存在的弊端如圖-3所示。

2、前後端未完全分離架構模式

在此以RESTful架構為切入點，探討前後端未完全分離的架構模式，目前仍有大部分前後端架構屬於前後端未完全分離的模式。後端提供RESTful 風格的API介面（通俗講，即傳輸JSON資料的Http API介面）。前端通過AJAX請求呼叫後端Http API介面，並完成頁面資料的繫結，最終由客戶端瀏覽器完成頁面的渲染。此種架構看似已經做到了前後端完全分離。其實不然，後端介面依然需要關注前端的UI展示，後端為前端介面定製化嚴重。對於多終端場景，後端需要實現多套API介面。前後端資料以及業務耦合較緊密，因此定義為此種架構為“前後端未完全分離架構模式”。

RESTful架構使得前後端程式碼分離開來，前後端可以獨立上線，開發效率相比未分離架構有所提升，整個系統開發流程也有所優化，前後端未完全分離模式下系統開發流程如圖-5所示。

此種架構的缺點是，前端並沒有掌握資料的控制邏輯（無控制層），資料的控制邏輯依然需要在後端程式碼中實現，致使後端程式碼過多的關注前端的業務邏輯。客戶端需要根據介面的資料返回進行大量的JS處理，由於動態資料是通過AJAX請求獲得的，此種方式也不利於頁面的搜尋引擎優化。

3、前後端分離架構模式

引入NodeJS層作為服務橋接層，NodeJS層由前端工程師負責搭建完成。通過NodeJS伺服器在伺服器端執行JS指令碼，可以讓前端人員快速入門搭建自己的伺服器。引入NodeJS,可以預先在服務端的內網環境完成大量的前端邏輯計算和頁面渲染工作，提升前端的訪問效能。如圖6所示展示前後端完全分離架構模式的資料以及頁面渲染流程。

前後端技術支撐

目前主流的客戶端（前端）主要包含PC瀏覽器以及移動應用APP。移動應用APP可以通過原生頁面、或內建的WebView等外掛渲染H5頁面向用戶展示UI資訊。

客戶端主要涉及網頁瀏覽器以及原生APP，這些客戶端不但可以展示資料，並且還可以儲存資料。尤其是對於移動端APP，如可以使用強大的SQLite資料庫對資料進行持久化儲存。通過客戶端的資料儲存可以實現某些場景的離線訪問，尤其是對於使用者的重要資料且更新頻次較低的資料，離線儲存的意義非常明顯。

伺服器端（後端）的伺服器種類主要分為WEB伺服器以及應用伺服器，WEB伺服器主要用來發布靜態資源（html、css等靜態資原始檔），如Nginx伺服器、Apache以及CDN伺服器等。WEB伺服器對於靜態資源釋出以及靜態檔案快取有極大的優勢。應用伺服器主要用來發布應用程式程式碼（http://ASP.NET、PHP、JAVA等），如Tomcat、IIS伺服器等。WEB伺服器一般通過公網VIP或者SLB等方式對外提供外網服務。應用伺服器一般只執行在內網環境，無法通過外網方式直接訪問應用伺服器資源，這樣也是對應用伺服器的一種網路安全保護。

後端技術體系包括JAVA、C#等程式開發語言。MySQL、MongoDB等資料庫技術。Tomcat、IIS等web伺服器技術。JSF、JMQ等處理分散式應用的中介軟體技術。

前後端分離存在問題

1、高效能問題

綜上所述，大家已瞭解前後端分離的架構設計模式以及前後端的相關技術體系，接下來探討如何充分利用前後端技術提升前後端效能問題。

2、高穩定性

如圖-14所示，若通過APP內建資料庫儲存部分介面資料（使用者的重要資料，如資產資料，收益資料等），可以實現APP的離線資料訪問。當後端介面服務出現問題，前端依然能夠正常展示。本圖示只是一個簡單的架構示意圖，本意是為了說明在設計整體前後端工程時，同時利用前後端技術優勢能夠設計出更為穩定的系統架構。