一、前言

”前后端分離“已經(jīng)成為互聯(lián)網(wǎng)項(xiàng)目開(kāi)發(fā)的業(yè)界標(biāo)桿卖词，通過(guò)Tomcat+Ngnix(也可以中間有個(gè)Node.js)巩那，有效地進(jìn)行解耦。并且前后端分離會(huì)為以后的大型分布式架構(gòu)此蜈、彈性計(jì)算架構(gòu)即横、微服務(wù)架構(gòu)、多端化服務(wù)（多種客戶端裆赵，例如：瀏覽器东囚，車(chē)載終端，安卓战授，IOS等等）打下堅(jiān)實(shí)的基礎(chǔ)舔庶。

前后端分離(解耦)的核心思想是：前端Html頁(yè)面通過(guò)Ajax調(diào)用后端的RestFul API并使用Json數(shù)據(jù)進(jìn)行交互。

注：【在互聯(lián)網(wǎng)架構(gòu)中陈醒，web服務(wù)器：一般指像nginx惕橙，apache這類(lèi)的服務(wù)器，他們一般只能解析靜態(tài)資源钉跷。 應(yīng)用服務(wù)器：一般指像tomcat弥鹦，jetty，resin這類(lèi)的服務(wù)器可以解析動(dòng)態(tài)資源也可以解析靜態(tài)資源爷辙，但解析靜態(tài)資源的能力沒(méi)有web服務(wù)器好彬坏。】

一般只有Web服務(wù)器才能被外網(wǎng)訪問(wèn)膝晾，應(yīng)用服務(wù)器只能內(nèi)網(wǎng)訪問(wèn)栓始。

二、為什么前后端分離

一般公司后端開(kāi)發(fā)人員直接兼顧前端的工作血当，一邊實(shí)現(xiàn)API接口幻赚，一邊開(kāi)發(fā)頁(yè)面禀忆，兩者互相切換著做，而且根據(jù)不同的url動(dòng)態(tài)拼接頁(yè)面落恼，這也導(dǎo)致后臺(tái)的開(kāi)發(fā)壓力大大增加箩退。前后端工作分配不均。不僅僅開(kāi)發(fā)效率慢佳谦，而且代碼難以維護(hù)戴涝。

而前后端分離的話，則可以很好的解決前后端分工不均的問(wèn)題钻蔑，將更多的交互邏輯分配給前端來(lái)處理啥刻，而后端則可以專注于其本職工作，比如提供API接口咪笑，進(jìn)行權(quán)限控制以及進(jìn)行運(yùn)算工作郑什。而前端開(kāi)發(fā)人員則可以利用nodejs來(lái)搭建自己的本地服務(wù)器，直接在本地開(kāi)發(fā)蒲肋，然后通過(guò)一些插件來(lái)將api請(qǐng)求轉(zhuǎn)發(fā)到后臺(tái)蘑拯，這樣就可以完全模擬線上的場(chǎng)景，并且與后臺(tái)解耦兜粘。前端可以獨(dú)立完成與用戶交互的整一個(gè)過(guò)程申窘，兩者都可以同時(shí)開(kāi)工，不互相依賴孔轴，開(kāi)發(fā)效率更快剃法，而且分工比較均衡。

三路鹰、從MVC到前后端分離

MVC 是一種經(jīng)典的設(shè)計(jì)模式贷洲，全名為 Model-View-Controller，即 模型-視圖-控制器晋柱。

其中优构，模型 是用于封裝數(shù)據(jù)的載體，例如雁竞，在 Java 中一般通過(guò)一個(gè)簡(jiǎn)單的 POJO（Plain Ordinary Java Object）來(lái)表示钦椭，其本質(zhì)是一個(gè)普通的 Java Bean，包含一系列的成員變量及其 getter/setter 方法碑诉。對(duì)于 視圖 而言彪腔，它更加偏重于展現(xiàn)，也就是說(shuō)进栽，視圖決定了界面到底長(zhǎng)什么樣子德挣，在 Java 中可通過(guò) JSP 來(lái)充當(dāng)視圖，或者通過(guò)純 HTML 的方式進(jìn)行展現(xiàn)快毛，而后者才是目前的主流格嗅。模型和視圖需要通過(guò) 控制器 來(lái)進(jìn)行粘合番挺，例如，用戶發(fā)送一個(gè) HTTP 請(qǐng)求吗浩，此時(shí)該請(qǐng)求首先會(huì)進(jìn)入控制器，然后控制器去獲取數(shù)據(jù)并將其封裝為模型没隘，最后將模型傳遞到視圖中進(jìn)行展現(xiàn)懂扼。

綜上所述，MVC 的交互過(guò)程如下圖所示：

也就是說(shuō)右蒲，我們輸入的是 AJAX 請(qǐng)求阀湿，輸出的是 JSON 數(shù)據(jù)，市面上有這樣的技術(shù)來(lái)實(shí)現(xiàn)這個(gè)功能嗎瑰妄？答案是 REST陷嘴。

