基于前后端分离技术的天地一体化数据管理系统设计

李晓琳 高献伟 韩妍妍

北京电子科技学院，北京市 100070

0 引言

当前我们生活在数据时代，而且是大数据时代。 截至当前，数据量已经从TB 跃升到PB、EB甚至ZB 的级别，数据的爆炸式增长以及其蕴含的巨大价值将对信息时代未来的发展产生深远的影响，数据将成为社会的核心资产。 在大数据时代要充分挖掘数据价值，跟上时代步伐，如何应用数据，挖掘数据的价值将是未来信息技术发展道路上关注的重点［1］。 随着信息技术、Web技术、数据可视化等技术的快速发展，许多领域诸如电子政务、交通、金融等对数据管理的方式有更高的需求。

目前在管理系统开发中存在C／S 和B／S 两种软件架构。 C／S 架构中，一般由服务端和客户端两部分组成，在软件使用的过程中需要在其中一台计算机上安装服务端，在其他计算机上安装客户端，服务器端的程序通过Socket 与客户端的程序通信。 B／S 即浏览器——服务器结构，它是伴随着Internet 技术的兴起而逐渐发展起来的一种新型的软件架构，在这种结构下，通过浏览器来进入工作界面，主要事务逻辑在服务器端实现，这样使得客户端电脑负荷大大简化。

当今的数据管理系统已经融合了大数据、数据可视化等领域，呈现多元化的发展［2］，能够通过多种表现手段给用户更直观的体验［3］。 与C／S 架构的数据管理系统相比，基于B／S 架构的软件系统具有分布性强、系统扩展性强、维护简单等特点。 但是传统的B／S 软件前后端耦合度高，开发人员需要同时负责前后端的开发，使软件的开发效率大大降低［4］。

在天地一体化信息网络中，包含了各种各样的数据，包含通信数据、密码资源数据、设备运行数据、网络数据等，这些数据具有复杂、多样、海量、异构的特点，因此在天地一体化信息网络中需要面临海量、异构的数据采集和高效处理需求，并且往往包含嵌入人工智能技术等。 目前在天地一体化信息网络中，数据管理系统还是基于传统的MVC 架构开发的［5］，其前后端数据耦合性较大，不利于复杂的业务逻辑处理，由于传统的MVC 框架的限制，导致对于复杂数据处理时系统响应时间慢、运行效率低，不便于系统的开发和维护，无法满足在天地一体化网络中对数据信息化管理的需求。

目前，基于前后端分离技术已经成为Web开发的主流趋势，它能够进行多人协同开发，前后端只需定义统一的API 接口，后端开发人员负责业务逻辑，前端开发人员负责界面设计开发［6］，各司其职，大幅度提高软件开发人员的工作效率。 因此，本文针对天地一体化信息网络中数据管理系统分步功能弱、开发效率低、系统维护难等问题，设计了一种基于前后端分离技术的数据管理系统，前端采用轻量级框架，能够实现组件的高效灵活组装，后端采用主流的Spring 框架，简化了配置和开发过程。 系统具有可扩展、性能高的特点，能够实现组网环境下数据管理系统的快速开发、部署和高效协同管理，满足天地一体化网络中对数据信息化管理的需求。

1 关键技术研究

1.1 Vue

Vue 是一款新型的轻量级JavaScript 前端框架，其设计是基于MVVM 模式［7］。 具有高效数据绑定和灵活组件的特点，能够通过简洁的API提供高效的数据绑定和灵活的组件系统。 与其他重量级框架不同，Vue 框架采用了自底向上逐层的开发设计，通过与Vue 生态系统的支持库和第三方库整合，可以为复杂的单页面应用提供驱动［8］。

Vue 提供了Web 开发中常用的功能，具有解耦视图和数据、可复用的组件、数据绑定、组件化、模块化、虚拟DOM 等特点。 此外，Vue 还提供了Vue-cli 脚手架、Vue Router 路由管理、Vuex状态管理库 和Vue 的插件扩展功能。 Vue 能够轻松处理大规模的web 应用场景，对前端代码进行优化从而更快速的加载，因此成为目前最流行的前端框架之一。

1.2 Spring Boot

在现阶段软件市场中，基于Spring 的开发框架已成为市面上的主流开发框架之一［9］。Spring Boot 是基于Java 平台的一种开源应用框架，提供了统一的、高效的企业级软件开发的解决方案。 Spring Boot 继承了Spring 框架的优秀特性，并在此基础上通过简化配置从而简化了Spring 应用的搭建和开发过程。 相比于普通的Spring 应用，SpringBoot 构建的项目可以打包成一个独立可执行的Jar 包或War 包，通过命令直接启动，不需要管理依赖的第三方库，也不需要依赖外部容器。

Spring Boot 框架具有以下的特点：

