先後端分離與不分離的區別，二者的優點

先後端不分離：

      在先後端不分離的應用模式中，前端頁面看到的效果都是由後端控制，由後端渲染頁面或重定向，也就是後端須要控制前端的展現，前端與後端的耦合度很高。

       這種應用模式比較適合純網頁應用，可是當後端對接App時，App可能並不須要後端返回一個HTML網頁，二僅僅時數據自己，因此後端本來返回網頁的接口再也不適用於前端App應用，爲了對接App，後端還須要再開發一套接口。

 

請求的數據交互以下圖：

 

 

 

先後端分離

      在先後端分離的應用模式中，後端僅返回前端所需的數據，再也不渲染HTML頁面，再也不控制前端的效果，至於前端用戶看到的什麼效果，從後端請求的數據如何加載到前端中，都由前端本身決定，網頁有網頁的處理方式，App由App的處理方式，但如論那種前端，所須要的數據基本相同，後端僅需開發一套邏輯對外提供數據便可。

 

       在先後端分開的應用模式中，前端與後端的耦合度相對較低。

 

       在先後端分離的應用模式中，咱們一般將後端開發的每個視圖都稱爲一個接口，或者API，前端經過訪問接口來對數據進行增刪改查。

 

對應的數據交互以下：

 

 

一、開發人員分離

 

  之前的JavaWeb項目大多時後端作，既搞前端，又搞後端。後來愈來愈多的公司開始吧先後端的界限分的愈來愈明確，前端工程師只搞前端的事，後端工程師只搞後端的事。

1）後端追求的是：三高（高併發，高可用，高性能），安全，存儲，業務等。

 

2）對於前端工程師：

 

  把精力放在html5，css3，jquery，angliarjs，bootstrap、reactjs，vuejs，微博pack，less/sass，gulp，nodejs，Google V8引擎，javascripts多線程，模塊化，面向對象編程，設計模式，瀏覽器兼容性，性能優化等。

 

前端追求的是：頁面表現，速度流暢，兼容性，用戶體驗

 

二、開發模式（後端以JAVA爲例）

 

之前的方式：

 

1）產品經理/領導/客戶提出需求

2）UI作出設計圖

3）前端工程師作HTML頁面

4）後端工程師將HTML頁面套成jsp頁面（先後端強依賴，後端必需要等前端的HTML作好才能套jsp。若是html發生變動，就更痛了，開發效率低）

5）集成出現問題

6）前端返工

7）後端返工

8）二次集成

9）集成成功

10）交付

 

新的方式是：

 

1）產品經理/領導/客戶提出需求

2）UI作出設計圖

3）先後端約定接口&數據&參數

4）先後端並行開發（無強依賴，可先後端並行開發，若是需求變動，只要接口&參數不變，就不用兩邊都改代碼，開發效率高）

5）先後端集成

6）前端頁面調整

7）集成成功

8）交付

 

三、請求方式

以前老的方式：

1）客戶端請求

2）服務端的servlet或controller接收請求（後端控制路由與渲染頁面，整個項目開發的權重大部分在後端）

3）調整service，dao代碼完成業務邏輯

4）返回jsp

5）jsp展示一些動態的代碼

 

新的老的方式：

1）瀏覽器發送請求

2）直接到達html頁面（前端控制路由與渲染頁面，整個項目開發的權重前移）

3）html頁面負責調用服務端接口產生數據（經過ajax等等，後臺返回json格式數據，json數據格式由於簡潔高效而取代xml）

4）填充html，展示動態效果，在頁面上進行解析並操做DOM。

 

 

四、先後端分離的優點

 

1)能夠實現真正的先後端解耦，前端服務器使用nginx，前端/web服務器放的是css，js，圖片等一系列靜態資源（甚至你能夠將css，教js，圖片等資源放在特定的文件服務器，例如阿里雲的oss，並使用cdn加速），前端服務器腹足鱷控制頁面引用&跳轉&路由，前端頁面異步調用後端的接口，後端/應用服務器使用toomcat（把tomcat想象成一個數據提供者），加快總體響應速度。（這裏須要使用一些前端工程化的框架，好比nodejs，react，router，redux，webpack）

2）發生bug，能夠快速定位是誰的問題，不會出現互相踢皮球的現象。頁面邏輯，跳轉錯誤，瀏覽器兼容性問題，腳本問題，頁面樣式問題，所有由前端工程師負責。接口數據出錯，數據沒有提交成功，應答超時等問題，所有由後端工程師來解決。雙方互不干擾。

3）在大併發狀況下，能夠同時水平擴展先後端服務器

4）減小後端服務器的兵法/負載壓力。處理接口之外的其餘全部http輕輕所有轉移到前端nginx上，接口的請求調用tomcat，參考nginx反響帶來tomcat。且除了第一次頁面請求外，瀏覽器會大量調用本地緩存

5）即便後端服務暫時超時，前端頁面也會正常訪問，只是數據刷不出來。

6）頁面顯示的東西再多也不怕，由於是異步加載

7）nginx支持頁面熱部署，不用重啓服務器，前端升級更無縫。

8）增長代碼的維護性&易讀性（先後端耦合在一塊兒的代碼讀起來至關費勁）

9）提高開發效率，由於能夠先後端並行開發，而不是像之前的強依賴。

10)在nginx中部署證書，外網使用https訪問，而且只開放443和80端口，其餘端口一概關閉（防止黑客口掃描），內網使用http，性能和安全都有保障。

11）前端使用大量的組件代碼得以複用，組件化，提高開發效率。

 

 

 

 

文章來源：

          http://www.javashuo.com/article/p-vzydswwi-dk.html

          http://www.javashuo.com/article/p-qfrpforv-mr.html