REST 全稱是 Representational State Transfer（表述性狀態(tài)轉(zhuǎn)移），它是 Roy Fielding 博士在 2000 年寫(xiě)的一篇關(guān)于軟件架構(gòu)風(fēng)格的論文间坐，此文一出灾挨，威震四方！國(guó)內(nèi)外許多知名互聯(lián)網(wǎng)公司紛紛開(kāi)始采用這種輕量級(jí)的 Web 服務(wù)竹宋，大家習(xí)慣將其稱為 RESTful Web Services劳澄，或簡(jiǎn)稱 REST 服務(wù)。

如果將瀏覽器這一端視為前端蜈七，而服務(wù)器那一端視為后端的話秒拔，可以將以上改進(jìn)后的 MVC 模式簡(jiǎn)化為以下前后端分離模式：

可見(jiàn)，有了 REST 服務(wù)飒硅，前端關(guān)注界面展現(xiàn)砂缩，后端關(guān)注業(yè)務(wù)邏輯，分工明確三娩，職責(zé)清晰庵芭。

四、認(rèn)識(shí)Rest架構(gòu)

REST 本質(zhì)上是使用 URL 來(lái)訪問(wèn)資源種方式雀监。眾所周知喳挑，URL 就是我們平常使用的請(qǐng)求地址了，其中包括兩部分：請(qǐng)求方式 與 請(qǐng)求路徑滔悉，比較常見(jiàn)的請(qǐng)求方式是 GET 與 POST伊诵，但在 REST 中又提出了幾種其它類(lèi)型的請(qǐng)求方式，匯總起來(lái)有六種：GET回官、POST曹宴、PUT、DELETE歉提、HEAD笛坦、OPTIONS区转。

尤其是前四種，正好與CRUD（Create-Retrieve-Update-Delete版扩，增刪改查）四種操作相對(duì)應(yīng)废离，例如，GET（查）礁芦、POST（增）蜻韭、PUT（改）、DELETE（刪）柿扣，這正是 REST 與 CRUD 的異曲同工之妙肖方！需要強(qiáng)調(diào)的是，REST 是“面向資源”的未状，這里提到的資源俯画，實(shí)際上就是我們常說(shuō)的領(lǐng)域?qū)ο螅谙到y(tǒng)設(shè)計(jì)過(guò)程中司草，我們經(jīng)常通過(guò)領(lǐng)域?qū)ο髞?lái)進(jìn)行數(shù)據(jù)建模艰垂。

REST 是一個(gè)“無(wú)狀態(tài)”的架構(gòu)模式，因?yàn)樵谌魏螘r(shí)候都可以由客戶端發(fā)出請(qǐng)求到服務(wù)端埋虹，最終返回自己想要的數(shù)據(jù)材泄，當(dāng)前請(qǐng)求不會(huì)受到上次請(qǐng)求的影響。也就是說(shuō)吨岭，服務(wù)端將內(nèi)部資源發(fā)布 REST 服務(wù)拉宗，客戶端通過(guò) URL 來(lái)訪問(wèn)這些資源，這不就是 SOA 所提倡的“面向服務(wù)”的思想嗎辣辫？所以旦事，REST 也被人們看做是一種“輕量級(jí)”的 SOA 實(shí)現(xiàn)技術(shù)，因此在企業(yè)級(jí)應(yīng)用與互聯(lián)網(wǎng)應(yīng)用中都得到了廣泛應(yīng)用急灭。

下面我們舉幾個(gè)例子對(duì) REST 請(qǐng)求進(jìn)行簡(jiǎn)單描述：

image

可見(jiàn)姐浮，請(qǐng)求路徑相同，但請(qǐng)求方式不同葬馋，所代表的業(yè)務(wù)操作也不同卖鲤，例如，/advertiser/1 這個(gè)請(qǐng)求畴嘶，帶有 GET蛋逾、PUT、DELETE 三種不同的請(qǐng)求方式窗悯，對(duì)應(yīng)三種不同的業(yè)務(wù)操作区匣。

雖然 REST 看起來(lái)還是很簡(jiǎn)單的，實(shí)際上我們往往需要提供一個(gè) REST 框架蒋院，讓其實(shí)現(xiàn)前后端分離架構(gòu)亏钩，讓開(kāi)發(fā)人員將精力集中在業(yè)務(wù)上莲绰，而并非那些具體的技術(shù)細(xì)節(jié)。

五姑丑、前后端分離意義大嗎蛤签？

1、該網(wǎng)站前端變化遠(yuǎn)比后端變化頻繁栅哀，則意義大震肮。

2、該網(wǎng)站尚處于原始開(kāi)發(fā)模式昌屉，數(shù)據(jù)邏輯與表現(xiàn)邏輯混雜不清钙蒙，則意義大茵瀑。

