為什么要WEB前后端分離
- 后端只提供API接口(盡量做restful服務(wù)化),后端保證API和服務(wù)穩(wěn)定颗胡。前端調(diào)用AJAX實(shí)現(xiàn)數(shù)據(jù)的呈現(xiàn)八回。
前端職責(zé):頁(yè)面UI酷愧,頁(yè)面展示、交互缠诅、渲染溶浴,用戶(hù)體驗(yàn)等。
后端職責(zé):數(shù)據(jù)存儲(chǔ)管引,業(yè)務(wù)邏輯士败,RESTful 接口,性能、可用性谅将、伸縮性漾狼、擴(kuò)展性、安全性等饥臂。 - 像React逊躁、Vue、Angular我們可以輕松的構(gòu)建一個(gè)無(wú)需服務(wù)器渲染就可以展示的網(wǎng)站隅熙,這類(lèi)框架也提供了前端路由功能稽煤,后臺(tái)可以不在控制路由的跳轉(zhuǎn),將原本屬于前端的業(yè)務(wù)邏輯全部丟給前端猛们,這樣前后端分離可以說(shuō)是最徹底的念脯。
- 降低前端對(duì)后端的依賴(lài),提高可維護(hù)性弯淘,讓前后端的職責(zé)更清晰绿店,分工更合理。
- 服務(wù)端負(fù)責(zé)業(yè)務(wù)/數(shù)據(jù)接口庐橙,前端負(fù)責(zé)展現(xiàn)/交互邏輯假勿。
前后端分離的優(yōu)勢(shì)
徹底解放前端
前端不再需要向端臺(tái)提供模板或是后臺(tái)在前端html中嵌入后端代碼,前端通過(guò)AJAX調(diào)研后端接口态鳖,數(shù)據(jù)邏輯放在前端转培,由前端維護(hù)。提高工作效率浆竭,分工更加明確
前后端分離的工作流程可以使前端只關(guān)注前端的事浸须,后臺(tái)只關(guān)心后臺(tái)的活,兩者開(kāi)發(fā)可以同時(shí)進(jìn)行邦泄,在后臺(tái)還沒(méi)有時(shí)間提供接口的時(shí)候删窒,前端可以先將數(shù)據(jù)寫(xiě)死或者調(diào)用本地的json文件即可,頁(yè)面的增加和路由的修改也不必再去麻煩后臺(tái)顺囊,開(kāi)發(fā)更加靈活肌索。局部性能提升
通過(guò)前端路由的配置,我們可以實(shí)現(xiàn)頁(yè)面的按需加載特碳,無(wú)需一開(kāi)始加載首頁(yè)便加載網(wǎng)站的所有的資源诚亚,服務(wù)器也不再需要解析前端頁(yè)面,在頁(yè)面交互及用戶(hù)體驗(yàn)上有所提升午乓。降低維護(hù)成本
通過(guò)目前主流的前端MVC框架站宗,我們可以非常快速的定位及發(fā)現(xiàn)問(wèn)題的所在益愈,客戶(hù)端的問(wèn)題不再需要后臺(tái)人員參與及調(diào)試份乒,代碼重構(gòu)及可維護(hù)性增強(qiáng)。
考慮到seo的問(wèn)題
- 對(duì)于需要做SEO的產(chǎn)品,這種方式就有點(diǎn)力不從心了或辖。因?yàn)椋匾獌?nèi)容都在前端進(jìn)行異步組裝枣接,這樣是無(wú)法被搜索引擎收錄的颂暇,所以必須要考慮服務(wù)端渲染才可以被SEO。
- 分離為什么不全部走ajax但惶,頁(yè)面就不需要任何服務(wù)端語(yǔ)言了耳鸯。但實(shí)際場(chǎng)景并非如此,首先有些數(shù)據(jù)總是要生成頁(yè)面時(shí)就已經(jīng)同步獲取的膀曾,且全異步對(duì)SEO不利县爬、純html頁(yè)面沒(méi)有include功能等。
隨著Node.js技術(shù)的普及添谊,我們把渲染的工作從服務(wù)端抽出來(lái)到前端财喳,明確的前后端職責(zé)劃分。
解決跨域問(wèn)題
- 代碼里面可以通過(guò)header函數(shù)在后端框架的入口做限制
- 也可以在nginx中配置代理
- jsop的方式
前端控制跳轉(zhuǎn)斩狱,怎么保持會(huì)話(huà)(登錄狀態(tài))
- 存一個(gè)全局變量可不可以耳高,用localStorage可不可以,用cookie可不可以所踊。
- 微信api的實(shí)現(xiàn),是url中必須帶上?access_token=[xxx]來(lái)判斷狀態(tài)的, 這樣你就需要每個(gè)api提交都帶上access_token參數(shù)