基于前后端分離架構(gòu)的圖書館Web系統(tǒng)設(shè)計與實現(xiàn)

摘 要：B/S（瀏覽器/服務(wù)器）架構(gòu)是主流的web系統(tǒng)設(shè)計實現(xiàn)方式，由于瀏覽器作為操作系統(tǒng)的一個標(biāo)準(zhǔn)配置，通過B/S這種架構(gòu)，極大的方便了用戶隨時隨地訪問服務(wù)器，獲取Internet上的資源；而前后端分離思想是web系統(tǒng)的一種新穎的架構(gòu)模式，該架構(gòu)使web開發(fā)的分工越來越明確，前后端開發(fā)的耦合度大大降低[1]。本文論述的是一套應(yīng)用于圖書館的前后端分離架構(gòu)的web系統(tǒng)，詳細(xì)介紹了前后端分離模式概念、整個web系統(tǒng)的架構(gòu)設(shè)計、基于Node.js運(yùn)行環(huán)境的前端架構(gòu)設(shè)計實現(xiàn)、基于java的SSM后端框架設(shè)計實現(xiàn)。

關(guān)鍵詞：前后端分離；web系統(tǒng)；前端；后端；圖書館

前后端分離架構(gòu)

下面根據(jù)前后端分離架構(gòu)的特點進(jìn)行剖析，論述該架構(gòu)模式相對于傳統(tǒng)web項目開發(fā)的優(yōu)勢，對比說明其應(yīng)用價值，然后根據(jù)系統(tǒng)使用群體的不同，論述了前后端分離部署的幾種方案。

1.1架構(gòu)剖析

前后端分離的架構(gòu)模式可以通過以下三方面剖析說明：

（1）前端與后端的連接交互方式。通過RESTful的設(shè)計風(fēng)格，前后端各司其職，后端根據(jù)約定的數(shù)據(jù)數(shù)據(jù)結(jié)構(gòu)提供數(shù)據(jù)的API接口，前端根據(jù)獲取的結(jié)構(gòu)化數(shù)據(jù)渲染整個頁面，填充頁面信息。

（2）項目工程獨(dú)立。前端與后端的工程項目可以獨(dú)立開發(fā)和單元測試，后端接口開發(fā)完成后，可以通過Postman等測試工具實現(xiàn)API接口調(diào)試，前端代碼完成后也可通過假數(shù)據(jù)自行完成頁面渲染調(diào)試[3]。

（3）項目的開發(fā)流程。分離架構(gòu)下的開發(fā)流程是支持并行開發(fā)，統(tǒng)一調(diào)試，傳統(tǒng)架構(gòu)下的開發(fā)模式耦合性很強(qiáng)，前后端相互影響的因素很多。

綜合以上三個方面的論述，前后端分離帶來的優(yōu)勢非常明顯，開發(fā)分工明確，代碼低耦合，集成高效率，降低了運(yùn)維成本等。

目前在面對復(fù)雜多變的頁面需求時，傳統(tǒng)web項目勢必做大量的代碼修改重構(gòu)工作，而前后端分離架構(gòu)模式下就顯得從容不迫，無需修改后端邏輯，只需要變換一下頁面展示即可，此外，當(dāng)前流行的各種數(shù)據(jù)驅(qū)動前端框架（vue、react等），可以很好地實現(xiàn)頁面元素與數(shù)據(jù)的雙向綁定，大大提升了開發(fā)效率，減少復(fù)雜的js邏輯操作。

1.2前后端分離架構(gòu)部署

前后端代碼是分離開發(fā)的，后端代碼可以單獨(dú)編譯生成待部署文件，前端也可構(gòu)建整合，生成靜態(tài)文件。所以，在項目部署的時候也要前后端分開部署，我們根據(jù)項目的需求情況和不同的用戶群體，選擇不同的前后端分離部署方案。具體分析如下所示：

（1）Nginx+后端服務(wù)器

這是最簡單的一種部署方案，很好地實現(xiàn)前后端代碼分離部署。Nginx負(fù)責(zé)管理前端代碼，后端服務(wù)器管理后端代碼，如果用戶端訪問的是界面靜態(tài)資源，Nginx可將資源推送到用戶端；如果需要訪問后端，Nginx負(fù)責(zé)聯(lián)系后端服務(wù)器，后端返回結(jié)果再經(jīng)過Nginx推送給前端用戶。

該方案存在兩方面缺點，第一點是不利于搜索引擎檢索和網(wǎng)站推廣；第二點是全部由瀏覽器將返回的靜態(tài)資源處理渲染，加重瀏覽器渲染頁面負(fù)擔(dān)，。

（2）Node服務(wù)器+后端服務(wù)器