3间驮、該網(wǎng)站前端團(tuán)隊(duì)和后端團(tuán)隊(duì)分屬兩個(gè)領(lǐng)導(dǎo)班子，技能點(diǎn)差異很大马昨，則意義大竞帽。

4、該網(wǎng)站前端效果絢麗/跨設(shè)備兼容要求高鸿捧，則意義大屹篓。

六、術(shù)業(yè)有專攻（開(kāi)發(fā)人員分離）

以前的JavaWeb項(xiàng)目大多數(shù)都是java程序員又當(dāng)?shù)之?dāng)媽匙奴，又搞前端（ajax/jquery/js/html/css等等）堆巧，又搞后端（java/mysql/oracle等等）。

隨著時(shí)代的發(fā)展泼菌，漸漸的許多大中小公司開(kāi)始把前后端的界限分的越來(lái)越明確谍肤，前端工程師只管前端的事情，后端工程師只管后端的事情哗伯。

正所謂術(shù)業(yè)有專攻荒揣，一個(gè)人如果什么都會(huì)，那么他畢竟什么都不精焊刹。

大中型公司需要專業(yè)人才系任，小公司需要全才，但是對(duì)于個(gè)人職業(yè)發(fā)展來(lái)說(shuō)虐块，我建議是分開(kāi)俩滥。

對(duì)于后端java工程師：

把精力放在java基礎(chǔ)，設(shè)計(jì)模式贺奠，jvm原理举农，spring+springmvc原理及源碼，linux敞嗡，mysql事務(wù)隔離與鎖機(jī)制颁糟，mongodb航背，http/tcp，多線程棱貌，分布式架構(gòu)（dubbo玖媚，dubbox，spring cloud）婚脱，彈性計(jì)算架構(gòu)今魔，微服務(wù)架構(gòu)（springboot+zookeeper+docker+jenkins），java性能優(yōu)化障贸，以及相關(guān)的項(xiàng)目管理等等错森。

后端追求的是：三高（高并發(fā)，高可用篮洁，高性能）涩维，安全，存儲(chǔ)袁波，業(yè)務(wù)等等瓦阐。

對(duì)于前端工程師：

把精力放在html5，css3篷牌，jquery睡蟋，angularjs，bootstrap枷颊，reactjs戳杀，vuejs，webpack夭苗，less/sass信卡，gulp，nodejs听诸，Google V8引擎坐求，javascript多線程，模塊化晌梨，面向切面編程桥嗤，設(shè)計(jì)模式，瀏覽器兼容性仔蝌，性能優(yōu)化等等泛领。

前端追求的是：頁(yè)面表現(xiàn)，速度流暢敛惊，兼容性渊鞋，用戶體驗(yàn)等等。

七、耦合時(shí)代

幾曾何時(shí)锡宋，我們的JavaWeb項(xiàng)目都是使用了若干后臺(tái)框架儡湾，springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等。

大多數(shù)項(xiàng)目在java后端都是分了三層执俩，控制層（controller/action）徐钠，業(yè)務(wù)層（service/manage），持久層（dao）役首。

控制層負(fù)責(zé)接收參數(shù)尝丐，調(diào)用相關(guān)業(yè)務(wù)層，封裝數(shù)據(jù)衡奥，以及路由&渲染到j(luò)sp頁(yè)面爹袁。

然后jsp頁(yè)面上使用各種標(biāo)簽（jstl/el/struts標(biāo)簽等）或者手寫(xiě)java表達(dá)式（<%=%>）將后臺(tái)的數(shù)據(jù)展現(xiàn)出來(lái)，玩的是MVC那套思路矮固。

我們先看這種情況：需求定完了失息，代碼寫(xiě)完了，測(cè)試測(cè)完了乏屯，然后呢根时？要發(fā)布了吧瘦赫？

你需要用maven或者eclipse等工具把你的代碼打成一個(gè)war包辰晕，然后把這個(gè)war包發(fā)布到你的生產(chǎn)環(huán)境下的web容器（tomcat/jboss/weblogic/websphere/jetty/resin）里，對(duì)吧确虱？

發(fā)布完了之后含友，你要啟動(dòng)你的web容器，開(kāi)始提供服務(wù)校辩，這時(shí)候你通過(guò)配置域名窘问，dns等等相關(guān)，你的網(wǎng)站就可以訪問(wèn)了（假設(shè)你是個(gè)網(wǎng)站）宜咒。

那我們來(lái)看惠赫，你的前后端代碼是不是全都在那個(gè)war包里？包括你的js故黑，css儿咱，圖片，各種第三方的庫(kù)场晶，對(duì)吧混埠？

好，下面在瀏覽器中輸入你的網(wǎng)站域名（www.xxx.com）诗轻，之后發(fā)生了什么钳宪？（這個(gè)問(wèn)題也是很多公司的面試題）

我撿干的說(shuō)了啊，基礎(chǔ)不好的童鞋請(qǐng)自己去搜。

