基于前后端分離架構的圖書館Web系統設計與實現

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

關鍵詞：前后端分離；web系統；前端；后端；圖書館

前后端分離架構

下面根據前后端分離架構的特點進行剖析，論述該架構模式相對于傳統web項目開發的優勢，對比說明其應用價值，然后根據系統使用群體的不同，論述了前后端分離部署的幾種方案。

1.1架構剖析

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

（1）前端與后端的連接交互方式。通過RESTful的設計風格，前后端各司其職，后端根據約定的數據數據結構提供數據的API接口，前端根據獲取的結構化數據渲染整個頁面，填充頁面信息。

（2）項目工程獨立。前端與后端的工程項目可以獨立開發和單元測試，后端接口開發完成后，可以通過Postman等測試工具實現API接口調試，前端代碼完成后也可通過假數據自行完成頁面渲染調試[3]。

（3）項目的開發流程。分離架構下的開發流程是支持并行開發，統一調試，傳統架構下的開發模式耦合性很強，前后端相互影響的因素很多。

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

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

1.2前后端分離架構部署

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

（1）Nginx+后端服務器

這是最簡單的一種部署方案，很好地實現前后端代碼分離部署。Nginx負責管理前端代碼，后端服務器管理后端代碼，如果用戶端訪問的是界面靜態資源，Nginx可將資源推送到用戶端；如果需要訪問后端，Nginx負責聯系后端服務器，后端返回結果再經過Nginx推送給前端用戶。

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

（2）Node服務器+后端服務器

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

（3）Nginx +Node服務器+后端服務器

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

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

基于前后端分離架構的圖書館Web系統設計

2. 整體架構

整體架構圖如下圖1所示，整個web系統設計通過Restful API將前后端分離，層次清晰，耦合度低，主要包括了前端UI展示模塊、前端路由和權限控制模塊、Restful API接口模塊、后端服務模塊。具體數據流動可以描述為：數據請求從前端開始傳遞，經過前端路由后，通過Restful API與后端服務接口產生交互，后端控制器調用相關的service，增刪改查MySql數據庫的內容，將結果再逐層返回到前端UI展示[1]。

2. 前端架構

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

2. 后端架構

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

3結語與展望

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

參考文獻

[1]范凌云，基于MVVM框架的旅游網站的設計與實現，2016，北京交通大學. 第 98頁.

[2]胡彥婷，基于REST的Web系統設計與實現. 軟件導刊，2016（08）：第122-124頁.

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

作者簡介

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

（作者單位：中國海洋大學）