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

2022-05-30 13:09:14 字數 2037 閱讀 9725

可能很多人會有誤解,認為web應用的開發期進行了前後端開發工作的分工就是前後端分離。但其實前後端分離並不只是開發模式,而是

web應用的一種架構模式。在開發階段,前後端工程師約定好資料互動介面,實現並行開發和測試;在執行階段前後端分離模式需要對

web應用進行分離部署,前後端之前使用

或者其他協議進行互動請求。

在以前傳統的**開發中,前端一般扮演的只是切圖的工作,只是簡單地將ui設計師提供的原型圖實現成靜態的

html

頁面,而具體的頁面互動邏輯,比如與後台的資料互動工作等,可能都是由後台的開發人員來實現的,這也就導致了前後端工作分配不均。這樣做不僅僅開發效率慢,**也難以維護。而前後端分離的話,則可以很好的解決前後端分工不均的問題,將更多的互動邏輯分配給前端來處理,而後端則可以專注於其本職工作,像提供

api介面,進行許可權控制以及進行運算工作。而前端開發人員則可以利用

nodejs

來搭建自己的本地伺服器,直接在本地開發,然後通過一些外掛程式來將

api請求**到後台,這樣就可以完全模擬線上的場景,並且與後台解耦。前端可以獨立完成與使用者互動的整乙個過程,兩者都可以同時開工,不互相依賴,開發效率更快,而且分工比較均衡。

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

1.互動形式

在前後端分離架構中,後端只需要負責按照約定的資料格式向前端提供可呼叫的api服務即可。前後端之間通過

請求進行互動,前端獲取到資料後,進行頁面的組裝和渲染,最終返回給瀏覽器。

2.**組織方式

前後端**庫分離,前端**中有可以進行mock測試

(通過構造虛擬測試對 象以簡化測試環境的方法

)的偽後端,能支援前端的獨立開發和測試。而後端 **中除了功能實現外,還有著詳細的測試用例,以保證

api的可用性,降低 整合風險。

3.開發模式

實現前後端分離架構之後,前端工程師只需要編寫html、js、

css等前端資源,然後通 過

請求呼叫後端提供的服務即可。除了開發期的分離,在執行期前後端資源也 會進行分離部署。前後端分離之後,開發流程將如下圖所示。

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

4.資料介面規範流程

在開發期間前後端共同商定好資料介面的互動形式和資料格式。然後實現前後端的並行開發,其中前端工程師再開發完成之後可以獨自進行mock測試,而後端也可以使用介面測試平台進行介面自測,然後前後端一起進行功能聯調並校驗格式,最終進行自動化測試。

1. 適配性提公升

我們其實在開發過程中,經常會給pc端、

mobile

、端各自研發一套前端。其實對於這三端來說,大部分端業務邏輯是一樣的。唯一區別就是互動展現邏輯不同。如果

controller

層在後端手裡,後端為了這些不同端頁面展示邏輯,自己維護這些

controller

,徒增和前端溝通端成本。

2. 響應速度提公升

我們有時候,會遇到後端返回給前端的資料太簡單了,前端需要對這些資料進行邏輯運算。那麼在資料量比較小的時候,對其做運算分組等操作,並無影響。但是當資料量大的時候,會有明顯的卡頓效果。這時候,node中間層其實可以將很多這樣的**放入

node

層處理、也可以替後端分擔一些簡單的邏輯、又可以用模板引擎自己掌握前台的輸出。這樣做靈活度、響應度都大大提公升。

3. 效能得到提公升

大家應該都知道單一職責原則。從該角度來看,我們請求乙個頁面,可能要響應很多看後端介面,請求變多了,自然速度就變慢了,這種現象在mobile端更加嚴重。採用

node

作為中間層,將頁面所需要的多個後端資料,直接在內網階段就拼裝好,再統一返回給前端,會得到更好的效能。

為什麼要進行前後端分離

傳統開發模式 前後端分離方式 對比以上兩圖我們可以看到,前後端分離方式流程簡單多了。簡單來說就是後端提供api,前端呼叫api獲取資料來渲染頁面,當然這其中還有許多細節問題,比如跨域問題,介面資料格式約定問題等,這些以後詳談。在開發階段,當有新的需求時,前後端工程師約定好介面資料格式,就可以並行進行...

我們為什麼要嘗試前後端分離

如果你沒有嘗試過前後端分離的工作流程,那麼可以先試想一下這樣的流程改變 把流程從 pm 我要這個功能 後端 這個先找前端做個模板 前端 模板做完了 後端 我來對接一下,這裡樣式不對 前端 我改完了 後端 功能交付 pm 春節要加這個活動 後端 這個先找前端改個模板 前端 模板做完了 後端 我來對接一...

我們為什麼要嘗試前後端分離

如果你沒有嘗試過前後端分離的工作流程,那麼可以先試想一下這樣的流程改變 把流程從 pm 我要這個功能 後端 這個先找前端做個模板 前端 模板做完了 後端 我來對接一下,這裡樣式不對 前端 我改完了 後端 功能交付 pm 春節要加這個活動 後端 這個先找前端改個模板 前端 模板做完了 後端 我來對接一...