瀏覽器在通過(guò)域名通過(guò)dns服務(wù)器找到你的服務(wù)器外網(wǎng)ip,將http請(qǐng)求發(fā)送到你的服務(wù)器吏颖，在tcp3次握手之后（http下面是tcp/ip）搔体，通過(guò)tcp協(xié)議開(kāi)始傳輸數(shù)據(jù)，你的服務(wù)器得到請(qǐng)求后半醉，開(kāi)始提供服務(wù)嫉柴，接收參數(shù)，之后返回你的應(yīng)答給瀏覽器奉呛，瀏覽器再通過(guò)content-type來(lái)解析你返回的內(nèi)容计螺，呈現(xiàn)給用戶。

那么我們來(lái)看瞧壮，我們先假設(shè)你的首頁(yè)中有100張圖片登馒，此時(shí)，用戶的看似一次http請(qǐng)求咆槽，其實(shí)并不是一次陈轿，用戶在第一次訪問(wèn)的時(shí)候，瀏覽器中不會(huì)有緩存秦忿，你的100張圖片麦射，瀏覽器要連著請(qǐng)求100次http請(qǐng)求（有人會(huì)跟我說(shuō)http長(zhǎng)連短連的問(wèn)題，不在這里討論）灯谣，你的服務(wù)器接收這些請(qǐng)求潜秋，都需要耗費(fèi)內(nèi)存去創(chuàng)建socket來(lái)玩tcp傳輸（消耗你服務(wù)器上的計(jì)算資源）。

重點(diǎn)來(lái)了胎许，這樣的話峻呛，你的服務(wù)器的壓力會(huì)非常大，因?yàn)轫?yè)面中的所有請(qǐng)求都是只請(qǐng)求到你這臺(tái)服務(wù)器上辜窑，如果1個(gè)人還好钩述，如果10000個(gè)人并發(fā)訪問(wèn)呢（先不聊服務(wù)器集群，這里就說(shuō)是單實(shí)例服務(wù)器）穆碎，那你的服務(wù)器能扛住多少個(gè)tcp連接牙勘？你的帶寬有多大？你的服務(wù)器的內(nèi)存有多大所禀？你的硬盤(pán)是高性能的嗎方面？你能抗住多少I(mǎi)O？你給web服務(wù)器分的內(nèi)存有多大北秽？會(huì)不會(huì)宕機(jī)葡幸？

這就是為什么，越是大中型的web應(yīng)用贺氓，他們?cè)绞且怦睢?/b>

理論上你可以把你的數(shù)據(jù)庫(kù)+應(yīng)用服務(wù)+消息隊(duì)列+緩存+用戶上傳的文件+日志+等等都扔在一臺(tái)服務(wù)器上蔚叨，你也不用玩什么服務(wù)治理床蜘，也不用做什么性能監(jiān)控，什么報(bào)警機(jī)制等等蔑水，就亂成一鍋粥好了邢锯。

但是這樣就好像是你把雞蛋都放在一個(gè)籃子里，隱患非常大搀别。如果因?yàn)橐粋€(gè)子應(yīng)用的內(nèi)存不穩(wěn)定導(dǎo)致整個(gè)服務(wù)器內(nèi)存溢出而hung住丹擎，那你的整個(gè)網(wǎng)站就掛掉了。

如果出意外掛掉歇父，而恰好這時(shí)你們的業(yè)務(wù)又處于井噴式發(fā)展高峰期蒂培，那么恭喜你，業(yè)務(wù)成功被技術(shù)卡住榜苫，很可能會(huì)流失大量用戶护戳，后果不堪設(shè)想。

注意：技術(shù)一定是要走在業(yè)務(wù)前面的垂睬，否則你將錯(cuò)過(guò)最佳的發(fā)展期媳荒。

此外，你的應(yīng)用全部都耦合在一起驹饺，相當(dāng)于一個(gè)巨石钳枕，當(dāng)服務(wù)端負(fù)載能力不足時(shí)，一般會(huì)使用負(fù)載均衡的方式赏壹，將服務(wù)器做成集群鱼炒，這樣其實(shí)你是在水平擴(kuò)展一塊塊巨石，性能加速度會(huì)越來(lái)越低卡儒，要知道田柔，本身負(fù)載就低的功能or模塊是沒(méi)有必要水平擴(kuò)展的俐巴，在本文中的例子就是你的性能瓶頸不在前端骨望，那干嘛要水平擴(kuò)展前端呢？欣舵？擎鸠？

還有發(fā)版部署上線的時(shí)候，我明明只改了后端的代碼缘圈，為什么要前端也跟著發(fā)布呢劣光？？糟把？（引用：《架構(gòu)探險(xiǎn)-輕量級(jí)微服務(wù)架構(gòu)》绢涡，黃勇）

