1. 程式人生 > >為什麽要進行前後端分離?

為什麽要進行前後端分離?

之間 app mage 用戶交互 數據格式 con ali span 好的

一、認識前後端分離

可能很多人會有誤解,認為web應用的開發期進行了前後端開發工作的分工就是前後端分離。但其實前後端分離並不只是開發模式,而是web應用的一種架構模式。在開發階段,前後端工程師約定好數據交互接口,實現並行開發和測試;在運行階段前後端分離模式需要對web應用進行分離部署,前後端之前使用HTTP或者其他協議進行交互請求。

二、為什麽要進行前後端分離

在以前傳統的網站開發中,前端一般扮演的只是切圖的工作,只是簡單地將UI設計師提供的原型圖實現成靜態的HTML頁面,而具體的頁面交互邏輯,比如與後臺的數據交互工作等,可能都是由後臺的開發人員來實現的,這也就導致了前後端工作分配不均。這樣做不僅僅開發效率慢,代碼也難以維護。而前後端分離的話,則可以很好的解決前後端分工不均的問題,將更多的交互邏輯分配給前端來處理,而後端則可以專註於其本職工作,像提供

API接口,進行權限控制以及進行運算工作。而前端開發人員則可以利用nodejs來搭建自己的本地服務器,直接在本地開發,然後通過一些插件來將api請求轉發到後臺,這樣就可以完全模擬線上的場景,並且與後臺解耦。前端可以獨立完成與用戶交互的整一個過程,兩者都可以同時開工,不互相依賴,開發效率更快,而且分工比較均衡。

三、實現前後端分離

前後端分離大概可以從四個方面來理解:

1.交互形式

在前後端分離架構中,後端只需要負責按照約定的數據格式向前端提供可調用的API服務即可。前後端之間通過HTTP請求進行交互,前端獲取到數據後,進行頁面的組裝和渲染,最終返回給瀏覽器。

2.代碼組織方式

前後端代碼庫分離,前端代碼中有可以進行

Mock測試(通過構造虛擬測試對 象以簡化測試環境的方法)的偽後端,能支持前端的獨立開發和測試。而後端 代碼中除了功能實現外,還有著詳細的測試用例,以保證API的可用性,降低 集成風險。

3.開發模式

實現前後端分離架構之後,前端工程師只需要編寫HTMLjsCSS等前端資源,然後通 過HTTP請求調用後端提供的服務即可。除了開發期的分離,在運行期前後端資源也 會進行分離部署。前後端分離之後,開發流程將如下圖所示。

技術分享圖片

通過上面的流程圖,不難發現,在開發模式上,前後段分離不僅僅只是工程師的分工開發,更重要的意義在於實現了前後端的並行開發,簡化了開發流程

4.數據接口規範流程

在開發期間前後端共同商定好數據接口的交互形式和數據格式。然後實現前後端的並行開發,其中前端工程師再開發完成之後可以獨自進行

mock測試,而後端也可以使用接口測試平臺進行接口自測,然後前後端一起進行功能聯調並校驗格式,最終進行自動化測試。

技術分享圖片

四、前後端分離的好處

1. 適配性提升

我們其實在開發過程中,經常會給pc端、mobileapp端各自研發一套前端。其實對於這三端來說,大部分端業務邏輯是一樣的。唯一區別就是交互展現邏輯不同。如果controller層在後端手裏,後端為了這些不同端頁面展示邏輯,自己維護這些controller,徒增和前端溝通端成本。

2. 響應速度提升

我們有時候,會遇到後端返回給前端的數據太簡單了,前端需要對這些數據進行邏輯運算。那麽在數據量比較小的時候,對其做運算分組等操作,並無影響。但是當數據量大的時候,會有明顯的卡頓效果。這時候,node中間層其實可以將很多這樣的代碼放入node層處理、也可以替後端分擔一些簡單的邏輯、又可以用模板引擎自己掌握前臺的輸出。這樣做靈活度、響應度都大大提升。

3. 性能得到提升

大家應該都知道單一職責原則。從該角度來看,我們請求一個頁面,可能要響應很多看後端接口,請求變多了,自然速度就變慢了,這種現象在mobile端更加嚴重。采用node作為中間層,將頁面所需要的多個後端數據,直接在內網階段就拼裝好,再統一返回給前端,會得到更好的性能

為什麽要進行前後端分離?