這種部署方案利用Node服務(wù)器作為客戶端與服務(wù)器之間溝通的橋梁，后端服務(wù)器還是負(fù)責(zé)后端代碼部署管理，Node服務(wù)器負(fù)責(zé)前端靜態(tài)資源部署，與Nginx不同的是，Node服務(wù)器需要Model Proxy作為接口配置的統(tǒng)一管理，用來跟后端服務(wù)器交互[4]。這樣與Nginx相比，SEO和客戶端瀏覽器的負(fù)擔(dān)都得到了很好的改善，但不是所有的前后端請求都需要渲染頁面，所以這種部署方案會對請求性能有影響。

（3）Nginx +Node服務(wù)器+后端服務(wù)器

上面兩種方案都存在各自的優(yōu)缺點，所以產(chǎn)生了第三種部署方案：利用Nginx做反向代理和分發(fā)請求，如果客戶端是URL請求，就分發(fā)到Node服務(wù)器上進(jìn)行頁面渲染再返回，如果客戶端是API請求，則不經(jīng)過Node服務(wù)器處理，直接到后端服務(wù)器，再返回給客戶端。該種方案解決了其他兩種的所有問題，但是通過如下架構(gòu)來看，需要多種服務(wù)器相互協(xié)調(diào)配置，部署復(fù)雜，實施成本高。

綜上所述，得出如下對比表格，可以根據(jù)不同的用戶群體和具體的需求，選擇合適的部署方案。

基于前后端分離架構(gòu)的圖書館Web系統(tǒng)設(shè)計

2. 整體架構(gòu)

整體架構(gòu)圖如下圖1所示，整個web系統(tǒng)設(shè)計通過Restful API將前后端分離，層次清晰，耦合度低，主要包括了前端UI展示模塊、前端路由和權(quán)限控制模塊、Restful API接口模塊、后端服務(wù)模塊。具體數(shù)據(jù)流動可以描述為：數(shù)據(jù)請求從前端開始傳遞，經(jīng)過前端路由后，通過Restful API與后端服務(wù)接口產(chǎn)生交互，后端控制器調(diào)用相關(guān)的service，增刪改查MySql數(shù)據(jù)庫的內(nèi)容，將結(jié)果再逐層返回到前端UI展示[1]。

2. 前端架構(gòu)

前端框架包括很多內(nèi)容，在此主要論述一下關(guān)鍵的前端插件。以Node.js為核心，底層搭載Express、路由等功能框架，實現(xiàn)基本的Http服務(wù)、路由跳轉(zhuǎn)、數(shù)據(jù)轉(zhuǎn)發(fā)等功能；上層搭載各種前端必備的js插件，Jquery、Vue、Bootstrap等，方便實現(xiàn)UI頁面的動態(tài)交互效果和組件化。

2. 后端架構(gòu)

后端框架在整個系統(tǒng)中主要負(fù)責(zé)提供服務(wù)接口，處理具體的業(yè)務(wù)邏輯，以及與數(shù)據(jù)庫連接交互。后端框架采用經(jīng)典的SSM（Spring、Spring MVC、Mybatis）框架設(shè)計，控制器用來接收前端的Http請求，并調(diào)用相應(yīng)的Service完成業(yè)務(wù)邏輯操作，Service層主要負(fù)責(zé)業(yè)務(wù)邏輯處理，是Controller和Dao兩層的中間過渡，Dao層負(fù)責(zé)數(shù)據(jù)庫的連接和交互，執(zhí)行具體的數(shù)據(jù)庫增刪改查操作[6]。

3結(jié)語與展望

前后端分離架構(gòu)是web系統(tǒng)開發(fā)的一種新的模式，相比傳統(tǒng)開發(fā)形式，優(yōu)勢非常明顯，目前，圖書館的大部分系統(tǒng)均采用傳統(tǒng)架構(gòu)，不利于精細(xì)化分工，應(yīng)對以后復(fù)雜多變的前端需求將變得越來越笨重，可維護(hù)性越來越差[7]。所以，分離開發(fā)架構(gòu)是大勢所趨，應(yīng)用在圖書館的相關(guān)管理系統(tǒng)中將很好地提升其維護(hù)性和拓展性。

參考文獻(xiàn)

[1]范凌云，基于MVVM框架的旅游網(wǎng)站的設(shè)計與實現(xiàn)，2016，北京交通大學(xué). 第 98頁.

[2]胡彥婷，基于REST的Web系統(tǒng)設(shè)計與實現(xiàn). 軟件導(dǎo)刊，2016（08）：第122-124頁.

[3]林嘉婷，試談前后端分離及基于前端MVC框架的開發(fā). 電腦編程技巧與維護(hù)，2016（23）：第5-8頁.

作者簡介

宮兆陽（1990.11-），男，漢，山東省青島市，助理館員，助理館員，研究生，研究方向：圖書館信息化建設(shè)。

（作者單位：中國海洋大學(xué)）