基于前后端分離技術的天地一體化數據管理系統設計

李曉琳 高獻偉 韓妍妍

北京電子科技學院，北京市 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 架構開發，無法滿足數據信息化管理的需求。 本文基于前后端分離技術對數據管理系統進行了架構設計，提供了強大的、高效的軟件平臺架構和實現能力，基于該設計方案能夠實現軟件系統的并行開發，降低系統的耦合度。 該設計方案能夠在提升開發效率和部署效率的同時，可為天地一體化信息網絡提供協同、高效的數據管理系統，方便后期系統的維護和擴展升級。