背景
前后端分離模式是對MVC開發(fā)模式的優(yōu)化與延續(xù)吴藻，前后端分離已成為互聯(lián)網(wǎng)項目開發(fā)的業(yè)界標準使用方式渗钉，通過nginx+tomcat的方式（也可以中間加一個nodejs）有效的進行解耦，并且前后端分離會為以后的大型分布式架構屡江、彈性計算架構、微服務架構、多端化服務（多種客戶端唉窃，例如：瀏覽器，車載終端纹笼，安卓以清，IOS等等）打下堅實的基礎。
MVC科普：model-view-controller
REST風格API設計原則
為什么要前后端分離
- 用戶訪問頁面越來越慢
- 系統(tǒng)性能下降亲配，數(shù)據(jù)庫扛不住，連接數(shù)經(jīng)常打滿件已，最終數(shù)據(jù)庫掛掉，重啟后又快速掛掉
- 改了一個小地方元暴，另外一個看似不相干的地方卻掛了篷扩，嚴重耦合
- 互聯(lián)網(wǎng)日趨移動化
開發(fā)模式的探索
| 以前的方式 | 新的方式 | |
|---|---|---|
| 產(chǎn)品經(jīng)歷/領導/客戶提出需求 | 產(chǎn)品經(jīng)歷/領導/客戶提出需求 | |
| UI做出設計圖 | UI做出設計圖 | |
| 前端工程師做html頁面 | 前后端約定接口&數(shù)據(jù)&參數(shù) | |
| 后端工程師將html頁面套成jsp頁面 | 前后端并行開發(fā) | |
| 集成出現(xiàn)問題 | 前后端集成 | |
| 前端返工 | 前端頁面調(diào)整 | |
| 后端返工 | 集成成功 | |
| 二次集成 | 交付 | |
| 集成成功 | ||
| 交付 |
請求方式的改變
| 以前的方式 | 新的方式 | |
|---|---|---|
| 客戶端請求 | 瀏覽器發(fā)送請求 | |
| 服務端的servlet或controller接收請求 | 直接到達html頁面 | |
| 調(diào)用service,dao代碼完成業(yè)務邏輯 | html頁面負責調(diào)用服務端接口產(chǎn)生數(shù)據(jù) | |
| 返回jsp | 填充html，展現(xiàn)動態(tài)效果茉盏，在頁面上進行解析并操作DOM鉴未。 | |
| jsp展現(xiàn)一些動態(tài)的代碼 |
前后端分離褒貶的討論
需要前后端分離場景
- 前端變化遠比后端變化頻繁
- 尚處于原始開發(fā)模式，數(shù)據(jù)邏輯與表現(xiàn)邏輯混雜不清
- 前端效果絢麗/跨設備兼容要求高
前后分離的優(yōu)勢：
- 可以實現(xiàn)真正的前后端解耦鸠姨，前端服務器使用nginx铜秆。
- 發(fā)現(xiàn)bug，可以快速定位是誰的問題讶迁，不會出現(xiàn)互相踢皮球的現(xiàn)象连茧。
- 在大并發(fā)情況下，可以同時水平擴展前后端服務器巍糯。
- 減少后端服務器的并發(fā)/負載壓力
- 即使后端服務暫時超時或者宕機了梅屉，前端頁面也會正常訪問，只不過數(shù)據(jù)刷不出來而已鳞贷。
- 多端應用
- 頁面顯示的東西再多也不怕坯汤，因為是異步加載。
- nginx支持頁面熱部署搀愧，不用重啟服務器惰聂，前端升級更無縫。
- 增加代碼的維護性&易讀性（前后端耦在一起的代碼讀起來相當費勁）咱筛。
- 提升開發(fā)效率搓幌，因為可以前后端并行開發(fā)，而不是像以前的強依賴迅箩。
- 在nginx中部署證書溉愁，外網(wǎng)使用https訪問，并且只開放443和80端口饲趋，其他端口一律關閉（防止黑客端口掃描）拐揭，
內(nèi)網(wǎng)使用http，性能和安全都有保障奕塑。 - 前端大量的組件代碼得以復用堂污，組件化，提升開發(fā)效率龄砰，抽出來盟猖！
注意事項：
- 在開需求會議的時候讨衣，前后端工程師必須全部參加，并且需要制定好接口文檔式镐，后端工程師要寫好測試用例（2個維度）
- 上述的接口并不是java里的interface反镇，說白了調(diào)用接口就是調(diào)用你controler里的方法。
- 加重了前端團隊的工作量娘汞，減輕了后端團隊的工作量歹茶，提高了性能和可擴展性。
- 我們需要一些前端的框架來解決類似于頁面嵌套价说，分頁辆亏，頁面跳轉控制等功能风秤。
- 如果頁面上有一些權限等等相關的校驗鳖目，那么這些相關的數(shù)據(jù)也可以通過ajax從接口里拿。
- 前端需要有機制應對后端請求超時以及后端服務宕機的情況缤弦，友好的展示給用戶领迈。
