作者：偏頭痛楊

來源：https://blog.csdn.net/piantoutongyang

一入桂、前戲

前后端分離已成為互聯(lián)網項目開發(fā)的業(yè)界標準使用方式，通過nginx+tomcat的方式（也可以中間加一個nodejs）有效的進行解耦驳阎，并且前后端分離會為以后的大型分布式架構抗愁、彈性計算架構、微服務架構呵晚、多端化服務（多種客戶端蜘腌，例如：瀏覽器，車載終端饵隙，安卓撮珠，IOS等等）打下堅實的基礎。這個步驟是系統(tǒng)架構從猿進化成人的必經之路金矛。

核心思想是前端html頁面通過ajax調用后端的restuful api接口并使用json數據進行交互芯急。

在互聯(lián)網架構中勺届，名詞解釋：

Web服務器：一般指像nginx，apache這類的服務器娶耍，他們一般只能解析靜態(tài)資源免姿。

應用服務器：一般指像tomcat，jetty榕酒，resin這類的服務器可以解析動態(tài)資源也可以解析靜態(tài)資源胚膊，但解析靜態(tài)資源的能力沒有web服務器好。

一般都是只有web服務器才能被外網訪問想鹰，應用服務器只能內網訪問紊婉。

二、術業(yè)有專攻（開發(fā)人員分離）

以前的JavaWeb項目大多數都是java程序員又當爹又當媽辑舷，又搞前端喻犁，又搞后端。

隨著時代的發(fā)展何缓，漸漸的許多大中小公司開始把前后端的界限分的越來越明確株汉，前端工程師只管前端的事情，后端工程師只管后端的事情歌殃。正所謂術業(yè)有專攻，一個人如果什么都會蝙云，那么他畢竟什么都不精氓皱。

大中型公司需要專業(yè)人才，小公司需要全才勃刨，但是對于個人職業(yè)發(fā)展來說波材，我建議是分開。

1身隐、對于后端java工程師：

把精力放在java基礎廷区，設計模式，jvm原理贾铝，spring+springmvc原理及源碼隙轻，linux，mysql事務隔離與鎖機制垢揩，mongodb玖绿，http/tcp，多線程叁巨，分布式架構斑匪，彈性計算架構，微服務架構锋勺，java性能優(yōu)化蚀瘸，以及相關的項目管理等等狡蝶。

后端追求的是：三高（高并發(fā)，高可用贮勃，高性能）贪惹，安全，存儲衙猪，業(yè)務等等馍乙。

2、對于前端工程師：

把精力放在html5垫释，css3丝格，jquery，angularjs棵譬，bootstrap显蝌，reactjs，vuejs订咸，webpack曼尊，less/sass，gulp脏嚷，nodejs骆撇，Google V8引擎，javascript多線程父叙，模塊化神郊，面向切面編程，設計模式趾唱，瀏覽器兼容性涌乳，性能優(yōu)化等等。

前端追求的是：頁面表現甜癞，速度流暢夕晓，兼容性，用戶體驗等等悠咱。

術業(yè)有專攻蒸辆，這樣你的核心競爭力才會越來越高，正所謂你往生活中投入什么乔煞，生活就會反饋給你什么吁朦。并且兩端的發(fā)展都越來越高深，你想什么都會渡贾，那你畢竟什么都不精逗宜。

通過將team分成前后端team，讓兩邊的工程師更加專注各自的領域，獨立治理纺讲，然后構建出一個全棧式的精益求精的team擂仍。

三、原始人時代（各種耦合）

幾曾何時熬甚，我們的JavaWeb項目都是使用了若干后臺框架逢渔，springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等。

大多數項目在java后端都是分了三層乡括，控制層肃廓，業(yè)務層，持久層诲泌∶ど蓿控制層負責接收參數，調用相關業(yè)務層敷扫，封裝數據哀蘑，以及路由&渲染到jsp頁面。然后jsp頁面上使用各種標簽或者手寫java表達式將后臺的數據展現出來葵第，玩的是MVC那套思路绘迁。

我們先看這種情況：需求定完了，代碼寫完了卒密，測試測完了缀台，然后呢？要發(fā)布了吧哮奇？你需要用maven或者eclipse等工具把你的代碼打成一個war包将硝，然后把這個war包發(fā)布到你的生產環(huán)境下的web容器里，對吧屏镊？

