前言:昨晚面試遇到了這個問題,既然遇到了,找些資料來一起做個總結吧。
1.對前后端分離的誤解
在回答這個問題的時候不要鑽到某個具體的技術 ,或者某個具體的框架上面→比如ajax異步請求、vue或react等組件化的開發框架、再或者rest接口規范、API接口數據約定等。從某個具體的技術切入來回答對前后端分離的理解本身就是一種局限的看法,所以在回答這個問題的時候應該從以下幾個方面展開。
2.為什么要分離?
在以往的很長一段時間里,后端開發才是開發團隊里的核心,前端開發往往僅由一小撮人甚至交給后端人員兼任。比如JSP開發,大部分是前后端高耦合的,前后端代碼放在一起寫,各種繁瑣的套模板。這種開發方式在以前互聯網服務不那么繁榮,web化趨勢還不那么明顯的年代發揮着巨大作用。隨着各種社會服務的信息化程度加深,前端需要展示的內容越來越復雜(比如淘寶頁面),JSP這種套模板的技術(僅僅依靠html、css、js、jq等技術的堆積來完成一個復雜的頁面展示也變得非常繁雜)再也無法高效的開發。究其本質原因:前端開發沒有像后端開發那樣實現工程化、模塊化、可復用化的思想。所以就會出現前后端開發不協調、效率低、扯皮的問題,這很不利於項目開發。因此項目管理者就想辦法來解決這種問題,如何解決?→解耦。在軟件領域,任何復雜的問題面前,高內聚、低耦合這種原則幾乎總是能見效。所以前后端分離開發出現了,把前端開發的責任從后端開發人員身上拿掉,給前端開發工程師一個單獨的崗位和責任領域,將前端也工程化、模塊化、項目化。這才是前后端分離開發最開始的來源。這些與vue、react框架沒有什么關系,它們充其量只是一種具體實現方式而已。從本質上來看,前后端分離並不是一個技術問題,而是一個工程化考量和項目管理的問題。
3.什么是前后端分離?
在學習前端開發的時候,會發現前端開發的知識非常瑣碎,前端往往是靠東平西湊(面向復制粘貼變成)來試圖完成頁面效果,開發過程沒有java后端開發有邏輯,代碼也很難管理。后端開發有各種各樣的工具類、jar包、maven依賴、spring框架等,具有工程化模塊化思維,可以滿足長期演進和迭代的目標。而前端那時候並沒有,所以vue.js和react.js等這些前端框架的出現,它們從本質上打破了以前前端開發的游戲規則,這就是前端開發組件化框架(也叫前端開發工程化框架)。這些框架出現后,前端開發也開始像后端一樣,遵循一套體系來進行約束性的開發,越來越工程化、組件化、迭代化,變得有章可循。前后端分離核心思想是前端HTML頁面通過AJAX調用后端的RESTFUL API接口並使用JSON數據進行交互。
4.如何做到前后端分離?
從軟件開發的四大步說起:設計、開發、測試、部署,真正的前后端分離需要滲透到以上的每一步中。
第一階段:設計階段。設計階段的第一個層面是系統設計,后端系統設計包括后端架構:數據庫、中間件、緩存等架構的設計,主要是考慮性能、容量、擴展性、可維護性。前端也應該如此,尤其是當一個網站頁面多、復雜的時候,前端架構就也需要做好充分的規划和准備,以滿足長期可演進、可迭代的目標。設計階段的第二個層面是接口設計,前后端交互是通過接口來實現的,所以model層面上的接口約定也就極其重要,包括:接口的請求方式、數據類型、返回數據格式等。接口設計一定要評審到位,避免前后端開發人員因為某個沒有約定好的接口扯來扯去。
第二階段:開發階段。前后端開發人員按照先前約定好的接口獨立開發,互相透明(一旦出現扯皮現象,那就不算是嚴格獨立的前后端開發,因為必定會有一方需要被迫妥協,去修改代碼,這就算是還未完全實現解耦)。前端開發用來測試的數據都是從mock中模擬出來的,並不是從后端拿的;而后端開發僅提供一套接口,按照先前提供的評審好的接口約定來提供數據,這一套接口可以提供給很多的前端使用,比如web網頁、h5頁面、app、微信小程序等。
第三階段:測試階段。要保證前后端獨立可測試,前端測試包括:頁面、跳轉、展示、輸入、傳參、響應等;后端則包括:數據接口的提供、數據格式、校驗、異常、數據一致性、權限問題等。
第四階段:部署階段。要保證前后端獨立可部署。(JSP時代前端html頁面、css樣式、js效果等都是由后台驅動,即前端都是塞到后端中,然后項目部署。當前端人員需要修改、發版本的時候就需要去求着后端人員幫忙)。前后端分離之后,就不再這樣了,前后端發布上線可以完全獨立,互相透明。
5.不要盲目使用該技術
前后端分離確實是很合適復雜項目。但是不能為了做前后端分離而做前后端分離。一個完全的前后端分離需要相當的人力成本、開發成本、工具成本、部署成本等。所以小項目小團隊就不合適這種前后端開發,一旦某一點做的不徹底,它就會帶來很多負擔,所以並不是所有的項目都適合前后端分離。