正常的互聯(lián)網(wǎng)架構(gòu)，是都要拆開(kāi)的遣疯，你的web服務(wù)器集群雄可，你的應(yīng)用服務(wù)器集群+文件服務(wù)器集群+數(shù)據(jù)庫(kù)服務(wù)器集群+消息隊(duì)列集群+緩存集群等等。

JSP的痛點(diǎn)

以前的javaWeb項(xiàng)目大多數(shù)使用jsp作為頁(yè)面層展示數(shù)據(jù)給用戶，因?yàn)榱髁坎桓呤唬虼艘矝](méi)有那么苛刻的性能要求聪舒，但現(xiàn)在是大數(shù)據(jù)時(shí)代，對(duì)于互聯(lián)網(wǎng)項(xiàng)目的性能要求是越來(lái)越高虐急，因此原始的前后端耦合在一起的架構(gòu)模式已經(jīng)逐漸不能滿足我們箱残，因此我們需要需找一種解耦的方式，來(lái)大幅度提升我們的負(fù)載能力止吁。

1.動(dòng)態(tài)資源和靜態(tài)資源全部耦合在一起被辑，服務(wù)器壓力大，因?yàn)榉?wù)器會(huì)收到各種http請(qǐng)求敬惦，例如css的http請(qǐng)求敷待，js的，圖片的等等仁热。

一旦服務(wù)器出現(xiàn)狀況榜揖，前后臺(tái)一起玩完，用戶體驗(yàn)極差抗蠢。

2.UI出好設(shè)計(jì)圖后举哟，前端工程師只負(fù)責(zé)將設(shè)計(jì)圖切成html，需要由java工程師來(lái)將html套成jsp頁(yè)面迅矛，出錯(cuò)率較高（因?yàn)轫?yè)面中經(jīng)常會(huì)出現(xiàn)大量的js代碼）妨猩，

修改問(wèn)題時(shí)需要雙方協(xié)同開(kāi)發(fā)，效率低下秽褒。

3.jsp必須要在支持java的web服務(wù)器里運(yùn)行（例如tomcat壶硅，jetty，resin等）销斟，無(wú)法使用nginx等（nginx據(jù)說(shuō)單實(shí)例http并發(fā)高達(dá)5w庐椒，這個(gè)優(yōu)勢(shì)要用上），

性能提不上來(lái)蚂踊。

4.第一次請(qǐng)求jsp约谈，必須要在web服務(wù)器中編譯成servlet，第一次運(yùn)行會(huì)較慢犁钟。

5.每次請(qǐng)求jsp都是訪問(wèn)servlet再用輸出流輸出的html頁(yè)面棱诱，效率沒(méi)有直接使用html高（是每次喲，親~）涝动。

6.jsp內(nèi)有較多標(biāo)簽和表達(dá)式迈勋，前端工程師在修改頁(yè)面時(shí)會(huì)捉襟見(jiàn)肘，遇到很多痛點(diǎn)醋粟。

7.如果jsp中的內(nèi)容很多靡菇，頁(yè)面響應(yīng)會(huì)很慢担败，因?yàn)槭峭郊虞d。

8.需要前端工程師使用java的ide（例如eclipse）镰官，以及需要配置各種后端的開(kāi)發(fā)環(huán)境提前，你們有考慮過(guò)前端工程師的感受嗎。

基于上述的一些痛點(diǎn)泳唠，我們應(yīng)該把整個(gè)項(xiàng)目的開(kāi)發(fā)權(quán)重往前移狈网，實(shí)現(xiàn)前后端真正的解耦！

開(kāi)發(fā)模式

以前老的方式是：

產(chǎn)品經(jīng)歷/領(lǐng)導(dǎo)/客戶提出需求

UI做出設(shè)計(jì)圖

前端工程師做html頁(yè)面

后端工程師將html頁(yè)面套成jsp頁(yè)面（前后端強(qiáng)依賴笨腥，后端必須要等前端的html做好才能套jsp拓哺。如果html發(fā)生變更，就更痛了脖母，開(kāi)發(fā)效率低）

集成出現(xiàn)問(wèn)題

前端返工

后端返工

二次集成

集成成功

交付

新的方式是：

產(chǎn)品經(jīng)歷/領(lǐng)導(dǎo)/客戶提出需求

UI做出設(shè)計(jì)圖

前后端約定接口&數(shù)據(jù)&參數(shù)

前后端并行開(kāi)發(fā)（無(wú)強(qiáng)依賴士鸥，可前后端并行開(kāi)發(fā)，如果需求變更谆级，只要接口&參數(shù)不變烤礁，就不用兩邊都修改代碼，開(kāi)發(fā)效率高）

前后端集成

前端頁(yè)面調(diào)整

集成成功

交付

請(qǐng)求方式

以前老的方式是：

客戶端請(qǐng)求

服務(wù)端的servlet或controller接收請(qǐng)求（后端控制路由與渲染頁(yè)面肥照，整個(gè)項(xiàng)目開(kāi)發(fā)的權(quán)重大部分在后端）

