雖然一直在用前后端分離開發項目，卻一直沒仔細考慮過前后端開發的優缺點。
前后端分離已經成為互聯網項目開發的業界標准使用方式，通過 nginx + Tomcat 的方式（也可以中間加一個 nodejs） 有效的進行解耦，並且前后端分離會為以后的大型分布式架構，彈性計算架構，微服務架構，多端化服務（多種客戶端，例如：瀏覽器，車載終端，安卓，IOS等）打下堅實的基礎。這個步驟是系統架構從猿進化成人的必經之路。
核心思想是前端 html 頁面通過 ajax 調用后端的 restful api 接口並使用 json 數據進行交互。
在互聯網架構中，名詞解釋：
Web服務器：指像 nginx，apache 這類的服務器，他們一般只能解析靜態資源
應用服務器：指像 tomcat，jetty，resin 這類的服務器可以解析動態資源，也可以解析靜態資源，但解析靜態資源的能力沒有 web 服務器好
一般都只有 web 服務器才能被外網訪問，應用服務器只能內網訪問
開發人員分離
以前的 JavaWeb 項目大多都是 Java程序員又當爹又當媽，又搞前端，又搞后端
隨着時代的發展，漸漸的許多大中小公司開始把前后端的界限分的越來越明確，前端工程師只管前端的事情，后端工程師只管后端的事情。正所謂術業有專攻，一個人如果什么都會，那么他什么都不精。
大公司需要專業人才，小公司需要全才，但是對於個人職業發展來說，我建議分開。
對於后端Java工程師：
把精力放在Java基礎，設計原理，jvm原理，spring+springMVC 原理及源碼，linux，mysql 事物隔離與鎖機制，mongodb，http/tcp，多線程，分布式架構，彈性計算架構，微服務架構，Java性能優化，以及相關的項目管理等等。
后端追求的是：三高（高並發，高可用，高性能），安全，存儲，業務等等。
2.對於前端工程師：
把精力放在 html5，css3，jQuery，AngularJS，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8引擎，JavaScript 多線程，模塊化，面向切面編程，設計模式，瀏覽器兼容性，性能優化等等。
前段追求的是：頁面表現，速度流暢，兼容性，用戶體驗等等。
術業有專攻，這樣你的核心競爭力才會越來越高，正所謂你往生活中投入什么，生活就會反饋給你什么。並且兩端的發展都越來越高深，你想什么都會，那么你什么都不精。
通過將 team 分成前后端 team，讓兩邊的工程師更加專注各自的領域，獨立治理，然后構建出一個全棧式的精益求精的 team。
原始人時代（各種耦合）
曾幾何時，我們的Javaweb項目都是使用了若干后台框架，springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等。
大多數項目在Java后端都是分了三層，控制層，業務層，持久層。控制層負責接收參數，調用相關業務層，封裝數據，以及路由&渲染到 jsp 頁面。然后 jsp 頁面上使用各種標簽或者手寫 Java 表達式將后台的數據展現出來，玩的是 MVC 那套思路。
我們先看這種情況：
需求定完了，代碼寫完了，測試測完了，然后呢？要發布了吧？你需要用 maven 或者 eclipse 等工具把你的代碼打成一個 war 包，然后把這個 war 包發布到你的生產環境下的
web 容器里，對吧？
發布完了之后，你需要啟動你的 web 容器，開始提供服務，這個時候你通過配置域名，dns 等等相關，你的網站就可以訪問了（假設是個網站）。那么我們來看看，你的前后端代碼是不是全部都在那個 war 包里？包括你的 js，css，圖片，各種第三方的庫，對吧？
好，下面在瀏覽器中輸入你的網站域名（www.xxx.com），之后發生了什么？（這個問題也是很多公司的面試題）
瀏覽器在通過域名通過 dns 服務器找到你的服務器外網 IP，將 http 請求發送到你的服務器，在 tcp 三次握手之后（http 下面是 tcp/ip），通過 tcp 協議開始傳輸數據，你的服務器得到請求后，開始提供服務，接收參數，之后返回你的應答給瀏覽器，瀏覽器再通過
content-type 來解析你返回的內容，呈現給用戶。
那么我們來看，我們先假設你的首頁中有100張圖片，此時，用戶的看似一次 http 請求，其實並不是一次，用戶再第一次訪問的時候，瀏覽器中不會有緩存，你的100張圖片，瀏覽器要連着請求100次 http 請求，你的服務器接收這些請求，都需要耗費內存去創建 scoket 來玩 tcp 傳輸（消耗你服務器上的計算資源）
重點來了，這樣的話，你的服務器的壓力會非常大，因為頁面中的所有請求都是只請求到你這台服務器上，如果是一個人還好，如果一萬個人並發訪問呢（先不聊服務器集群，這里就說是單實例服務器），那你的服務器能扛住多少個 tcp 連接？你的寬帶有多大？你的服務器的內存有多大？你的硬盤是高性能的嗎？你能扛住多少 IO？你給 web 服務器分的內存有多大？會不會宕機？
這就是為什么，越是大中型的 web 應用，他們越是要解耦。理論上你可以把你的數據庫+應用服務+消息隊列+緩存+用戶上傳的文件+日志+等等，都扔在一台服務器上，你也不用玩什么服務治理，也不用做什么性能監控，什么報警機制等等，就亂成一鍋粥好了。但是這樣就好像是你把雞蛋都放在一個籃子里，隱患非常大。如果因為一個子應用的內存不穩定導致整個服務器內存溢出而 hung 住，那你的整個網站就掛掉了。
如果出意外掛掉，而恰好這時你們的業務又處於井噴式發展高峰期，那么恭喜你，業務成功被技術卡住，很可能會流失大量用戶，后果不堪設想。（注意：技術一定是要走在業務前面的，否則你將錯過最佳的發展期）
此外，你的應用全部都耦合在一起，相當於一個巨石，當服務器負責能力不足時，一般會使用負載均衡的方式，將服務器做成集群。這樣其實你是在水平擴展一塊塊巨石，性能加速度越來越低，要知道，本身負載就低的功能 or 模塊是沒有必要水平擴展的，在本文中的例子就是你的性能瓶頸不在前端，那干嘛要水平擴展前端呢？？？還有開發版部署上線的時候，我明明只改了后端的代碼，為什么要前端也跟着發布呢？？？
正常的互聯網架構，是都要拆開的，你的 web 服務器集群，你的應用服務器集群 + 文件服務器集群 + 數據庫服務器集群 + 消息隊列集群 + 緩存集群等等。
JSP的痛點
以前的javaWeb項目大多數使用jsp作為頁面層展示數據給用戶，因為流量不高，因此也沒有那么苛刻的性能要求，但現在是大數據時代，對於互聯網項目的性能要求是越來越高，因此原始的前后端耦合在一起的架構模式已經逐漸不能滿足我們，因此我們需要需找一種解耦的方式，來大幅度提升我們的負載能力。
動態資源和靜態資源全部耦合在一起，服務器壓力大，因為服務器會收到各種http請求，例如css的http請求，js的，圖片的等等。一旦服務器出現狀況，前后台一起玩完，用戶體驗極差。
UI出好設計圖后，前端工程師只負責將設計圖切成html，需要由java工程師來將html套成jsp頁面，出錯率較高（因為頁面中經常會出現大量的js代碼），修改問題時需要雙方協同開發，效率低下。
jsp必須要在支持java的web服務器里運行（例如tomcat，jetty，resin等），無法使用nginx等（nginx據說單實例http並發高達5w，這個優勢要用上），性能提不上來。
第一次請求jsp，必須要在web服務器中編譯成servlet，第一次運行會較慢。
每次請求jsp都是訪問servlet再用輸出流輸出的html頁面，效率沒有直接使用html高（是每次喲，親~）。
jsp內有較多標簽和表達式，前端工程師在修改頁面時會捉襟見肘，遇到很多痛點。
如果jsp中的內容很多，頁面響應會很慢，因為是同步加載。
需要前端工程師使用java的ide（例如eclipse），以及需要配置各種后端的開發環境，你們有考慮過前端工程師的感受嗎。
基於上述的一些痛點，我們應該把整個項目的開發權重往前移，實現前后端真正的解耦！
五、開發模式
以前的方式是：
產品經理||領導||客戶，提出需求
UI做出設計圖
前端工程師做 HTML 頁面
后端工程師將 HTML 頁面套成 jsp 頁面（前后端強依賴，后端必須要等前端的 HTML 做好才能套 jsp，如果 HTML 發生變更，就更頭痛了，開發效率低）
集成出現問題
前端返工
后端返工
二次集成
集成成功
交付
新的方式：
產品經理||領導||客戶提出需求
UI做出設計圖
前端約定接口&數據&參數
前后端並行開發（無強依賴，可前后端並行開發，如果需求變更，只要接口&參數不變，就不用兩邊都修改代碼，開發效率高）
前后端集成
前端頁面調整
集成成功
交付
六、請求方式
以前的方式是：
客戶端請求
服務端的 servlet 或 controller 接收請求（后端控制路由與渲染頁面，整個項目開發的權重大部分在后端）
調用 service，dao 代碼完成業務邏輯
返回 jsp
jsp 展現一些動態的代碼
新的方式：
瀏覽器發送請求
直接到達 HTML 頁面（前端控制路由器與渲染頁面，整個項目開發的權重前移）
HTML 頁面負責調用服務端接口產生數據（通過 ajax 等等，后台返回 json 格式數據，json數據格式因為簡潔高效而取代 HTML）
填充 HTML，展現動態效果，在頁面上進行解析並操作 DOM。
七、前后端分離的優勢
可以實現真正的前后端解耦，前端服務器使用 nginx。前端 / WEB 服務器放的是 css，js，圖片等一系列靜態資源（甚至你還可以 css，js，圖片等資源放到特定的文件服務器，例如阿里雲的 oss，並使用 cdn 加速），前端服務器負責控制頁面引用&跳轉&路由，前端頁面異步調用后端的接口，后端/應用服務器使用 tomcat（把 tomcat 想象成一個數據提供者），加快整體響應速度。（這里需要使用一些前端工程化的框架，比如：nodejs，react，router，redux，webpack）
發現bug，可以快速定位是誰的問題，不會出現互相踢皮球的現象。頁面邏輯，跳轉錯誤，瀏覽器兼容性問題，腳本錯誤，頁面樣式等問題，全部由前端工程師來負責。接口數據出錯，數據沒有提交成功，應答超時等問題，全部由后端工程師來解決。雙方互不干擾，前端與后端是相親相愛的一家人。
在打並發情況下，可我可以同時水平擴展前后端服務器，比如淘寶的一個首頁就需要 2000+ 台前端服務器做集群來扛住日均多少億+的 pv（訪問量）。（去參加阿里的技術峰會，聽他們說他們的 web 容器都是自己寫的，就算他單實例扛10萬 http 並發，2000台是2億 http 並發，並且他們還可以根據預知洪峰來無線拓展，很恐怖，就一個首頁。。。）
減少后端服務器的並發/負載壓力。除了接口以外的其他所有 http 請求全部轉移到前端 nginx 上，接口的請求調用 tomcat，參考 nginx 反向代理 tomcat。且除了第一次頁面請求外，瀏覽器會大量調用本地緩存。
即使后端服務器暫時超時或者宕機了，前端頁面也會正常訪問，只不過數據顯示不出來而已。
也許你也需要有微信相關的輕應用，那樣你的接口完全可以共用，如果也有 app 相關的服務，那么只要通過一些代碼重構，也可以大量復用接口，提升效率。（多端應用）
頁面顯示的東西再多也不怕，因為是異步加載。
nginx 支持熱部署，不用重啟服務器，前端無縫升級。
增加代碼的維護性&易讀性（前后端耦合在一起的代碼讀起來相當費勁）
提升開發效率，因為可以前后端並行開發，而不是像以前的強依賴
在nginx 中部署證書，外網使用http訪問，並且只開發443和80端口，其他端口一律關閉（防止黑客戶端口掃描），內網使用http，性能和安全都有保障
前端大量的組件代碼得以復用，組件化，提升開發效率，抽出來！
八、注意事項
在開需求會議的時候，前端工程師必須全部參加，並且需要定制好接口文檔，后端工程師要寫好測試用例（2個維度），不要讓前端工程師充當你的專職測試，推薦使用 chrome 的插件 postman 或 soapui或 jmeter，service 層的測試用例拿 junit 寫。ps：前端也可以玩單元測試嗎？
上述的接口並不是Java里的interface，說白了調用接口就是調用你controller里的方法付。
加重了前端團隊的工作量，減輕了后端團隊的工作量，提高了性能和可擴展性。
我們需要一些前端的框架來解決類似於頁面嵌套，分頁，頁面跳轉控制等功能。（上面提到的那些前端框架）
如果你的項目很小，或者是一個單純的內網項目，那你大可放心，不用任何架構而言，但是如果你的項目是外網項目，呵呵噠。
以前還有人在使用類似於 velocity / freemarker 等模板框架來生成靜態頁面，仁者見仁智者見智。
這篇文章主要的目的是說 jsp 在大型外網 Java web 項目中被淘汰掉，可沒說 jsp 可以完全不學，對於一些學生朋友來說，jsp / servlet 等相關的Java web 基礎還是要掌握牢的，不然你以為 springMVC這種框架是基於什么來寫的？、
如果頁面上有一些權限等等相關的校驗，那么這些相關的數據也可以通過 ajax 從接口里拿。
對於既可以前端也可以做后端的邏輯，我建議是放在前端，為什么？因為你的邏輯需要計算資源進行計算，如果放到后端去 run 邏輯，則會消耗帶寬&內存&cpu等等計算資源，你要記住一點就是服務器的計算資源是有限的，而如果放到前端，使用的是客戶端的計算資源，這樣你的服務器負責就會下降（高並發場景）。類似於數據校驗這種，前后端都需要做！
前端需要有機制應對后端請求超時以及后端服務宕機的情況，友好的展示給用戶。
九、擴展閱讀
其實對於 js，css，圖片這類的靜態資源可以考慮放到類似於阿里雲的的 oss 這類文件服務器上（如果是普通的服務器&操作系統，存儲在到達pb級的文件后，或者單個文件夾內的文件數量達到3-5萬，io 會有很嚴重的性能問題），再在 oss 上配 cdn （全國子節點結束），這樣你頁面打開的速度象飛一樣，無論你在全國的哪個地方，並且你的 nginx 的負載會進一步降低。
如果你要玩輕量級微服務架構，要使用 nodejs 做網關，用 nodejs 的好處還有利用 seo優化，因為 nginx 只是向瀏覽器返回頁面靜態資源，而國內的搜索引擎爬蟲只會抓取靜態數據，不會解析頁面中的js，這使得應用得不到良好的搜索引擎支持。同時因為 nginx 不會進行頁面的組裝渲染，需要把靜態頁面返回到瀏覽器，然后完成渲染工作，這加重了瀏覽器的渲染負擔。瀏覽器發起的請求經過 nginx 進行分發，URL 請求統一分發到 nodejs，在 nodejs 中進行頁面組裝渲染；API請求則直接發送到后端服務器，完成響應。
如果遇到跨域問題，spring4 的 CORS 可以玩完美解決，但一般使用 nginx 反向代理都不會有跨域問題，除非你把前端服務的后端服務分成兩個域名。JSON的方式也被淘汰掉了。
如果想玩多端應用，注意要去掉 tomcat 原生的 session 機制，要使用 token 機制，使用緩存（因為是分布式系統），做單點，對於 token 機制的安全性問題，可以搜一下 jwt。
前端項目中可以加入 mock 測試（構造虛擬測試對象來模擬后端，可以獨立開發和測試），后端需要有詳細的測試用例，保證服務的可用性與穩定性。
廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
十、總結
前后端分離並非僅僅只是一種開發模式，而是一種架構模式（前后端分離架構）。千萬不要以為只有在擼代碼的時候吧前端和后端分開就是前后端分離了，需要區分前后端項目。前端項目與后端項目是兩個項目，放在兩個不同的服務器，需要獨立部署，倆那個歌不同的工程，兩個不同的代碼庫，不同的開發人員。前后端工程師需要約定交互接口，實現並行開發，開發結束后需要進行獨立部署，前端通過ajax來調用http請求調用后端的restful api。前端只需要關注頁面的樣式與動態數據的解析&渲染，而后端專注於具體業務邏輯。