發(fā)布完了之后，你要啟動你的web容器痰腮，開始提供服務而芥，這時候你通過配置域名，dns等等相關膀值，你的網站就可以訪問了（假設你是個網站）棍丐。那我們來看，你的前后端代碼是不是全都在那個war包里沧踏？包括你的js歌逢，css，圖片翘狱，各種第三方的庫秘案，對吧？

好，下面在瀏覽器中輸入你的網站域名（www.xxx.com）阱高，之后發(fā)生了什么赚导？（這個問題也是很多公司的面試題）我撿干的說了啊，基礎不好的童鞋請自己去搜赤惊。

瀏覽器在通過域名通過dns服務器找到你的服務器外網ip,將http請求發(fā)送到你的服務器吼旧，在tcp3次握手之后（http下面是tcp/ip），通過tcp協(xié)議開始傳輸數據未舟，你的服務器得到請求后圈暗，開始提供服務，接收參數裕膀，之后返回你的應答給瀏覽器员串，瀏覽器再通過content-type來解析你返回的內容，呈現給用戶魂角。

那么我們來看昵济，我們先假設你的首頁中有100張圖片，此時野揪，用戶的看似一次http請求访忿，其實并不是一次，用戶在第一次訪問的時候斯稳，瀏覽器中不會有緩存海铆，你的100張圖片，瀏覽器要連著請求100次http請求（有人會跟我說http長連短連的問題挣惰，不在這里討論）卧斟，你的服務器接收這些請求，都需要耗費內存去創(chuàng)建socket來玩tcp傳輸（消耗你服務器上的計算資源）憎茂。

重點來了珍语，這樣的話，你的服務器的壓力會非常大竖幔，因為頁面中的所有請求都是只請求到你這臺服務器上板乙，如果1個人還好，如果10000個人并發(fā)訪問呢（先不聊服務器集群拳氢，這里就說是單實例服務器）募逞，那你的服務器能扛住多少個tcp連接？你的帶寬有多大馋评？你的服務器的內存有多大放接？你的硬盤是高性能的嗎？你能抗住多少IO留特？你給web服務器分的內存有多大纠脾？會不會宕機玛瘸？

這就是為什么，越是大中型的web應用乳乌，他們越是要解耦捧韵。理論上你可以把你的數據庫+應用服務+消息隊列+緩存+用戶上傳的文件+日志+等等都扔在一臺服務器上，你也不用玩什么服務治理汉操，也不用做什么性能監(jiān)控再来，什么報警機制等等，就亂成一鍋粥好了磷瘤。但是這樣就好像是你把雞蛋都放在一個籃子里芒篷，隱患非常大。如果因為一個子應用的內存不穩(wěn)定導致整個服務器內存溢出而hung住采缚，那你的整個網站就掛掉了针炉。

如果出意外掛掉，而恰好這時你們的業(yè)務又處于井噴式發(fā)展高峰期扳抽，那么恭喜你篡帕，業(yè)務成功被技術卡住，很可能會流失大量用戶贸呢，后果不堪設想镰烧。（注意：技術一定是要走在業(yè)務前面的，否則你將錯過最佳的發(fā)展期喲楞陷，親~）

此外怔鳖，你的應用全部都耦合在一起，相當于一個巨石固蛾，當服務端負載能力不足時结执，一般會使用負載均衡的方式，將服務器做成集群艾凯，這樣其實你是在水平擴展一塊塊巨石献幔，性能加速度會越來越低，要知道趾诗，本身負載就低的功能or模塊是沒有必要水平擴展的斜姥，在本文中的例子就是你的性能瓶頸不在前端，那干嘛要水平擴展前端呢沧竟？？缚忧？還有發(fā)版部署上線的時候悟泵，我明明只改了后端的代碼，為什么要前端也跟著發(fā)布呢闪水？糕非？？

正常的互聯(lián)網架構，是都要拆開的朽肥，你的web服務器集群禁筏，你的應用服務器集群+文件服務器集群+數據庫服務器集群+消息隊列集群+緩存集群等等。

四衡招、JSP的痛點

