關於開發框架的秘密：前後端分離的好處是什麼？

 

隨著不同終端的興起，對開發人員的要求越來越高，純瀏覽器端的響應式已經不能滿足使用者體驗的高要求，我們往往需要針對不同的終端開發定製的版本，為了提升開發效率，前後端分離的需求越來越被重視，前端主要負責頁面的展現和互動邏輯，後端主要負責業務和資料介面，同一份資料介面，我們可以定製開發多個版本。

前後端不分離：

在之前的開發方法，php程式碼寫在HTML中，不存在純粹的PHP檔案和HTML檔案，這就是前後端的不分離，也就是php和HTML你中有我我中有你，而在前後端不分離的應用模式中，前端頁面看到的都是由後端控制，由後端渲染頁面或者重定向，也就是後端需要控制前端的展示，前端與後端的耦合度很高，請求的資料互動如下圖：

 

例如：

前端工程師對php程式碼讀不懂，php工程師對css等內容也不熟悉。

開發效率會大大降低，比如前端寫好靜態demo，後端翻譯成VM模板，也比如直接基於後端環境的開發，那樣配置和安裝使用都很麻煩，而且前端還是要寫VM，依賴後端資料，效率依然不高。

前端能力發揮受到侷限，比如效能最佳化，如果效能最佳化只在前端做空間非常有限，於是我們經常要與後端合作，但是由於後端的框架限制，我們很難來最佳化效能。

最後，發現只有做到真正的前後端分離，才能夠真正的徹底的解決以上的問題。所以後來就有了前後端分離。

前後端分離：

前端：負責View（檢視層/做HTML頁面的展示）和Controller（邏輯層/書寫業務邏輯）層。

後端：負責Model（資料層/資料的增刪改查）層。

在前後端分離的應用模式中，後端僅返回前端所需的資料，不再渲染HTML頁面，不再控制前端的效果，使用者看到什麼樣的效果，從後端請求的資料如何載入到前端中，都由前端自己決定，後端僅僅需要提供一套邏輯對外提供資料即可，並且前端與後端的耦合度相對較低，在這種模式中，我們通常將後端開發的每個檢視都成為一個介面，或者API，前端透過訪問介面來對資料進行增刪改查。

對應的資料互動如下圖：

 

前後端分離的好處是什麼？

1、為優質產品打造精益團隊

術業有專攻，透過前後端分離，讓前後端工程師只需要專注於前端或者後端的開發工作，培養前端工程師獨特的技術特性，然後構建出一個全棧式的精益開發團隊。

2、提高工作效率，分工更加明確

前後端分離的工作流程可以使得前端專心前端，後端關心後端，兩者開發同時進行，提高工作效率，頁面的增加和路由的修改也不必再去麻煩後端，開發更加靈活。

3、區域性效能提升

透過前端路由的配置，我們可以實現頁面的按需載入，無需一開始載入首頁便載入網站的所有資源，伺服器也不再需要解析前端頁面，在頁面互動及使用者體驗上有所提升。

4、增強程式碼的可維護性

前後端分離後，應用的程式碼不再是前後端混合，只有在執行期才會呼叫依賴關係，並且分層明確，應用程式碼變得整潔清晰。

總結：

簡單來說，前後端分離主要就是將資料操作和顯示分離分離出來，前端專注做資料顯示，透過文字、圖片或者圖示等方式讓資料顯示出來，後端專注的做資料的操作。

前端把資料發給後端，然後後端對資料進行修改。而後端提供介面給前端呼叫，來觸發後端對資料的操作。

最後：

JNPF快速開發平臺採用前後端分離技術、採用B/S架構開發，形成一站式開發多端（APP+PC）使用。

 

前端技術：

1.Web前端呈現給使用者的視覺效果，可以看得到碰得著的東西。

2.採用B/S框架開發、因此前後端分離目的之一是做到專業化分工、提 高專案質量和開發效率。

3.前端採用HTML5、CSS3、Bootstrap、Jquery、VUE指令碼技術搭建而成的頁面，我們是純淨版頁面，使開發起來速度更快。

後端技術：

1.Web前端呈現給使用者的視覺效果，可以看得到碰得著的東西。

2.採用B/S框架開發、因此前後端分離目的之一是做到專業化分工、提 高專案質量和開發效率。

3.前端採用HTML5、CSS3、Bootstrap、Jquery、VUE指令碼技術搭建而成的頁面，我們是純淨版頁面，使開發起來速度更快。