面向企業級web應用的前后端分離開發模式及實踐

杜艷美 黃曉芳

(西南科技大學計算機科學與技術學院 四川綿陽 621010)

隨著前端技術的飛速發展和web應用的復雜化，web應用正在往兼容多端、高性能的方向發展[1-2]，為了快速迭代產品以滿足用戶日益變化的需求，提高用戶體驗及提升企業競爭力，web應用開發技術要求更加高效率地開發，并兼顧性能要求，方便快速迭代及后期維護簡單。

傳統的B/S(Browser/Server，瀏覽器/服務器)模式下的web開發中存在前端代碼無法復用、性能在移動互聯網中很難達到最優、大量多頁面應用和單頁web應用(SPA，single page web application)不能滿足需求等問題，而且，在這種開發模式下，網頁路由需要后端配合，前后端工作無法獨立，再次迭代和維護效率較低，無法滿足企業級應用的迭代速度。

本文針對前后端分離的開發模式[3-4]，提出一種解決多終端性能、組件化開發和打包部署的完整的開發模型，以求進一步提高開發效率，通過實際系統的開發實踐，證明了該開發模型的有效性。

1 研究現狀

隨著模塊化和組件化理念出現，前端開發技術開始更加關注性能優化、用戶體驗的提升以及開發速度的快速迭代。如Google公司的開源框架AngularJs[5]，AngularJs首創的雙向數據綁定、內置的模塊注入和組件化的支持，為web的發展提供了較大貢獻；FaceBook開發的開源框架ReactJs是第一個采用虛擬節點( virtual dom )技術的框架,使得框架足夠輕量和靈活，推進了web性能的提升；VueJs[6-7]以其輕量級、高性能、靈活性的特點，使其不僅適用于大型復雜的web應用，而且適合移動場景，為web技術的發展和性能提升做了進一步的貢獻。模塊構建工具WebPack的出現給前端性能優化帶來更多便利。NodeJs逐漸發展成一個成熟的開發平臺，吸引了許多開發者，國內諸多大型高流量網站都采用NodeJs進行開發。NodeJs的發展，為web研發模式帶來了新的解決思路[8-9]，即通過在傳統的前端和后端之間引入NodeJs作為中間層，使得前端和后端實現完全解耦，業界諸如阿里、百度都已有基于NodeJs做前后端分離的應用。在學術界，針對web端性能的優化，也有大量的研究工作。2016年，孔令旭等人提出了一種基于Node.js實現的前后端分離的解決方案，并證明了其在性能方面的高效性[10]；2017年，吳賀提出一種前后端解耦模式的開發方案，其核心是通過在傳統的MVC結構上，引入Node.js作為前端和后端的中間層，從而解耦前端和后端，實現前端獨立開發[11]；同樣在2017年，仇晶、黃巖等人提出基于Node.js中間層的web開發，在傳統的互聯網前后端web應用中，提出了引入Node.js作為中間層來解除前、后端之間的耦合關系的新解決方案[12]。但是對于企業級大型web應用前后端分離，如何提升前端開發效率等研究較少。目前,大部分的系統架構如圖1所示，雖然有些系統采用分布式架構，層與層之間使用了遠程調用框架，但是本質類似。前后端耦合的問題主要發生

圖1 目前大部分的系統架構Fig.1 Most of the current system architecture

在控制層(Control)，控制層是前端和服務端交互的邊界，但是在開發過程中控制層(Control)和服務層(Server)常常混淆不清，這就是前后端耦合度高的重要原因。因此，要前后端解耦，就要劃清控制層的邊界。同時，前后端分離的終極目標應該是前端和服務端是完全獨立的項目，前端項目應該包含圖1里的瀏覽器和控制層，服務端項目包括服務層、DAO層等。項目開發時讓前端脫離于后端，讓后端專注于業務服務，最后生產發布也要獨立部署，前端專注于展示和交互，這樣就達到了前后端真正解耦。