以前的javaWeb項目大多數使用jsp作為頁面層展示數據給用戶篱昔，因為流量不高，因此也沒有那么苛刻的性能要求始腾，但現在是大數據時代州刽，對于互聯(lián)網項目的性能要求是越來越高，因此原始的前后端耦合在一起的架構模式已經逐漸不能滿足我們浪箭，因此我們需要需找一種解耦的方式穗椅，來大幅度提升我們的負載能力。

1奶栖、動態(tài)資源和靜態(tài)資源全部耦合在一起匹表，服務器壓力大，因為服務器會收到各種http請求宣鄙，例如css的http請求袍镀，js的，圖片的等等框冀。一旦服務器出現狀況流椒，前后臺一起玩完，用戶體驗極差明也。

2宣虾、UI出好設計圖后，前端工程師只負責將設計圖切成html温数，需要由java工程師來將html套成jsp頁面绣硝，出錯率較高（因為頁面中經常會出現大量的js代碼），修改問題時需要雙方協(xié)同開發(fā)撑刺，效率低下鹉胖。

3、jsp必須要在支持java的web服務器里運行（例如tomcat够傍，jetty甫菠，resin等），無法使用nginx等（nginx據說單實例http并發(fā)高達5w冕屯，這個優(yōu)勢要用上）寂诱，性能提不上來。

4安聘、第一次請求jsp痰洒，必須要在web服務器中編譯成servlet瓢棒，第一次運行會較慢。

5丘喻、每次請求jsp都是訪問servlet再用輸出流輸出的html頁面脯宿，效率沒有直接使用html高（是每次喲，親~）泉粉。

6连霉、jsp內有較多標簽和表達式，前端工程師在修改頁面時會捉襟見肘搀继，遇到很多痛點窘面。

7、如果jsp中的內容很多叽躯，頁面響應會很慢财边，因為是同步加載。

8点骑、需要前端工程師使用java的ide（例如eclipse）酣难，以及需要配置各種后端的開發(fā)環(huán)境，你們有考慮過前端工程師的感受嗎黑滴。

基于上述的一些痛點憨募，我們應該把整個項目的開發(fā)權重往前移，實現前后端真正的解耦袁辈！

五菜谣、開發(fā)模式

以前老的方式是：

1、產品經歷/領導/客戶提出需求

2晚缩、UI做出設計圖

3尾膊、前端工程師做html頁面

4、后端工程師將html頁面套成jsp頁面（前后端強依賴荞彼，后端必須要等前端的html做好才能套jsp冈敛。如果html發(fā)生變更，就更痛了鸣皂，開發(fā)效率低）

5抓谴、集成出現問題

6、前端返工

7寞缝、后端返工

8癌压、二次集成

9、集成成功

10荆陆、交付

新的方式是：

1滩届、產品經歷/領導/客戶提出需求

2、UI做出設計圖

3慎宾、前后端約定接口&數據&參數

4丐吓、前后端并行開發(fā)（無強依賴，可前后端并行開發(fā)趟据，如果需求變更券犁，只要接口&參數不變，就不用兩邊都修改代碼汹碱，開發(fā)效率高）

5粘衬、前后端集成

6、前端頁面調整

7咳促、集成成功

8稚新、交付

六、請求方式

以前老的方式是：

1跪腹、客戶端請求

2褂删、服務端的servlet或controller接收請求（后端控制路由與渲染頁面，整個項目開發(fā)的權重大部分在后端）

3冲茸、調用service,dao代碼完成業(yè)務邏輯

4屯阀、返回jsp

5、jsp展現一些動態(tài)的代碼

新的方式是：

1轴术、瀏覽器發(fā)送請求

2难衰、直接到達html頁面（前端控制路由與渲染頁面，整個項目開發(fā)的權重前移）

3逗栽、html頁面負責調用服務端接口產生數據（通過ajax等等盖袭，后臺返回json格式數據，json數據格式因為簡潔高效而取代xml）

4彼宠、填充html鳄虱，展現動態(tài)效果，在頁面上進行解析并操作DOM兵志。

總結一下新的方式的請求步驟：

大量并發(fā)瀏覽器請求--->web服務器集群(nginx)--->應用服務器集群(tomcat)--->文件/數據庫/緩存/消息隊列服務器集群

同時又可以玩分模塊醇蝴，還可以按業(yè)務拆成一個個的小集群，為后面的架構升級做準備想罕。

七悠栓、前后分離的優(yōu)勢