（1）配置优化。 Spring Boot 框架通过大量注解实现自动化配置，只需要添加相应的依赖场景就可以快速构建出一个独立的Spring 应用。 项目构建过程中无需手动添加依赖的Jar 包，只需选择相应的依赖启动器“starter”，系统会根据所需的开发场景自动获取相关的Jar 包。

（2）编码简单。 Spring Boot 内部提供了各种注解，使用时不需要额外生成代码和XML 配置文件，可以实现丰富的功能，极大减少了代码的编写量。

（3）部署运行简单。 内置Tomcat、Jetty 等Web 容器，能够直接通过jar 包或者war 包的方式快速部署和运行，无需使用外部的服务器应用。

（4）监控状态。 Spring Boot 提供了一些生产环境运行状况的特性，如指标、监控检查和外部化配置，便于运维人员监控项目运行状况。

1.3 RESTFul 架构

在Web 项目中，前后端需要定义统一的接口进行通信。 REST 是2000 年提出的一种软件架构规则［10］，而RESTful 架构就是符合REST 原则的一种分布式架构规范，它约定了web 软件系统需要使用标准的HTTP 方法，系统后端通过控制层定义每一个资源的唯一标识，作为具体网络的信息［11］，前端通过使用URI 对资源进行管理和访问。

RESTful 架构是遵循统一REST 风格接口原则的Web 服务，使用标准的HTTP 方法如GET，PUT、POST 和DELETE 对URL 资源进行增、删、改、查的操作［12］。

在RESTful 架构中，每一个URI 代表一种资源，RESTful 的核心思想是前端发送ajax 请求给后端，后端发送json 数据到前端。 前端html 接收json 数据，实现前后端分离。

2 系统架构设计

2.1 总体架构设计

整个系统可以分为前端业务层和后端服务层。 如图1 所示。

图1 系统总体架构

前端主要负责与用户交互，获取用户的请求并向用户呈现交互的页面。 前端采用了基于Vue 的前端框架，主要采用MVVM 模式开发。

后端主要负责整个系统的逻辑处理、数据存取以及和前端及数据库进行交互，后端采用Spring Boot 框架开发。

数据库主要负责对系统的数据进行存储，本系统采用了MySQL 数据库。

在整个系统中，前后端之间通过RESTful 架构定义了统一的接口进行通信。

2.2 前端架构设计

系统前端采用基于Vue 的独立运行框架，采用独立运行框架可以保证前端独立于后端进行界面设计和开发，提高软件开发过程中的并行协同能力。 Vue 提供了大量的前端组件，这些组件可以帮助数据管理系统以列表、图形、图表等多种不同的形式展示数据。 前端框架如图2 所示。

图2 基于Vue 的前端独立运行架构

其中，在Views 页面视图模块中，定义了数据管理系统所需要的功能页面，主要包括基础数据展示视图页面、数据查询视图页面、数据统计分析视图页面、系统管理视图页面等，每一个视图页面都是一个独立的Vue 文件，各页面之间相互独立，互不影响。

在Modules 公共模块中，包含了Vue 所有的前端视图组件，这些组件组成的公用组件库，支撑了前端各种类型的显示方式。

在Components 基础组件模块中，包含了软件系统中需要使用的典型组件，这些组件在部署时会一起打包在软件工程包中，典型组件包括文本编辑器组件、树形结构组件、列表组件、图形编辑器组件等，组件一部分来自Vue 组件库，一部分来自外部开源组件。

Vue.js 核心应用为整个框架提供了数据和框架驱动。

路由器Vue-router 定义了前端各页面的路由方式，通过路径之间的切换、组件的切换，建立了url 和页面之间的映射关系，因此前端在更新视图时不用重新请求页面。 Vue-router 定义了三种运行模式，本系统使用了Hash 模式，通过URL hash 值实现路由地址。

Vuex 状态管理模块采用了集中式存储管理所有组件的状态，并以相应的规则能保证状态以一种可预测的方式发生变化，Vuex 状态管理模块包括数据结构、派生状态、更新状态、更改信息描述等。

2.3 后端架构设计

系统后端采用基于Spring Boot 的内置容器服务架构，架构图如图3 所示。

图3 基于Spring Boot 的内置服务容器架构

其中，持久化数据库（Repository）层负责与数据库对接，持久化层通过使用＠ Repository 注解进行类定义，通过JPA 和JDBC 的方式访问数据库，实现数据的获取。

持久化层上层是服务（Service）层，服务层使用＠Service 注解进行类定义，使用＠Autoeired注解定义注入的持久化层，服务层是整个系统的核心部分，主要用于处理系统的业务逻辑，在服务层定义了各类业务的处理过程，包括系统各类配置数据的增、删、改、查等功能。

服务层的上层是控制（Controller）层，控制层使用＠RestController 注解进行了类定义，使用＠Autowired 注解定义注入的服务层类，控制层使用＠RequestMapping 注解定义了与前端交互的所有接口，负责处理前端界面交互请求，然后将处理结果返回到前端。

