前后端分離

為什么要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ù)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末泌枪,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子秕岛,更是在濱河造成了極大的恐慌碌燕,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,734評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件继薛,死亡現(xiàn)場(chǎng)離奇詭異修壕,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)惋增,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén)叠殷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人诈皿,你說(shuō)我怎么就攤上這事林束。” “怎么了稽亏?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,133評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵壶冒,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我截歉,道長(zhǎng)胖腾,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,532評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮咸作,結(jié)果婚禮上锨阿,老公的妹妹穿的比我還像新娘。我一直安慰自己记罚,他們只是感情好墅诡,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著桐智,像睡著了一般末早。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上说庭,一...
    開(kāi)封第一講書(shū)人閱讀 51,462評(píng)論 1 302
  • 那天然磷,我揣著相機(jī)與錄音,去河邊找鬼刊驴。 笑死姿搜,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的缺脉。 我是一名探鬼主播痪欲,決...
    沈念sama閱讀 40,262評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼攻礼!你這毒婦竟也來(lái)了业踢?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,153評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤礁扮,失蹤者是張志新(化名)和其女友劉穎知举,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體太伊,經(jīng)...
    沈念sama閱讀 45,587評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡雇锡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評(píng)論 3 336
  • 正文 我和宋清朗相戀三年摄闸,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了芽淡。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,919評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡阳准,死狀恐怖芳悲,靈堂內(nèi)的尸體忽然破棺而出立肘,到底是詐尸還是另有隱情,我是刑警寧澤名扛,帶...
    沈念sama閱讀 35,635評(píng)論 5 345
  • 正文 年R本政府宣布谅年,位于F島的核電站,受9級(jí)特大地震影響肮韧,放射性物質(zhì)發(fā)生泄漏融蹂。R本人自食惡果不足惜旺订,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望超燃。 院中可真熱鬧区拳,春花似錦、人聲如沸淋纲。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,855評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)洽瞬。三九已至,卻和暖如春业汰,著一層夾襖步出監(jiān)牢的瞬間伙窃,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,983評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工样漆, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留为障,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,048評(píng)論 3 370
  • 正文 我出身青樓放祟,卻偏偏與公主長(zhǎng)得像鳍怨,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子跪妥,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 前端 前后端分離 這不是一篇純技術(shù)文章鞋喇,而是一篇分享我個(gè)人在前后端分離路上收獲的點(diǎn)點(diǎn)滴滴的文章,以此來(lái)為準(zhǔn)備嘗試前...
    寒劍飄零閱讀 1,891評(píng)論 0 22
  • 本文系轉(zhuǎn)載,原作者纽疟,普元罐韩,敖顯奇 轉(zhuǎn)載本文需保留此處版權(quán)聲明:本文版權(quán)屬于EAII企業(yè)架構(gòu)創(chuàng)新研究院(微信號(hào):ea...
    普元云計(jì)算閱讀 4,973評(píng)論 8 96
  • 嘗試與改變 如果你沒(méi)有嘗試過(guò)前后端分離的工作流程,那么可以先試想一下這樣的流程改變:把流程從PM:“我要這個(gè)功能”...
    超人不會(huì)飛jjw閱讀 3,812評(píng)論 1 15
  • 前言 最近這一段時(shí)間由于Nodejs的逐漸成熟和日趨穩(wěn)定污朽,越來(lái)越多的公司中的前端團(tuán)隊(duì)開(kāi)始嘗試使用Nodejs來(lái)練一...
    a3b267eac00f閱讀 3,326評(píng)論 3 26
  • 2月底3月初的時(shí)候蟆肆,去廈門(mén)旅游矾睦。朋友送的美能達(dá)X700總是在旅行的路上才亮相多少有點(diǎn)對(duì)不住它。雖然相機(jī)玩兒不是很熟...
    一抹魚(yú)肚白閱讀 284評(píng)論 0 0