轉自：

0x01 傳統開發模式

相信很多做過Web開發童鞋應該都會經歷這樣一種開發模式，利用後端語言提供的模版引擎編寫HTML／XML頁面，比如：

都有一個共同的特點，伺服器端後臺語言生成解析後的HTML/XML格式返回給客戶端，例如瀏覽器端訪問直接返回解析好的HTML，瀏覽器直接就解釋執行。

0x02 Ajax過渡

Ajax是把前後端分離部署的推進者，當時網頁區域性更新就是未來前後端分離的開端。那什麼是前後端分離開發呢？

簡單來說就是前端開發不需要部署後臺語言那堆垃圾環境，後端開發也不需要前端寫好的任何程式，後臺只管暴露各種API介面提供前端進行資料的增刪改查，不負責生成HTML頁面

前端請求到資料後再動態聲稱dom節點。

相對於後臺來說，前端構建是重點，因為前後端分離開發後側重點在於前端，後端就是一個資料提供，許可權控制api。

後端專案通常都帶自己的Server，除了PHP以外，所以後端做PHP開發的還需要一個WebServer，Apache就是經典配合，最近被拋棄換做Nginx了，所以後臺環境本來就是偽生產環境。

前端專案還是要搭建一個Server，然後把專案丟裡邊才能跑起來除錯開發，最笨的直接整一個Apache或者Nginx也可以，但這樣開發還是很痛苦。可以利用Node工具集即可，Node工具集非常多，比如我非常喜歡用的BrowserSync。

前後端分離後，我們只需要Server端告訴我們Api URL即可，那麼這會產生一個問題：Ajax跨域。這裡就不能使用一般的跨域解決方法去解決，比如jsonp,iframe信使等等，因為我們還有POST請求。

於是Http Proxy類工具就有用了，比如我就會在BrowserSync加入中介軟體判斷每一個請求，如果是/api字首就會代理到API Server端，API Server端收到資料後再返回給BrowserSync，BrowserSync再返回給瀏覽器端。這樣就解決跨域請求的問題

生產環境有兩種部署，一種是放到後臺專案裡，這就沒啥說的，另外一種就是前後端分開部署，那就在前端WebServer處理端寫點轉發規則就好，如Nginx，Apache都支援。

如果你的專案有上傳資源功能，那自然就會產生使用者資源，那前後端分離後，如何來處理這個問題呢？得先看模式。

資源與後臺專案放一起，後臺處理完後需要返回前臺一個相對路徑，如果資源時一臺單獨的伺服器，那就需要返回資源的絕對URL即可。

Web專案最頭疼的就是無狀態導致會話問題，傳統的Web專案都使用Session/Cookie，但在前後端分離，叢集部署模式下這Session明顯缺陷太多。token方式已經是當前Web端解決會話的主流，並且有henduo開源好用的token生成管理程式，基本上拿來就能用。

前後端分離的弱點，無非有兩點：

1、前端負載增多，如請求到列表後，前端需要自己遍歷資料集聲稱DOM節點（目前絕大多數使用者的電腦配置都不差，而且瀏覽器核心已經不在是滿身缺陷的IE瀏覽器了）

2、不利於蜘蛛（其實現在的部分蜘蛛已經很厲害了，能夠支援H5 C3效果）

強點：
1、Web端就像手機端的App一樣，不需要Cookie/Session，與Server完全分離，易於維護、擴充套件。一個Server API可以隨意服務多個Web App

2、AngularJS用過了以後，你應該會感覺未來的Web開發模式，AngularJS在幾乎是前後端分離的領航者

3、前端靜態資源與後臺API分流，互不影響，甚至不會存在IO問題

4、開發上與後臺幾乎同步，互相不影響，特別是基於RESTFul API風格，更是減少了溝通的成本

5、方便各自debug，JAVA開發人員不需要跑到前端開發人員機器上看tomcat控制檯的報錯，前端開發人員也不需要跑到後端開發人員的機器上看瀏覽器報錯除錯

作者：lndyzwdxhs
連結：