調(diào)用service,dao代碼完成業(yè)務(wù)邏輯

返回jsp

jsp展現(xiàn)一些動(dòng)態(tài)的代碼

新的方式是：

瀏覽器發(fā)送請(qǐng)求

直接到達(dá)html頁(yè)面（前端控制路由與渲染頁(yè)面脚仔，整個(gè)項(xiàng)目開(kāi)發(fā)的權(quán)重前移）

html頁(yè)面負(fù)責(zé)調(diào)用服務(wù)端接口產(chǎn)生數(shù)據(jù)（通過(guò)ajax等等，后臺(tái)返回json格式數(shù)據(jù)舆绎，json數(shù)據(jù)格式因?yàn)楹?jiǎn)潔高效而取代xml）

填充html鲤脏，展現(xiàn)動(dòng)態(tài)效果，在頁(yè)面上進(jìn)行解析并操作DOM吕朵。

（有興趣的童鞋可以訪問(wèn)一下阿里巴巴等大型網(wǎng)站猎醇，然后按一下F12，監(jiān)控一下你刷新一次頁(yè)面努溃，他的http是怎么玩的硫嘶，大多數(shù)都是單獨(dú)請(qǐng)求后臺(tái)數(shù)據(jù)，使用json傳輸數(shù)據(jù)茅坛，而不是一個(gè)大而全的http請(qǐng)求把整個(gè)頁(yè)面包括動(dòng)+靜全部返回過(guò)來(lái)）

總結(jié)一下新的方式的請(qǐng)求步驟：

大量并發(fā)瀏覽器請(qǐng)求--->web服務(wù)器集群(nginx)--->應(yīng)用服務(wù)器集群(tomcat)--->文件/數(shù)據(jù)庫(kù)/緩存/消息隊(duì)列服務(wù)器集群

同時(shí)又可以玩分模塊音半，還可以按業(yè)務(wù)拆成一個(gè)個(gè)的小集群，為后面的架構(gòu)升級(jí)做準(zhǔn)備贡蓖。

前后分離的優(yōu)勢(shì)

1.可以實(shí)現(xiàn)真正的前后端解耦，前端服務(wù)器使用nginx煌茬。

前端/WEB服務(wù)器放的是css斥铺，js，圖片等等一系列靜態(tài)資源（甚至你還可以css坛善，js晾蜘，圖片等資源放到特定的文件服務(wù)器邻眷，例如阿里云的oss，并使用cdn加速）剔交，前端服務(wù)器負(fù)責(zé)控制頁(yè)面引用&跳轉(zhuǎn)&路由肆饶，前端頁(yè)面異步調(diào)用后端的接口，后端/應(yīng)用服務(wù)器使用tomcat（把tomcat想象成一個(gè)數(shù)據(jù)提供者）岖常，加快整體響應(yīng)速度驯镊。

這里需要使用一些前端工程化的框架比如nodejs，react竭鞍，router板惑，react，redux偎快，webpack

2.發(fā)現(xiàn)bug冯乘，可以快速定位是誰(shuí)的問(wèn)題，不會(huì)出現(xiàn)互相踢皮球的現(xiàn)象晒夹。

頁(yè)面邏輯裆馒，跳轉(zhuǎn)錯(cuò)誤，瀏覽器兼容性問(wèn)題丐怯，腳本錯(cuò)誤领追，頁(yè)面樣式等問(wèn)題，全部由前端工程師來(lái)負(fù)責(zé)响逢。

接口數(shù)據(jù)出錯(cuò)绒窑，數(shù)據(jù)沒(méi)有提交成功，應(yīng)答超時(shí)等問(wèn)題舔亭，全部由后端工程師來(lái)解決些膨。

雙方互不干擾，前端與后端是相親相愛(ài)的一家人钦铺。

3.在大并發(fā)情況下订雾，我可以同時(shí)水平擴(kuò)展前后端服務(wù)器，比如淘寶的一個(gè)首頁(yè)就需要2000+臺(tái)前端服務(wù)器做集群來(lái)抗住日均多少億+的日均pv矛洞。

去參加阿里的技術(shù)峰會(huì)洼哎，聽(tīng)他們說(shuō)他們的web容器都是自己寫(xiě)的，就算他單實(shí)例抗10萬(wàn)http并發(fā)沼本，2000臺(tái)是2億http并發(fā)噩峦，并且他們還可以根據(jù)預(yù)知洪峰來(lái)無(wú)限拓展，很恐怖抽兆，就一個(gè)首頁(yè)识补。。辫红。

4.減少后端服務(wù)器的并發(fā)/負(fù)載壓力

除了接口以外的其他所有http請(qǐng)求全部轉(zhuǎn)移到前端nginx上凭涂，接口的請(qǐng)求調(diào)用tomcat祝辣，參考nginx反向代理tomcat。

