隨著互聯網的普及和技術的不斷發展，web前端開發工程師在當今互聯網行業中的重要地位，Web前端開發工程師作為一個專業技術崗位，需要掌握多種技術來構建現代化的網頁和應用程序，今天八維職業學校和大家一起來看看web前端開發工程師前后端分離開發部署模式是什么？希望對想要學習和了解web前端開發工程師這個行業的同學有所幫助。

　　一、傳統開發模式

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

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

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

　　二、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控制臺的報錯，前端開發人員也不需要跑到后端開發人員的機器上看瀏覽器報錯調試。

上一篇：Python編程語言的優缺點是什么呢?

下一篇：web前端開發工程師開發時的基礎環境配置是什么？