基于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）