?

---

在開始討論這個(gè)話題之前我們先來(lái)認(rèn)識(shí)一下傳統(tǒng)的開發(fā)模式。

一、傳統(tǒng)開發(fā)模式

相信很多做過Web開發(fā)童鞋應(yīng)該都會(huì)經(jīng)歷這樣一種開發(fā)模式，利用后端語(yǔ)言提供的模版引擎編寫HTML／XML頁(yè)面，比如：

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

都有一個(gè)共同的特點(diǎn)，服務(wù)器端后臺(tái)語(yǔ)言生成解析后的HTML/XML格式返回給客戶端，例如瀏覽器端訪問直接返回解析好的HTML，瀏覽器直接就解釋執(zhí)行。

二、Ajax過渡

Ajax是把前后端分離部署的推進(jìn)者，當(dāng)時(shí)網(wǎng)頁(yè)局部更新就是未來(lái)前后端分離的開端。那什么是前后端分離開發(fā)呢？

簡(jiǎn)單來(lái)說(shuō)就是前端開發(fā)不需要部署后臺(tái)語(yǔ)言那堆垃圾環(huán)境，后端開發(fā)也不需要前端寫好的任何程序，后臺(tái)只管暴露各種API接口提供前端進(jìn)行數(shù)據(jù)的增刪改查，不負(fù)責(zé)生成HTML頁(yè)面

前端請(qǐng)求到數(shù)據(jù)后再動(dòng)態(tài)聲稱dom節(jié)點(diǎn)。

三、前端構(gòu)建

相對(duì)于后臺(tái)來(lái)說(shuō)，前端構(gòu)建是重點(diǎn)，因?yàn)榍昂蠖朔蛛x開發(fā)后側(cè)重點(diǎn)在于前端，后端就是一個(gè)數(shù)據(jù)提供，權(quán)限控制api。

后端項(xiàng)目通常都帶自己的Server，除了PHP以外，所以后端做PHP開發(fā)的還需要一個(gè)WebServer，Apache就是經(jīng)典配合，最近被拋棄換做Nginx了，所以后臺(tái)環(huán)境本來(lái)就是偽生產(chǎn)環(huán)境。

前端項(xiàng)目還是要搭建一個(gè)Server，然后把項(xiàng)目丟里邊才能跑起來(lái)調(diào)試開發(fā)，最笨的直接整一個(gè)Apache或者Nginx也可以，但這樣開發(fā)還是很痛苦。可以利用Node工具集即可，Node工具集非常多，比如我非常喜歡用的BrowserSync。

四、解決請(qǐng)求問題

前后端分離后，我們只需要Server端告訴我們Api URL即可，那么這會(huì)產(chǎn)生一個(gè)問題：Ajax跨域。這里就不能使用一般的跨域解決方法去解決，比如jsonp,iframe信使等等，因?yàn)槲覀冞€有POST請(qǐng)求。

于是Http Proxy類工具就有用了，比如我就會(huì)在BrowserSync加入中間件判斷每一個(gè)請(qǐng)求，如果是/api前綴就會(huì)代理到API Server端，API Server端收到數(shù)據(jù)后再返回給BrowserSync，BrowserSync再返回給瀏覽器端。這樣就解決跨域請(qǐng)求的問題

生產(chǎn)環(huán)境有兩種部署，一種是放到后臺(tái)項(xiàng)目里，這就沒啥說(shuō)的，另外一種就是前后端分開部署，那就在前端WebServer處理端寫點(diǎn)轉(zhuǎn)發(fā)規(guī)則就好，如Nginx，Apache都支持。

五、靜態(tài)資源路徑問題

如果你的項(xiàng)目有上傳資源功能，那自然就會(huì)產(chǎn)生用戶資源，那前后端分離后，如何來(lái)處理這個(gè)問題呢？得先看模式。

資源與后臺(tái)項(xiàng)目放一起，后臺(tái)處理完后需要返回前臺(tái)一個(gè)相對(duì)路徑，如果資源時(shí)一臺(tái)單獨(dú)的服務(wù)器，那就需要返回資源的絕對(duì)URL即可。

六、會(huì)話

Web項(xiàng)目最頭疼的就是無(wú)狀態(tài)導(dǎo)致會(huì)話問題，傳統(tǒng)的Web項(xiàng)目都使用Session/Cookie，但在前后端分離，集群部署模式下這Session明顯缺陷太多。token方式已經(jīng)是當(dāng)前Web端解決會(huì)話的主流，并且有很多開源好用的token生成管理程序，基本上拿來(lái)就能用。?
最后

前后端分離的弱點(diǎn)，無(wú)非有兩點(diǎn)

1、前端負(fù)載增多，如請(qǐng)求到列表后，前端需要自己遍歷數(shù)據(jù)集聲稱DOM節(jié)點(diǎn) （目前絕大多數(shù)用戶的電腦配置都不差，而且瀏覽器內(nèi)核已經(jīng)不在是滿身缺陷的IE瀏覽器了）

2、不利于蜘蛛（其實(shí)現(xiàn)在的部分蜘蛛已經(jīng)很厲害了，能夠支持H5 C3效果）

強(qiáng)點(diǎn)，

1、Web端就像手機(jī)端的App一樣，不需要Cookie/Session，與Server完全分離，易于維護(hù)、擴(kuò)展。一個(gè)Server API可以隨意服務(wù)多個(gè)Web App

2、AngularJS用過了以后，你應(yīng)該會(huì)感覺未來(lái)的Web開發(fā)模式，AngularJS在幾乎是前后端分離的領(lǐng)航者

3、前端靜態(tài)資源與后臺(tái)API分流，互不影響，甚至不會(huì)存在IO問題

4、開發(fā)上與后臺(tái)幾乎同步，互相不影響，特別是基于RESTFul API風(fēng)格，更是減少了溝通的成本

5、方便各自debug，Java開發(fā)人員不需要跑到前端開發(fā)人員機(jī)器上看tomcat控制臺(tái)的報(bào)錯(cuò)，前端開發(fā)人員也不需要跑到后端開發(fā)人員的機(jī)器上看瀏覽器報(bào)錯(cuò)調(diào)試

轉(zhuǎn)載于:https://www.cnblogs.com/ONEPIECE-ZY/p/6292388.html

總結(jié)

以上是生活随笔為你收集整理的前后端分离实践一的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。