1、可以實現真正的前后端解耦按价，前端服務器使用nginx惭适。前端/WEB服務器放的是css，js楼镐，圖片等等一系列靜態(tài)資源（甚至你還可以css癞志，js，圖片等資源放到特定的文件服務器框产，例如阿里云的oss，并使用cdn加速），前端服務器負責控制頁面引用&跳轉&路由猴凹，前端頁面異步調用后端的接口俯艰，后端/應用服務器使用tomcat（把tomcat想象成一個數據提供者），加快整體響應速度。（這里需要使用一些前端工程化的框架比如nodejs，react，router导而，react，redux隔崎，webpack）

2今艺、發(fā)現bug，可以快速定位是誰的問題爵卒，不會出現互相踢皮球的現象虚缎。頁面邏輯，跳轉錯誤技潘，瀏覽器兼容性問題遥巴，腳本錯誤，頁面樣式等問題享幽，全部由前端工程師來負責铲掐。接口數據出錯，數據沒有提交成功值桩，應答超時等問題摆霉，全部由后端工程師來解決。雙方互不干擾奔坟，前端與后端是相親相愛的一家人携栋。

3、在大并發(fā)情況下咳秉，我可以同時水平擴展前后端服務器婉支，比如淘寶的一個首頁就需要2000+臺前端服務器做集群來抗住日均多少億+的日均pv。（去參加阿里的技術峰會澜建，聽他們說他們的web容器都是自己寫的向挖，就算他單實例抗10萬http并發(fā)，2000臺是2億http并發(fā)炕舵，并且他們還可以根據預知洪峰來無限拓展何之，很恐怖，就一個首頁咽筋。溶推。。）

4、減少后端服務器的并發(fā)/負載壓力蒜危。除了接口以外的其他所有http請求全部轉移到前端nginx上虱痕，接口的請求調用tomcat，參考nginx反向代理tomcat辐赞。且除了第一次頁面請求外皆疹，瀏覽器會大量調用本地緩存。

5占拍、即使后端服務暫時超時或者宕機了，前端頁面也會正常訪問捎迫，只不過數據刷不出來而已晃酒。

6、也許你也需要有微信相關的輕應用窄绒，那樣你的接口完全可以共用贝次，如果也有app相關的服務，那么只要通過一些代碼重構彰导，也可以大量復用接口蛔翅，提升效率。（多端應用）

7位谋、頁面顯示的東西再多也不怕山析，因為是異步加載。

8掏父、nginx支持頁面熱部署笋轨，不用重啟服務器，前端升級更無縫赊淑。

9爵政、增加代碼的維護性&易讀性（前后端耦在一起的代碼讀起來相當費勁）。

10陶缺、提升開發(fā)效率钾挟，因為可以前后端并行開發(fā)，而不是像以前的強依賴饱岸。

11掺出、在nginx中部署證書，外網使用https訪問伶贰，并且只開放443和80端口蛛砰，其他端口一律關閉（防止黑客端口掃描），內網使用http黍衙，性能和安全都有保障泥畅。

12、前端大量的組件代碼得以復用琅翻，組件化位仁，提升開發(fā)效率柑贞，抽出來！

八聂抢、注意事項

1钧嘶、在開需求會議的時候，前后端工程師必須全部參加琳疏，并且需要制定好接口文檔有决，后端工程師要寫好測試用例（2個維度），不要讓前端工程師充當你的專職測試空盼，推薦使用chrome的插件postman或soapui或jmeter书幕，service層的測試用例拿junit寫。ps：前端也可以玩單元測試嗎揽趾？

2台汇、上述的接口并不是java里的interface，說白了調用接口就是調用你controler里的方法篱瞎。

3苟呐、加重了前端團隊的工作量，減輕了后端團隊的工作量俐筋，提高了性能和可擴展性牵素。

4、我們需要一些前端的框架來解決類似于頁面嵌套澄者，分頁两波，頁面跳轉控制等功能。（上面提到的那些前端框架）闷哆。

5腰奋、如果你的項目很小，或者是一個單純的內網項目抱怔，那你大可放心劣坊，不用任何架構而言，但是如果你的項目是外網項目屈留，呵呵噠局冰。

6、 以前還有人在使用類似于velocity/freemarker等模板框架來生成靜態(tài)頁面灌危，仁者見仁智者見智康二。

