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