前后端分離實踐

在傳統的web應用開發中，大多數的程序員會將瀏覽器作為前后端的分界線。將瀏覽器中為用戶進行頁面展示的部分稱之為前端，而將運行在服務器，為前端提供業務邏輯和數據準備的所有代碼統稱為后端。

由于前后端分離這個概念相對來說剛出現不久，很多人都是只聞其聲，不見其形，所以可能會對它產生一些誤解，誤以為前后端分離只是一種web應用開發模式，只要在web應用的開發期進行了前后端開發工作的分工就是前后端分離。

其實前后端分離并不只是開發模式，而是web應用的一種架構模式。在開發階段，前后端工程師約定好數據交互接口，實現并行開發和測試；在運行階段前后端分離模式需要對web應用進行分離部署，前后端之前使用HTTP或者其他協議進行交互請求。然而作為一種架構模式，我們在實施的過程中主要對以下四個方面來進行比較和重新認識。

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

（1）交互形式

（2）代碼組織方式

（3）開發模式

（4）數據接口規范流程

一、交互形式

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

二、代碼組織方式

在傳統架構模式中，前后端代碼存放于同一個代碼庫中，甚至是同一工程目錄下。頁面中還夾雜著后端代碼。前后端工程師進行開發時，都必須把整個項目導入到開發工具中。

而前后端分離模式在代碼組織形式上有以下兩種:

（1）半分離

前后端共用一個代碼庫，但是代碼分別存放在兩個工程中。后端不關心或很少 關心前端元素的輸出情況，前端不能獨立進行開發和測試，項目中缺乏前后端 交互的測試用例。

（2）分離

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

三、開發模式

我們之前的架構屬于傳統的MVC架構，整體沒有進行前后端分離，在項目的開發階段，前端工程師負責編寫HTML，完成前端的頁面設計并套頁面，然后再使用模板技術將寫好的前端代碼轉換為Smarty腳本，同時內嵌一些后端提供的模板變量和一些邏輯操作。應用運行期，將全部代碼進行打包，和后端代碼部署到同一服務器上，同時會進行簡單的動靜態分離部署。

此時，應用的開發流程如下圖所示。

而在實現前后端分離架構之后，前端工程師只需要編寫HTML、js、CSS等前端資源，然后通 過HTTP請求調用后端提供的服務即可。除了開發期的分離，在運行期前后端資源也 會進行分離部署。

前后端分離之后，開發流程將如下圖所示。

通過上面的兩幅流程圖，不難發現，在開發模式上，前后段分離不僅僅只是工程師的分工開發，更重要的意義在于 實現了前后端的并行開發，簡化了開發流程 。

四、數據接口規范流程

在開發期間前后端共同商定好數據接口的交互形式和數據格式。然后實現前后端的并行開發，其中前端工程師再開發完成之后可以獨自進行mock測試，而后端也可以使用接口測試平臺進行接口自測，然后前后端一起進行功能聯調并校驗格式，最終進行自動化測試。

分離的四個好處

前后端分離模式和傳統的web應用架構相比有很大的不同，到底分還是不分，這還真是個問題。

從目前應用軟件開發的發展趨勢來看，主要有兩方面需要注意：

（1）越來越注重用戶體驗，隨著互聯網的發展，開始多終端化。

（2）大型應用架構模式正在向云化、微服務化發展。

我們主要通過前后端分離架構，為我們帶來以下四個方面的提升：

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

通過將開發團隊前后端分離化，讓前后端工程師只需要專注于前端或后端的開發工作，是的前后端工程師實現自治，培養其獨特的技術特性，然后構建出一個全棧式的精益開發團隊。

（2）提升開發效率

前后端分離以后，可以實現前后端代碼的解耦，只要前后端溝通約定好應用所需接口以及接口參數，便可以開始并行開發，無需等待對方的開發工作結束。與此同時，即使需求發生變更，只要接口與數據格式不變，后端開發人員就不需要修改代碼，只要前端進行變動即可。如此一來整個應用的開發效率必然會有質的提升。

（3）完美應對復雜多變的前端需求

如果開發團隊能完成前后端分離的轉型，打造優秀的前后端團隊，開發獨立化，讓開發人員做到專注專精，開發能力必然會有所提升，能夠完美應對各種復雜多變的前端需求。

（4）增強代碼可維護性

前后端分離后，應用的代碼不再是前后端混合，只有在運行期才會有調用依賴關系。

應用代碼將會變得整潔清晰，不論是代碼閱讀還是代碼維護都會比以前輕松。

需要進行前后端分離的場景

任何一項技術以及架構都不是適用于任何場景，前后端分離同樣也是如此。雖然前后端分離架構能帶來許多的好處，但前提是建立在開發團隊合適的基礎上的。

（1）頁面布局復雜，使用了主題和樣式。