且除了第一次頁(yè)面請(qǐng)求外切油，瀏覽器會(huì)大量調(diào)用本地緩存蝙斜。

5.即使后端服務(wù)暫時(shí)超時(shí)或者宕機(jī)了，前端頁(yè)面也會(huì)正常訪問(wèn)澎胡，只不過(guò)數(shù)據(jù)刷不出來(lái)而已孕荠。

6.也許你也需要有微信相關(guān)的輕應(yīng)用，那樣你的接口完全可以共用滤馍，如果也有app相關(guān)的服務(wù)岛琼，那么只要通過(guò)一些代碼重構(gòu)，也可以大量復(fù)用接口巢株，提升效率槐瑞。（多端應(yīng)用）

7.頁(yè)面顯示的東西再多也不怕，因?yàn)槭钱惒郊虞d阁苞。

8.nginx支持頁(yè)面熱部署困檩，不用重啟服務(wù)器，前端升級(jí)更無(wú)縫那槽。

9.增加代碼的維護(hù)性&易讀性（前后端耦在一起的代碼讀起來(lái)相當(dāng)費(fèi)勁）悼沿。

10.提升開(kāi)發(fā)效率，因?yàn)榭梢郧昂蠖瞬⑿虚_(kāi)發(fā)骚灸，而不是像以前的強(qiáng)依賴糟趾。

11.在nginx中部署證書(shū)，外網(wǎng)使用https訪問(wèn)甚牲，并且只開(kāi)放443和80端口义郑，其他端口一律關(guān)閉（防止黑客端口掃描），

內(nèi)網(wǎng)使用http丈钙，性能和安全都有保障非驮。

12.前端大量的組件代碼得以復(fù)用，組件化雏赦，提升開(kāi)發(fā)效率劫笙，抽出來(lái)！

注意事項(xiàng)

1.在開(kāi)需求會(huì)議的時(shí)候星岗，前后端工程師必須全部參加填大，并且需要制定好接口文檔，后端工程師要寫(xiě)好測(cè)試用例（2個(gè)維度）伍茄，不要讓前端工程師充當(dāng)你的專職測(cè)試栋盹，

推薦使用chrome的插件postman或soapui或jmeter，service層的測(cè)試用例拿junit寫(xiě)敷矫。ps：前端也可以玩單元測(cè)試嗎例获？

2.上述的接口并不是java里的interface，說(shuō)白了調(diào)用接口就是調(diào)用你controler里的方法曹仗。

3.加重了前端團(tuán)隊(duì)的工作量榨汤，減輕了后端團(tuán)隊(duì)的工作量，提高了性能和可擴(kuò)展性怎茫。

4.我們需要一些前端的框架來(lái)解決類(lèi)似于頁(yè)面嵌套收壕，分頁(yè)，頁(yè)面跳轉(zhuǎn)控制等功能轨蛤。（上面提到的那些前端框架）蜜宪。

5.如果你的項(xiàng)目很小，或者是一個(gè)單純的內(nèi)網(wǎng)項(xiàng)目祥山，那你大可放心圃验，不用任何架構(gòu)而言，但是如果你的項(xiàng)目是外網(wǎng)項(xiàng)目缝呕，呵呵噠澳窑。

6.以前還有人在使用類(lèi)似于velocity/freemarker等模板框架來(lái)生成靜態(tài)頁(yè)面，仁者見(jiàn)仁智者見(jiàn)智供常。

7.這篇文章主要的目的是說(shuō)jsp在大型外網(wǎng)java web項(xiàng)目中被淘汰掉摊聋，可沒(méi)說(shuō)jsp可以完全不學(xué)，對(duì)于一些學(xué)生朋友來(lái)說(shuō)栈暇，jsp/servlet等相關(guān)的java web基礎(chǔ)還是要掌握牢的麻裁，不然你以為springmvc這種框架是基于什么來(lái)寫(xiě)的？

8.如果頁(yè)面上有一些權(quán)限等等相關(guān)的校驗(yàn)源祈，那么這些相關(guān)的數(shù)據(jù)也可以通過(guò)ajax從接口里拿煎源。

9.對(duì)于既可以前端做也可以后端做的邏輯，我建議是放到前端新博，為什么薪夕？

因?yàn)槟愕倪壿嬓枰?jì)算資源進(jìn)行計(jì)算，如果放到后端去run邏輯赫悄，則會(huì)消耗帶寬&內(nèi)存&cpu等等計(jì)算資源原献，你要記住一點(diǎn)就是：服務(wù)端的計(jì)算資源是有限的，而如果放到前端埂淮，使用的是客戶端的計(jì)算資源姑隅，這樣你的服務(wù)端負(fù)載就會(huì)下降（高并發(fā)場(chǎng)景）。

類(lèi)似于數(shù)據(jù)校驗(yàn)這種倔撞，前后端都需要做讲仰！