2 一種高效的前后端技術分離模型

2.1 總體思路

本文通過在前端和后端之間引入nodeJs作為中間層，后端通過REST框架實現前后端分離架構。前端模型構建視圖層、接口層和服務端，其中視圖層包含組件、路由模塊，接口層包括所有具體的業務接口以及服務端nginx[13]作為靜態資源代理和nodeJs作為前端和后端服務的中間層，并且服務端可以根據應用的性能要求，采用負載均衡的方案以達到高性能的要求，從而快速響應客戶端的請求。前端基于nodeJs+npm對開源依賴包和工具進行管理，通過webPack工具實現前端模塊化打包、合并和壓縮文件。

通過vue實現前端模塊化和組件化開發模式；通過vue-router管理用戶請求和頁面跳轉；頁面通過ajax調用后端的restful api接口；前端與后端定義一個相對通用的JSON響應結構，其中包含兩部分：元數據與返回值，其中，元數據表示操作是否成功與返回值消息等，返回值對應服務端方法所返回的數據。

JSON響應結構如下：

{

"meta": {

"success": true,

"message": "ok"

},

"data": ...

}

前后端分離的總體架構模型如圖2所示。

2.2 面向企業業務應用場景的組件化開發模型

對于大型web應用，涉及多團隊合作開發，要讓開發人員之間高效合作，就得降低各功能之間的耦合度和重復開發的成本，盡量讓各開發人員負責的模塊依賴度降低，同時也便于后期的共同維護。組

圖2 前后端分離的總體技術模型Fig.2 General technical model of frontend-backend separation

件化開發即可解決這樣的問題，組件以其高內聚、可重用、可互換、可組合的特點使得開發者之間不會產生開發時序的依賴，大幅提升并行的開發效率，也更容易支持多個團隊共同維護一個大型應用的開發。在一個企業內部，web前端的組件，不管這個組件是UI層級，還是javascript開發層級，都脫離不了該企業業務產品的模式，比如常見的登錄、注冊、新聞網站的新聞列表組件、文件系統的文件列表組件，都可以抽象成組件。基于組件開發，最重要的是組件可以用來組合構成其他組件，通過分類處理，理清組件的應用邊界，這樣可以有針對性的積累和完善這些組件，有意識地開發相關的組件，最終形成一個針對某個業務組件的組件倉庫，即頁面上的每個獨立的可視/可交互區域視為一個組件(圖3)。

圖3 組件與頁面的關系Fig.3 The relationship between the component and the page

VueJs的組件化、模塊化的特點和WebPack模塊化打包的方案使得組件化開發、后期的打包部署和模塊化帶來的性能問題有了技術支撐，是真正將 JavaScript，Css和 Template 同時都考慮進去的模塊化方案，而非僅僅 JavaScript 模塊化方案。

3 模型的實踐分析

3.1 模型實踐開發

通過將該模型用于面向SaaS級的企業web應用開發，該應用是一款電子簽名產品，其面向多終端用戶提供服務，提供文件簽名、文件查詢、文檔預覽、簽名制作、個人信息設置、實名認證等核心功能。

前端開發選用輕量級的vueJs作為基礎庫，采用vue-router對頁面路由進行構建和管理，通過vuex管理組件狀態，前端基于nodeJs+npm對開源依賴包和工具進行管理，通過webPack工具實現前端模塊化打包、合并和壓縮文件(圖4)。

圖4 前端主要技術Fig.4 Main front-end technology

基于面向企業業務場景的組件化開發模型，應用在此系統中，為了讓各終端的體驗效果和頁面視覺效果達到最佳，將視圖層分為了移動端和電腦客戶端，根據界面原型進行UI組件劃分，通過對所有界面進行分析、解構、重組，最后總結UI組件的構件分成移動UI業務組件、公共UI業務組件、電腦UI業務組件三大部分，UI組件的總體構建思路如圖5所示。結合前后端分離模型，應用的前端工程目錄結構劃分如表1所示。

