彭亞飛 陳寶祥

摘 要：目前，Web發(fā)展快速， Vue作為前端三大主流框架之一，有輕量級(jí)的框架，雙向數(shù)據(jù)綁定等特點(diǎn)。最近幾年來(lái)，微服務(wù)框架Spring Boot也逐步火起來(lái)，Spring Boot 比較SSM 開發(fā)周期短，以及開發(fā)簡(jiǎn)單等優(yōu)點(diǎn)，本項(xiàng)目為提高開發(fā)效率，項(xiàng)目采用全后端分離的思想.本文基于Vue 和 Spring Boot 來(lái)實(shí)現(xiàn)系統(tǒng)的主要功能。

關(guān)鍵詞：Spring Boot ; Vue;前后端分離

1.引言

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

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

2.系統(tǒng)架構(gòu)設(shè)計(jì)

2.1 系統(tǒng)總體框架設(shè)計(jì)

對(duì)兒童關(guān)愛督導(dǎo)系統(tǒng)管理后臺(tái)系統(tǒng)進(jìn)行詳細(xì)的分析 ，本系統(tǒng)后臺(tái)采用mvc設(shè)計(jì)理念。使用的是Spring boot 和 vue 的前后臺(tái)分離的形式開發(fā)。

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

2.2..系統(tǒng)管理分析

以下是本系統(tǒng)的功能模塊，通過(guò)圖1可以直接了解。

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

第二個(gè)模塊是對(duì)家長(zhǎng)的信息進(jìn)行管理，里面包含了對(duì)家長(zhǎng)信息增刪改查，以及對(duì)查看家長(zhǎng)所答問(wèn)題的的查看和分析。

第三個(gè)模塊是對(duì)問(wèn)卷進(jìn)行管理，里面包含了對(duì)問(wèn)卷的所屬活動(dòng)的查看和問(wèn)卷的查看與刪除。

第四個(gè)模塊是對(duì)問(wèn)卷的生成，可以根據(jù)自己的要求，動(dòng)態(tài)的生成問(wèn)卷，并創(chuàng)建活動(dòng)。

第五個(gè)模塊是對(duì)管理員的信息進(jìn)行管理，里面包含了對(duì)管理員信息增刪改查。

第六個(gè)模塊是對(duì)問(wèn)卷的結(jié)果進(jìn)行分析。

2.3系統(tǒng)性能需求

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

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

3.系統(tǒng)管理模塊實(shí)現(xiàn)

3.1 兒童的信息進(jìn)行管理

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

3.2家長(zhǎng)的信息進(jìn)行管理

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

3.3問(wèn)卷進(jìn)行管理

里面包含了對(duì)問(wèn)卷的所屬活動(dòng)的查看和問(wèn)卷的查看與刪除。本功能模塊主要包含的類如表4所示。

3.4問(wèn)卷的生成

可以根據(jù)自己的要求，動(dòng)態(tài)的生成問(wèn)卷，并創(chuàng)建活動(dòng)。本功能模塊主要包含的類如表5所示。

3.5管理員的信息進(jìn)行管理

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

3.6問(wèn)卷的結(jié)果進(jìn)行分析

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

4總結(jié)：

本文研究的是兒童關(guān)愛督導(dǎo)系統(tǒng)，使用了Vue ，Spring Boot 技術(shù)實(shí)現(xiàn)開發(fā)，更加有利于項(xiàng)目的穩(wěn)定性，同時(shí)減少了開始的周期且簡(jiǎn)化了編程。同時(shí)前后臺(tái)分離的形式，更容易把控問(wèn)題的發(fā)生的位置，更加有利于開發(fā)Web項(xiàng)目的開發(fā)。

參考文獻(xiàn)：

[1] 王福強(qiáng).Spring Boot 揭秘：快速構(gòu)建微服務(wù)體系[M].北京：機(jī)械工業(yè)出版社，2016.

[2] 陳陸揚(yáng).Vue.js 前端開發(fā) 快速入門與專業(yè)應(yīng)用[M].北京：人民郵電出版社，2017.

[3] 何軍，陳倩怡.Vue + Spring Boot + Mybatis 開發(fā)消費(fèi)管理系統(tǒng)[J].電腦編程技巧與維護(hù)，2019（2）：31-36.

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

（重慶第二師范學(xué)院 ?重慶 ?400000）