先後端分離實踐一

 

---

在開始討論這個話題以前咱們先來認識一下傳統的開發模式。

1、傳統開發模式

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

• PHP 開發有 Smarty模板引擎
• Java web工程有jsp頁面
• Python 各個Web框架都有各自的模板引擎
• NodeJS 的express你懂得

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

2、Ajax過渡

Ajax是把先後端分離部署的推動者，當時網頁局部更新就是將來先後端分離的開端。那什麼是先後端分離開發呢？

簡單來講就是前端開發不須要部署後臺語言那堆垃圾環境，後端開發也不須要前端寫好的任何程序，後臺只管暴露各類API接口提供前端進行數據的增刪改查，不負責生成HTML頁面

前端請求到數據後再動態聲稱dom節點。

3、前端構建

相對於後臺來講，前端構建是重點，由於先後端分離開發後側重點在於前端，後端就是一個數據提供，權限控制api。

後端項目一般都帶本身的Server，除了PHP之外，因此後端作PHP開發的還須要一個WebServer，Apache就是經典配合，最近被拋棄換作Nginx了，因此後臺環境原本就是僞生產環境。

前端項目仍是要搭建一個Server，而後把項目丟裏邊才能跑起來調試開發，最笨的直接整一個Apache或者Nginx也能夠，但這樣開發仍是很痛苦。能夠利用Node工具集便可，Node工具集很是多，好比我很是喜歡用的BrowserSync。

4、解決請求問題

先後端分離後，咱們只須要Server端告訴咱們Api URL便可，那麼這會產生一個問題：Ajax跨域。這裏就不能使用通常的跨域解決方法去解決，好比jsonp,iframe信使等等，由於咱們還有POST請求。

因而Http Proxy類工具就有用了，好比我就會在BrowserSync加入中間件判斷每個請求，若是是/api前綴就會代理到API Server端，API Server端收到數據後再返回給BrowserSync，BrowserSync再返回給瀏覽器端。這樣就解決跨域請求的問題

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

5、靜態資源路徑問題

若是你的項目有上傳資源功能，那天然就會產生用戶資源，那先後端分離後，如何來處理這個問題呢？得先看模式。

資源與後臺項目放一塊兒，後臺處理完後須要返回前臺一個相對路徑，若是資源時一臺單獨的服務器，那就須要返回資源的絕對URL便可。

6、會話

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

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

一、前端負載增多，如請求到列表後，前端須要本身遍歷數據集聲稱DOM節點 （目前絕大多數用戶的電腦配置都不差，並且瀏覽器內核已經不在是滿身缺陷的IE瀏覽器了）

二、不利於蜘蛛（其實如今的部分蜘蛛已經很厲害了，可以支持H5 C3效果）

強點，

一、Web端就像手機端的App同樣，不須要Cookie/Session，與Server徹底分離，易於維護、擴展。一個Server API能夠隨意服務多個Web App

二、AngularJS用過了之後，你應該會感受將來的Web開發模式，AngularJS在幾乎是先後端分離的領航者

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

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

五、方便各自debug，Java開發人員不須要跑到前端開發人員機器上看tomcat控制檯的報錯，前端開發人員也不須要跑到後端開發人員的機器上看瀏覽器報錯調試