圖5 UI組件的構建思路Fig.5 The idea of building UI components

各戶端開發目錄用途commons存放公共文件component用于存放業務基礎組件interface用于前端接口處理,可提供各終端調用。page-components最終客戶端可訪問的頁面,頁面內部由多個基礎業務組件組合成一個完整的功能頁。routes路由分發,為了讓不同終端的用戶體驗效果達到最佳,這里的重構設計將移動端單獨做了一份頁面,但是基于組件化的思想,各終端共用了基礎的業務組件,共用接口層,只有view層做了變化,因此,達到在保證各終端體驗效果最佳的情況下,最大化地減少功能重復開發的成本。styles存放樣式模塊

3.2 效果分析

經過前后端分離，原先開發Java后臺的人員只需要專注API的設計和實現，無需關心前端頁面路由；前端以組件化的方式劃分，可以輕易將前端開發人員進行分層，擅長網絡層和js開發的人員，專注

server端與后臺接口的對接和專注書寫提供客戶端調用的js模塊，擅長css和html的開發人員，即可專注UI組件的實現，且開發人員以組件劃分任務。

(1)前后端開發模式由串行變成了并行，開發效率明顯提升，各模塊之間沒有耦合，大家只需要按照需求實現各自組件即可。

(2)前端部分性能優化不再受限，靜態頁面的訪問可以通過引用Nignx，使得后臺不再關心靜態頁面訪問帶來的壓力，并且前端server端可根據用戶端的情況擴展服務器，以達到良好的訪問速度(圖6)。

圖6 負載均衡的時間圖Fig.6 Design diagram of load balance

(3)使用壓力測試工具ab(ab是apache自帶的壓力測試工具)，分別模擬4組數據，并發請求訪問本地發布的2種單服務器環境的相同首頁訪問效果，采用前后端分離模型之后性能顯著提升，且并發請求量越高，分離后的性能優勢越明顯(表2)。

表2 性能測試數據Table 2 Performance test data

4 結束語

本文通過前后端分離技術的研究，設計了面向web應用的前后端分離模型的設計與開發，并設計了面向企業業務場景的組件化開發模型，通過實踐證明該模型在web應用開發過程中的高效性。

[1] 劉順益.移動互聯網技術的發展現狀及未來發展趨勢[J].黑龍江科技信息,2017,(17):167.

[2] 吳秒秒.WEB系統前端性能優化研究[J].中國科技投資,2017,(1):315.

[3] 林嘉婷.試談前后端分離及基于前端MVC框架的開發[J].電腦編程技巧與維護,2016,(23):5-8.

[4] 孫娉娉,李新,史廣軍.基于前后端分離的內容管理系統[J].科研信息化技術與應用,2016,(4):70-75.

[5] 董英茹.簡談AngularJS在下一代Web開發中的應用[J].軟件工程師,2015,(5):30-31.

[6] 朱二華.基于Vue.js的Web前端應用研究[J].科技與創新,2017,(20):119-121.

[7] 李曰斌，詹舒波.基于Vue的前端組件化研究與實踐[Z].2016.09.09.

[8] 萬里晴,楊浩.探究基于V8引擎的Node.js在各應用領域的發展[J].通信世界,2015,(13):97-97.

[9] 王金龍,宋斌,丁銳.Node.js:一種新的Web應用構建技術[J].現代電子技術,2015,(6):70-73.

[10] 孔令旭. 基于Node.js的前后端分離框架的實現與應用[D]. 湖北武漢：華中科技大學, 2016.

[11] 吳賀. 前后端解耦模式及開發[J]. 計算機系統應用, 2017, 26(2):217-221.

[12] 仇晶, 黃巖, 柴瑜晗. 基于Node.js中間層Web開發的研究與實現——以微信圖書借閱平臺為例[J]. 河北工業科技, 2017, 34(2):118-124.

[13] 肖明魁.基于Nginx負載均衡技術初探[J].科技展望,2015,(36):125.