10.前端需要有機(jī)制應(yīng)對(duì)后端請(qǐng)求超時(shí)以及后端服務(wù)宕機(jī)的情況，友好的展示給用戶痪蝇。

擴(kuò)展閱讀

1.其實(shí)對(duì)于js鄙陡，css冕房，圖片這類(lèi)的靜態(tài)資源可以考慮放到類(lèi)似于阿里云的oss這類(lèi)文件服務(wù)器上（如果是普通的服務(wù)器&操作系統(tǒng)，存儲(chǔ)在到達(dá)pb級(jí)的文件后趁矾，或者單個(gè)文件夾內(nèi)的文件數(shù)量達(dá)到3-5萬(wàn)耙册，io會(huì)有很?chē)?yán)重的性能問(wèn)題），再在oss上配cdn（全國(guó)子節(jié)點(diǎn)加速）毫捣，這樣你頁(yè)面打開(kāi)的速度像飛一樣详拙， 無(wú)論你在全國(guó)的哪個(gè)地方，并且你的nginx的負(fù)載會(huì)進(jìn)一步降低蔓同。

2.如果你要玩輕量級(jí)微服務(wù)架構(gòu)饶辙，要使用nodejs做網(wǎng)關(guān)，用nodejs的好處還有利于seo優(yōu)化斑粱，因?yàn)閚ginx只是向?yàn)g覽器返回頁(yè)面靜態(tài)資源弃揽，而國(guó)內(nèi)的搜索引擎爬蟲(chóng)只會(huì)抓取靜態(tài)數(shù)據(jù)，不會(huì)解析頁(yè)面中的js珊佣，這使得應(yīng)用得不到良好的搜索引擎支持鹏溯。同時(shí)因?yàn)閚ginx不會(huì)進(jìn)行頁(yè)面的組裝渲染抄肖，需要把靜態(tài)頁(yè)面返回到瀏覽器祝钢，然后完成渲染工作催跪，這加重了瀏覽器的渲染負(fù)擔(dān)。

瀏覽器發(fā)起的請(qǐng)求經(jīng)過(guò)nginx進(jìn)行分發(fā)惑艇，URL請(qǐng)求統(tǒng)一分發(fā)到nodejs蒿辙，在nodejs中進(jìn)行頁(yè)面組裝渲染；API請(qǐng)求則直接發(fā)送到后端服務(wù)器滨巴，完成響應(yīng)思灌。

3.如果遇到跨域問(wèn)題，spring4的CORS可以完美解決恭取，但一般使用nginx反向代理都不會(huì)有跨域問(wèn)題泰偿，除非你把前端服務(wù)和后端服務(wù)分成兩個(gè)域名。

JSONP的方式也被淘汰掉了蜈垮。

4.如果想玩多端應(yīng)用耗跛，注意要去掉tomcat原生的session機(jī)制，要使用token機(jī)制攒发，使用緩存（因?yàn)槭欠植际较到y(tǒng)）调塌，做單點(diǎn)，對(duì)于token機(jī)制的安全性問(wèn)題惠猿，可以搜一下jwt羔砾。

5.前端項(xiàng)目中可以加入mock測(cè)試（構(gòu)造虛擬測(cè)試對(duì)象來(lái)模擬后端，可以獨(dú)立開(kāi)發(fā)和測(cè)試），后端需要有詳細(xì)的測(cè)試用例姜凄，保證服務(wù)的可用性與穩(wěn)定性政溃。

總結(jié)

前后端分離并非僅僅只是一種開(kāi)發(fā)模式，而是一種架構(gòu)模式（前后端分離架構(gòu)）檀葛。

千萬(wàn)不要以為只有在擼代碼的時(shí)候把前端和后端分開(kāi)就是前后端分離了玩祟。需要區(qū)分前后端項(xiàng)目腹缩。前端項(xiàng)目與后端項(xiàng)目是兩個(gè)項(xiàng)目屿聋，放在兩個(gè)不同的服務(wù)器，需要獨(dú)立部署藏鹊，兩個(gè)不同的工程润讥，兩個(gè)不同的代碼庫(kù)，不同的開(kāi)發(fā)人員盘寡。

前后端工程師需要約定交互接口楚殿，實(shí)現(xiàn)并行開(kāi)發(fā)，開(kāi)發(fā)結(jié)束后需要進(jìn)行獨(dú)立部署竿痰，前端通過(guò)ajax來(lái)調(diào)用http請(qǐng)求調(diào)用后端的restful api脆粥。

前端只需要關(guān)注頁(yè)面的樣式與動(dòng)態(tài)數(shù)據(jù)的解析&渲染，而后端專注于具體業(yè)務(wù)邏輯影涉。

作者：大前端圈子

鏈接：http://www.reibang.com/p/4cbbc56f3f02

來(lái)源：簡(jiǎn)書(shū)

著作權(quán)歸作者所有变隔。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處蟹倾。