1.什麽是前後分離？
理解前端分離可以從三個方面來理解:
1.互動形式
2.代碼組織形式
3.開發模式和流程
1.1互動形式
前端和後端沒有分開
後端組裝並呈現數據和頁面後，輸出最終的html到瀏覽器。瀏覽器收到後會解析html，解析導入的css，執行js腳本，完成最終的頁面顯示。
前後分離
後端只需要和前端就接收和返回的數據格式(壹般是JSON格式)達成壹致，並為前端提供API接口。前端可以通過HTTP請求調用API進行交互。前端獲取數據後，對頁面進行組裝和渲染，最終呈現在瀏覽器中。
1.2代碼組織形式
前端和後端沒有分開
web應用早期，前端頁面和後臺業務數據處理的代碼都放在壹個項目下，甚至在同壹個目錄下，前端頁面和後端代碼混在壹起。前端和後端開發工程師都需要將整套代碼導入到開發工具中進行開發。現階段前端代碼和工作耦合度太高，前端無法獨立開發和測試，後端人員完成頁面後也要依賴前端完成開發。最壞的情況是前端工程師需要了解後端模板技術(jsp)，後端工程師需要了解前端技術，需要口頭講解頁面數據接口來配合開發。否則前端只能是“剪影”，只輸出HTML、CSS、少量與業務邏輯無關的JS；然後從後端轉化到後端jsp，業務的js代碼也寫好了。
前後分離
前端代碼和後端代碼放在不同的項目中，前端代碼可以獨立開發，後端API服務可以通過mock/easy-mock技術獨立運行和測試。後端代碼也可以獨立開發、運行和測試。通過swagger技術，可以自動生成API文檔供前端讀取，並進行自動接口測試，保證API的可用性，降低集成風險。
1.3開發模式和流程
前端和後端沒有分開
在項目開發階段，前端根據原型和UI設計稿，編譯與業務無關的HTML、CSS和少量js(純效果的)，交給後臺人員，後臺人員將HTML變成jsp，通過JSP的模板語法進行數據綁定和壹些邏輯操作。後臺完成後，將所有代碼，包括前端代碼和後端代碼，打包成壹個war，然後部署到同壹個服務器上運行。最多做個動靜分離，就是把圖片，css，js分別部署到nginx。
具體開發流程如下:素描。
前後分離
前端和後端分離後，前端根據原型和UI設計稿編寫與業務無關的HTML、CSS和少數js(純效果的)，後端也根據原型設計API，並在API數據規範上與前端達成壹致。等到後臺API完成，或者剛好在API數據規範設置完成之後。前端可以通過HTTP調用API，也可以通過模擬數據完成數據組裝和業務邏輯編寫。前後端可以平行，也可以先發展前端後發展後端。
具體開發流程如下:素描。
二、前後分離的利弊。
對比以上三個方面，前端分離架構相比傳統的web架構有了很大的改變，看起來有很多好處。分不分，還是要理性分析是否值得做。
從目前應用軟件開發的發展趨勢來看，主要有兩個方面需要註意:
越來越註重用戶體驗。隨著互聯網的發展，開始多終端化。
大型應用架構模式正在向雲、微服務方向發展。
我們主要通過前後端分離架構在以下四個方面進行改進:
為優質產品建立壹個精益團隊
通過分離開發團隊的前端和後端，前端和後端工程師只需要專註於前端或後端的開發工作，讓前端和後端工程師實現自主性，培養自己獨特的技術特點，進而構建全棧精益開發團隊。
提高開發效率
前端和後端分離後，前端和後端代碼可以解耦。只要前端和後端進行溝通，並就應用所需的接口和接口參數達成壹致，就可以開始並行開發，而不必等待對方的開發工作結束。同時，即使需求發生變化，只要接口和數據格式不變，後端開發人員也不需要修改代碼，只要前端發生變化即可。這樣整個應用的開發效率會有質的提升。
完美應對復雜多變的前端需求
如果開發團隊能夠完成前端和後端分離的改造，建設優秀的前端和後端團隊，獨立開發，讓開發者專註於專業化，開發能力必然會得到提升，能夠完美應對各種復雜多變的前端需求。
增強代碼的可維護性
前端和後端分離後，應用代碼不再混合，只有運行時才會有調用依賴。應用程序代碼將變得整潔清晰，代碼閱讀和代碼維護都將比以前更容易。
那麽前後端分開有什麽問題呢？沒想到後端工程師會變得無所不能，除非妳說前端團隊會配備。。。
第二，前端和後端分離的架構方案。
要把前後端分開，主要是前端的技術架構發生了很大的變化，後端主要換成了restfull風格的API，再加上Swagger技術自動生成在線界面文檔就差不多了。
目前，前端和後端分離方案主要有兩種前端技術架構:
傳統水療
服務器端呈現SSR
2.1傳統水療
傳統的SPA是指單頁面應用，即整個網站只有壹個頁面，所有功能都通過這個頁面呈現。因為壹個人的肉眼是在某個時間點看壹個頁面的，所以為什麽需要做多個不同功能的頁面呢？只需保留壹個頁面作為模板，然後通過路由跳轉來更新這個模板頁面的內容。的確，現在通過reac family bucket、tvue family bucket、模塊化、路由、wabpack等技術可以輕松實現壹個單頁面的應用。
單頁應用程序的運行過程
1.用戶通過瀏覽器訪問網站url。
2.將單頁html文件(index.html)下載到瀏覽器，然後下載html中引用的css和js。
3.將3.css和js下載到瀏覽器後，瀏覽器開始解析並執行js向後端服務異步請求的數據。
4.請求的數據完成後，數據被綁定和呈現，最後壹個完整的頁面呈現在用戶的瀏覽器中。
2.2服務器渲染
服務器端渲染的方案就是數據綁定和渲染都在服務器端完成，服務器輸出最終的html給瀏覽器。看完這個，妳有問題嗎？這不是又到了前後端不分離的時代了嗎？答案是否定的，因為這裏的服務器是用來進行前端數據綁定和渲染的，也就是把瀏覽器的壹部分工作分享給服務器。目前具備這種能力的服務器是NodeJs服務器。
它的原理其實就是在瀏覽器和前端代碼之間插入壹個NodeJs服務器。當瀏覽器請求前端頁面時，首先會經過NodeJs服務器，NodeJS會讀取前端頁面，並執行異步後端API。在獲取數據後，它會做頁面數據綁定、渲染等工作，完成壹個最終的html然後返回給瀏覽器，最後由瀏覽器顯示出來。
服務器端渲染應用的運行過程:
1.用戶通過瀏覽器訪問網站url。
2.Nodejs服務器接收請求，讀取相應的前端html、css和js。
3.Nodejs解析並執行js，從後端API異步請求數據。
4.4後。NodeJs請求完成數據，它被綁定並呈現以獲得最終的html。
5.NodeJs向瀏覽器輸出html，瀏覽器顯示。
PS:其實本質就是把前端寫成nodeJs服務器端web應用。實現服務器端渲染後，我們最後運行壹個Nodejs服務器端應用。單頁面應用程序是將靜態頁面部署到靜態資源服務器上運行。
看到這裏，妳還有什麽問題嗎？為什麽要麻煩服務器端渲染呢？
2.3 SPA和服務器渲染方案比較
SPA的優點是開發和部署簡單。缺點是首次加載緩慢，需要更好的網絡和不友好的搜索引擎優化。
所以，以下是使用服務器端渲染的原因(摘錄vue官方說法):
與傳統的SPA(單頁應用)相比，服務器端渲染(SSR)具有以下優勢:
更好的SEO，因為搜索引擎爬蟲可以直接查看完全渲染的頁面。
請註意，到目前為止，Google和Bing可以很好地索引同步的JavaScript應用程序。同步是這裏的關鍵。如果您的應用程序最初顯示加載菊花圖，然後通過Ajax獲取內容，爬行工具將不會在爬行頁面內容之前等待異步完成。也就是說，如果SEO對妳的站點非常重要，妳的頁面異步獲取內容，妳可能需要服務器端渲染(SSR)來解決這個問題。
更快的內容獲取時間，特別是對於慢速網絡條件或慢速設備。
在顯示服務器呈現的標記之前，您不必等待下載並執行所有JavaScript，因此您的用戶將更快地看到完全呈現的頁面。壹般來說，它可以產生更好的用戶體驗，對於那些內容時間與轉化率直接相關的應用程序，服務器端渲染(SSR)非常重要。
使用服務器端呈現(SSR)時有壹些權衡:
受發展條件限制。特定於瀏覽器的代碼只能在壹些生命周期鉤子函數中使用；某些外部庫可能需要特殊處理才能在服務器渲染應用程序中運行。
與構建設置和部署相關的更多要求。與可以部署在任何靜態文件服務器上的完全靜態的單頁應用程序(SPA)不同，服務器呈現應用程序需要位於Node.JSServer的運行環境中。
更多的服務器端負載。在Node.js中渲染壹個完整的應用，顯然比只提供靜態文件的服務器占用更多的CPU資源(CPU密集型-CPU密集型)，所以如果妳期望在高流量環境下使用，請準備好相應的服務器負載，明智地采用緩存策略。
以vue為例。服務器端渲染請參考官方指南:/Chris fritz/prerender-spa-plugin。
三、前後端分離技術選擇
-artTemplate+bootstrap(不推薦，不完全前端分離)
-vue系列鏟鬥(推薦)
-react family bucket(推薦，生態)