实体类（Model）层贯穿整个后端服务中，使用＠Entity 注解进行了类定义，每一个实体类映射一个数据库表结构。 信息传输层使用RESTful 数据传输技术，RESTful 数据传输接口实现前后端的数据传输。

在后端框架中，内置了Tomcat 容器环境，不仅支持系统开发，也支持系统的部署和发布，部署过程中不需要额外发布成War 包部署在Tomcat 容器环境中。

在后端服务容器中，使用Redis 内存管理技术管理用户的会话Session，Redis 会保存登录用户的信息和状态，根据系统配置的时间会定期释放数据。

3 通信方式设计

3.1 基于RESTful 的数据通信设计

本系统使用RESTful 协议作为前后端通信方式。 系统后端遵循RESTful 架构接口原则，使用标准的HTTP 定义了4 种通信方法，分别是GET、POST、UT 和DELETE，具体的描述如表1所示。

HTTP 方法 作用 前端实现方式 后端实现方式GET 方法 查询数据 ＄axios.get（‘URI’） ＠RequestMapping（value＝“／create”， method ＝RequestMethod.POST）POST 方法 新增数据 ＄axios.post（‘URI’） ＠RequestMapping（value＝“／create”， method ＝RequestMethod.POST）PUT 方法 更新数据 ＄axios.put（‘URI’） ＠RequestMapping（value＝“／create”， method ＝RequestMethod.PUT）DELETE 方法 删除数据 ＄axios.delete（‘URI’） ＠RequestMapping（value＝“／create”， method ＝RequestMethod.DELETE）

3.2 基于Swagger 的Web Api 设计

在前后端分离的架构中，前端和后端需要进行交互，因此需要一个api 规范文档方便前后端进行交互。 本系统使用了Swagger 作为前后端交互的Api。

Swagger 是一套基于OpenAPI 规范构建的开源工具，能够呈现出来一份可交互式的API文档，可以直接在文档页面尝试API 的调用，在系统开发过程中，能够自动生成接口文档和客户端服务端代码，做到调用端代码、服务端代码以及接口文档的一致性，大大减少了系统的开发和维护工作量。

Swagger 部署在后端环境中，通过注解的形式定义Controller 层的接口。 Swagger 的注解形式主要包括2 种：＠ Api 和＠ ApiOperation，分别用于Controller 层的类定义和接口定义。

通过注解定义的接口说明会通过Web 的形式进行显示，在后端进行服务启动后，前端可以通过访问浏览器查看Api 接口信息，通过＠Api注解定义的类描述为一级Api 说明，通过＠Api-Operation 定义的接口方法是二级Api 说明。 在方法层的Api 说明中，显示了接口方法名、HTTP调用方法、调用参数结构、返回参数结构等信息。

4 基于Redis 的持久化登录设计

在Web 系统开发和使用中，必然会涉及到多用户同时使用的问题，因此需要对多个不同角色的用户登录进行管理。

目前，通常使用Session 进行客户端和服务器的会话管理，通过定义一个有时间限制的会话“身份ID”来保证服务器识别客户端信息。 但是原始的Session 存在系统内存中，当系统服务重启Session 就会消失，用户需要重新登录，给用户使用造成了一些麻烦。

本系统中，设计了基于Redis 的Session 管理模式。 Redis 是一个可以直接从内存中读取的Key-Value 数据结构的数据库，用来快速存取缓存数据，而且它有一套很完善的数据有效期机制。 因此，可以采用Redis 来存储Session。 用户登录的会话信息会保存在Redis 中，这样可以使登录的用户保持一定时间的登录状态。

Redis 是内存数据库，如果数据不进行持久化，一旦Redis 服务器重启数据会全部丢失。 因此，在 本 系 统 中 采 用 RDB （Redis Database Backup file，Redis 数据备份文件） 的方式对Redis 进行了持久化，即把数据存储到硬盘中，当服务器开启的时候再读入到内存中去。 这样不仅能够将用户的会话信息保存在Redis 中进行快速读取，而且能够支持会话数据信息的持久化，支持多用户集群扩展，并且用户数据安全性高，不容易丢失。 基于Redis 的持久化登录设计如图4 所示。

图4 基于Redis 的持久化登录设计

用户在前端登录系统，前端服务器将Session 传递到后端服务器，后端服务器获取Session 信息并存到Redis 中，在一定时间内用户再次访问时，后端服务器从Redis 获取Session中会话信息，用户可以直接访问系统而无需登录。

5 结束语

在天地一体化网络中，数据管理系统采用了传统B／S 架构开发，无法满足数据信息化管理的需求。 本文基于前后端分离技术对数据管理系统进行了架构设计，提供了强大的、高效的软件平台架构和实现能力，基于该设计方案能够实现软件系统的并行开发，降低系统的耦合度。 该设计方案能够在提升开发效率和部署效率的同时，可为天地一体化信息网络提供协同、高效的数据管理系统，方便后期系统的维护和扩展升级。