7、這篇文章主要的目的是說jsp在大型外網java web項目中被淘汰掉勇蝙，可沒說jsp可以完全不學沫勿，對于一些學生朋友來說，jsp/servlet等相關的java web基礎還是要掌握牢的，不然你以為springmvc這種框架是基于什么來寫的产雹？

8诫惭、如果頁面上有一些權限等等相關的校驗，那么這些相關的數據也可以通過ajax從接口里拿蔓挖。

9夕土、對于既可以前端做也可以后端做的邏輯，我建議是放到前端瘟判，為什么怨绣？因為你的邏輯需要計算資源進行計算，如果放到后端去run邏輯拷获，則會消耗帶寬&內存&cpu等等計算資源梨熙，你要記住一點就是服務端的計算資源是有限的，而如果放到前端刀诬，使用的是客戶端的計算資源，這樣你的服務端負載就會下降（高并發(fā)場景）邪财。類似于數據校驗這種陕壹，前后端都需要做！

10树埠、前端需要有機制應對后端請求超時以及后端服務宕機的情況糠馆，友好的展示給用戶。

九怎憋、擴展閱讀

1又碌、其實對于js，css绊袋，圖片這類的靜態(tài)資源可以考慮放到類似于阿里云的oss這類文件服務器上（如果是普通的服務器&操作系統(tǒng)毕匀，存儲在到達pb級的文件后，或者單個文件夾內的文件數量達到3-5萬癌别，io會有很嚴重的性能問題）皂岔，再在oss上配cdn（全國子節(jié)點加速），這樣你頁面打開的速度像飛一樣展姐， 無論你在全國的哪個地方躁垛，并且你的nginx的負載會進一步降低。

2圾笨、如果你要玩輕量級微服務架構教馆，要使用nodejs做網關，用nodejs的好處還有利于seo優(yōu)化擂达，因為nginx只是向瀏覽器返回頁面靜態(tài)資源土铺，而國內的搜索引擎爬蟲只會抓取靜態(tài)數據，不會解析頁面中的js，這使得應用得不到良好的搜索引擎支持舒憾。同時因為nginx不會進行頁面的組裝渲染镀钓，需要把靜態(tài)頁面返回到瀏覽器，然后完成渲染工作镀迂，這加重了瀏覽器的渲染負擔丁溅。瀏覽器發(fā)起的請求經過nginx進行分發(fā)，URL請求統(tǒng)一分發(fā)到nodejs探遵，在nodejs中進行頁面組裝渲染窟赏；API請求則直接發(fā)送到后端服務器，完成響應箱季。

3涯穷、如果遇到跨域問題，spring4的CORS可以完美解決藏雏，但一般使用nginx反向代理都不會有跨域問題拷况，除非你把前端服務和后端服務分成兩個域名。JSONP的方式也被淘汰掉了掘殴。

4赚瘦、如果想玩多端應用，注意要去掉tomcat原生的session機制奏寨，要使用token機制起意，使用緩存（因為是分布式系統(tǒng)），做單點病瞳，對于token機制的安全性問題揽咕，可以搜一下jwt。

5套菜、前端項目中可以加入mock測試（構造虛擬測試對象來模擬后端亲善，可以獨立開發(fā)和測試），后端需要有詳細的測試用例逗柴，保證服務的可用性與穩(wěn)定性逗爹。

十、總結

前后端分離并非僅僅只是一種開發(fā)模式嚎于，而是一種架構模式（前后端分離架構）掘而。千萬不要以為只有在擼代碼的時候把前端和后端分開就是前后端分離了，需要區(qū)分前后端項目于购。前端項目與后端項目是兩個項目袍睡，放在兩個不同的服務器，需要獨立部署肋僧，兩個不同的工程斑胜，兩個不同的代碼庫控淡，不同的開發(fā)人員。前后端工程師需要約定交互接口止潘，實現并行開發(fā)掺炭，開發(fā)結束后需要進行獨立部署，前端通過ajax來調用http請求調用后端的restful api凭戴。前端只需要關注頁面的樣式與動態(tài)數據的解析&渲染涧狮，而后端專注于具體業(yè)務邏輯。

---------------------

本文來自 Java后端技術 的CSDN 博客 么夫，全文地址請點擊：https://blog.csdn.net/bntx2jsqfehy7/article/details/80589580?utm_source=copy