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

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

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

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

1.1架構(gòu)剖析

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

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

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

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

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

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

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

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

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

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

該方案存在兩方面缺點(diǎn)，第一點(diǎn)是不利于搜索引擎檢索和網(wǎng)站推廣；第二點(diǎn)是全部由瀏覽器將返回的靜態(tài)資源處理渲染，加重瀏覽器渲染頁(yè)面負(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)一管理，用來(lái)跟后端服務(wù)器交互[4]。這樣與Nginx相比，SEO和客戶端瀏覽器的負(fù)擔(dān)都得到了很好的改善，但不是所有的前后端請(qǐng)求都需要渲染頁(yè)面，所以這種部署方案會(huì)對(duì)請(qǐng)求性能有影響。

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

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

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

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

2. 整體架構(gòu)

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

2. 前端架構(gòu)

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

2. 后端架構(gòu)

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

3結(jié)語(yǔ)與展望

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

參考文獻(xiàn)

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

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

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

作者簡(jiǎn)介

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

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