基于前后端分离架构的图书馆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-），男，汉，山东省青岛市，助理馆员，助理馆员，研究生，研究方向：图书馆信息化建设。

（作者单位：中国海洋大学）