基于Springboot 與 vue 的兒童關愛督導系統管理后臺模塊的開發探索

彭亞飛 陳寶祥

摘 要：目前，Web發展快速， Vue作為前端三大主流框架之一，有輕量級的框架，雙向數據綁定等特點。最近幾年來，微服務框架Spring Boot也逐步火起來，Spring Boot 比較SSM 開發周期短，以及開發簡單等優點，本項目為提高開發效率，項目采用全后端分離的思想.本文基于Vue 和 Spring Boot 來實現系統的主要功能。

關鍵詞：Spring Boot ; Vue;前后端分離

1.引言

Java作為后臺開發已經具備多種開源框架，回顧Spring Boot[1]的歷史， Java EE 和 EJB 大行其道的時候，很多知名公司都是采用此技術方案進行項目開發， Rod Johnson提出了一個基于普通 Java 類和依賴注入的更簡單的解決方案， 2003年 Rod Johnson 和同伴在此框架的基礎上開發了一個全新的框架命名為 Spring。Spring當然也有缺點，到后面Spring每集成一個開源軟件，就需要增加一些配置，因此后期使用Spring開發就需要引入很多配置文件。直到了Spring Boot， Spring Boot 是由 Pivotal 團隊提供的全新框架，其設計目的是用來簡化新 Spring 應用的初始搭建以及開發過程。

當前，三大主流前端框架分別是React、Vue、Angular，本文使用的是項目Vue， Vue[2]是 MVVM 模式的框架，MVVM全稱Model-View-ViewModel[3] ，MVVM 模式和 MVC 模式一樣，主要目的也是分離視圖（View）和模型（Model）， 其核心是提供對View 和 ViewModel 的雙向數據綁定，這使得ViewModel 的狀態改變可以自動傳遞給 View，即所謂的數據雙向綁定。

2.系統架構設計

2.1 系統總體框架設計

對兒童關愛督導系統管理后臺系統進行詳細的分析 ，本系統后臺采用mvc設計理念。使用的是Spring boot 和 vue 的前后臺分離的形式開發。

兒童關愛系統管理后臺系統使用的Spring boot 開發，比較SSM框架的開發所使用的配置有所減少，尤其是在SSM 中Spring的XML配置方面。在視圖層使用了Vue 和Element UI[4]提供的樣式，在前后端之間通過 Json格式的數據進行交付，前端通過Axious請求把數據發送的后端的控制層，后端則對數據進行相關的具體操作。

2.2..系統管理分析

以下是本系統的功能模塊，通過圖1可以直接了解。

第一個模塊是對兒童的信息進行管理，里面包含了對兒童信息增刪改查，以及對查看兒童所答問題的的查看和分析。

第二個模塊是對家長的信息進行管理，里面包含了對家長信息增刪改查，以及對查看家長所答問題的的查看和分析。

第三個模塊是對問卷進行管理，里面包含了對問卷的所屬活動的查看和問卷的查看與刪除。

第四個模塊是對問卷的生成，可以根據自己的要求，動態的生成問卷，并創建活動。

第五個模塊是對管理員的信息進行管理，里面包含了對管理員信息增刪改查。

第六個模塊是對問卷的結果進行分析。

2.3系統性能需求

硬件方面一般使用臺式或者筆記本，具體配置可以查看表1。

在瀏覽器方面使用的是谷歌瀏覽器，火狐瀏覽器等， 不支持 IE8 及以下版本的瀏覽器。

3.系統管理模塊實現

3.1 兒童的信息進行管理

此功能模塊是里面包含了對兒童信息增刪改查，以及對查看兒童所答問題的的查看和分析。本功能模塊主要包含的類如表2 所示，實現效果見圖3。

3.2家長的信息進行管理

此功能模塊里面包含了對家長信息增刪改查，以及對查看家長所答問題的查看和分析。本功能模塊主要包含的類如表3所示，效果見圖4。

3.3問卷進行管理

里面包含了對問卷的所屬活動的查看和問卷的查看與刪除。本功能模塊主要包含的類如表4所示。

3.4問卷的生成

可以根據自己的要求，動態的生成問卷，并創建活動。本功能模塊主要包含的類如表5所示。

3.5管理員的信息進行管理

里面包含了對管理員信息增刪改查。本功能模塊主要包含的類如表6所示， 效果見圖8。

3.6問卷的結果進行分析

本功能模塊主要包含的類如表7所示，效果見圖9，圖10，圖11。

4總結：

本文研究的是兒童關愛督導系統，使用了Vue ，Spring Boot 技術實現開發，更加有利于項目的穩定性，同時減少了開始的周期且簡化了編程。同時前后臺分離的形式，更容易把控問題的發生的位置，更加有利于開發Web項目的開發。

參考文獻：

[1] 王福強.Spring Boot 揭秘：快速構建微服務體系[M].北京：機械工業出版社，2016.

[2] 陳陸揚.Vue.js 前端開發 快速入門與專業應用[M].北京：人民郵電出版社，2017.

[3] 何軍，陳倩怡.Vue + Spring Boot + Mybatis 開發消費管理系統[J].電腦編程技巧與維護，2019（2）：31-36.

[4] 楊妍.基于 Spring Boot 與 Vue 的系統管理模塊開發探究[J].電聲技術，2019，43（2）：32-34.

（重慶第二師范學院 ?重慶 ?400000）