先後端分離，最佳實踐

文章目錄

1. 1.先後端分離是什麼
2. 2.爲何須要先後端分離
3. 3.先後端分離，最佳實踐
   1. 3.1.簡單分離模式
   2. 3.2.服務端渲染模式
      1. 3.2.1.方式一，JSP渲染
      2. 3.2.2.方式二，靜態頁渲染
   3. 3.3.Node.js渲染模式
4. 4.總結

先後端分離，可讓各端變得更專一。今天的話題，結合我以前的項目場景，從新思考「先後端」的定義，並討論下《先後端分離，最佳實踐》。

先後端分離是什麼

咱們來回顧下傳統的 MVC 模式，客戶端發送 AJAX 請求，服務端接受到該請求並返回 JSON 數據返回給客戶端，客戶端解析 JSON 進行頁面渲染。

 

如今，爲了提升開發效率，細化職責，先後端分離的需求愈來愈被重視，服務端負責業務/數據接口，前端負責展示/交互邏輯。若是將瀏覽器這一端視爲前端，而服務器這一端視爲服務端的話，能夠將以上的 MVC 模式，進行改形成先後端分離模式。

爲何須要先後端分離

有了先後端分離模式，前端人員更加關注界面展示/交互邏輯，服務端人員更加關注業務/數據接口，分工明確，職責清晰。

• 前端職責：頁面UI，頁面展現、交互、渲染，用戶體驗等。
• 後端職責：數據存儲，業務邏輯，RESTful 接口，性能、可用性、伸縮性、擴展性、安全性等。

此外，當咱們的存在多端場景，例如，一個服務端RESTful API，按照這種方式 Web／iOS／Android／PC／U3D 五個前端對於後端來講就無差異了，這是多麼棒的設計啊。

先後端分離，最佳實踐

簡單分離模式

咱們採用的方案是 REST 服務這個輕量級的 Web 服務，客戶端發送 AJAX 調用服務端 RESTFul API 接口請求，服務端收到請求後將 JSON 格式的響應結果發送給客戶端，這樣就完成了一次交互。

服務端渲染模式

這種模式，基本能夠知足咱們通常產品的需求。然而，對於須要作SEO的產品，這種方式就有點力不從心了。由於，重要內容都在前端進行異步組裝，這樣是沒法被搜索引擎收錄的，因此必需要考慮服務端渲染才能夠被SEO。

服務端渲染模式，結合我以前的項目場景，列舉兩種方式。

方式一，JSP渲染

經過JSP進行渲染。這個方式，實際上，就是在前端項目中加入Java代碼，經過JSP做爲模板渲染。

方式二，靜態頁渲染

經過FreeMarker生成靜態頁進行渲染。這個方式，須要考慮動靜分離，CDN分發等場景。

Node.js渲染模式

對於上面的方案，存在一個重要的問題，前端人員須要涉及Java技術，沒法達到先後端解耦。隨着Node.js技術的普及，咱們把渲染的工做從服務端抽出來到前端，明確的先後端職責劃分。

總結

從傳統的 MVC 模式，演變到先後端分離模式，可讓各端變得更專一。今天的話題，結合我以前的項目場景，主要簡單介紹了簡單分離模式，JSP渲染模式，靜態頁渲染模式，Node.js渲染模式。