（2）需要有較高的頁面渲染效果

（3）前端頁面中包含復雜業務邏輯

（4）頁面需要渲染的數據量較大

像這種 重前端 的應用我們綜合考慮了各種情況，最終決定采用前后端分離架構。

部署方案

前后端分離之后，應用在部署時也需要進行前后端分離。在進行前后端分離方案選擇時，需要結合項目的實際情況和用戶來考慮。

分離之前的架構

前后端分離之前，網盤的后端架構是Nginx服務和后端的PHP服務以及前端的靜態資源都是部署在同一臺服務器上。當瀏覽器發起訪問請求時，如何請求的是靜態資源，Nginx直接把靜態資源返回給服務器；如果請求的是頁面或后端服務，則經Nginx將請求轉發到后端的PHP服務器，完成響應后經Nginx返回到瀏覽器。

注：此圖中的Nginx屬于后端機，主要針對前端機Nginx轉發過來的請求進行識別弄轉發給本機的PHP服務；前端機和后端機各有一個Nginx服務。

這個方案比較簡單，易于實現，而且能到達前后端解耦的目的。而且很多公司目前都是基于這種架構或者一定的變形來實現的web應用。

但是對于頁面量比較大，需要有良好SEO的應用來說，此方案缺點也較為明顯。因為 Nginx只是向瀏覽器返回頁面靜態資源，而國內的搜索引擎爬蟲只會抓取靜 態數據， 不會解析頁面中的js，這使得應用得不到良好的搜索引擎支持。同時因為Nginx不會進行頁面的組裝渲染，需要把靜態頁面返回到瀏覽器，然后完成渲染工作，這加重了瀏覽器的渲染負擔。

另外，由于這種架構使得前端工程師的工作范圍只局限在了瀏覽器一側，導致在進行一些特殊的性能優化時，前端工程師無法獨立完成，還需要后端開發人員的配合，這也一定程度上影響了雙方的進度。

分離之后的架構

前后端分離之后，我們在原先的架構只上再單獨增加了一個Node Server作為中間層，將前端資源部署到Node Server中。Node Server還實現了一層數據代理服務，負責與提供數據的后端服務進行通信。

并且還在這個基礎上增加并使用了前端機 （前端機是對所有的請求進行預處理和負載均衡，然后再轉發給后端機。） 的Nginx服務，瀏覽器發起的請求經過前端機的Nginx進行分發，URL請求統一分發到Node Server，在Node Server中根據請求類型從后端服務器上通過RPC服務請求頁面的模板數據，然后進行頁面的組裝和渲染；API請求則直接轉發到后端服務器，完成響應。

注：此圖中的Nginx屬于前端機。

V8引擎是什么？

眾所周知，JavaScript是 解析型語言，我們寫好的JavaScript代碼會由JavaScript引擎去解析，而V8是JavaScript引擎的一種。

? 在傳統意義上，我們會認為解析器是逐條解析（一邊執行一邊解析），但為了提高JavaScript的解析速度（相當于提高用戶體驗），在解析的時候做了點“手腳”。

? V8引擎：為了提高解析的性能，引入了一些“后端”的技術(不過他本來就由C++編寫的)。它是先將JavaScript源代碼轉成抽象語法樹，然后再將抽象語法樹生成字節碼。如果發現某個函數被多次調用或者是多次調用的循環體(熱點代碼)，那就會將這部分的代碼編譯優化。說白了就是：對熱點代碼做編譯，非熱點代碼直接解析 。

總結：V8引擎是JavaScript引擎的一種，這個引擎由C++來編寫的，性能很不錯。

Node.js

瀏覽器為了安全，沒有為JavaScript提供一套IO環境 ，而一門后端語言是肯定能進行網絡通信、文件讀寫(IO)的。

后來，有牛逼的人 把V8引擎搬到了服務端上 ，在V8引擎的基礎上 加了網絡通信、IO、HTTP等服務端的函數 。取了一個名字叫： Node.js

? 比如通過 libuv 庫來進行文件讀取，以及建立TCP/UDP連接。通過 xxx 庫解析HTTP請求和響應....這些庫都是由C/C++來編寫的。

所以， Node.js 是運行在服務端的，只不過在基礎語言是JavaScript。

前后端分離方案對比

結語

前后端分離并非僅僅只是前后端開發的分工，而是在開發期進行代碼存放分離、前后 端開發職責分離，前后端能夠獨立進行開發測試;在運行期進行應用部署分離， 前后 端之間通過HTTP請求進行通訊。前后端分離的開發模式與傳統模式相比，能為我們 提升開發效率、增強代碼可維護性，讓我們有規劃地打造一個前后端并重的精益開發 團隊，更好地應對越來越復雜多變的Web應用開發需求。

Nginx web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。