基于Springboot与vue的儿童关爱督导系统管理后台模块的开发探索.docx

?

?

基于Springboot与vue的儿童关爱督导系统管理后台模块的开发探索

?

?

彭亚飞陈宝祥

摘要：目前，Web发展快速，Vue作为前端三大主流框架之一，有轻量级的框架，双向数据绑定等特点。最近几年来，微服务框架SpringBoot也逐步火起来，SpringBoot比较SSM开发周期短，以及开发简单等优点，本项目为提高开发效率，项目采用全后端分离的思想.本文基于Vue和SpringBoot来实现系统的主要功能。

关键词：SpringBoot;Vue;前后端分离

1.引言

Java作为后台开发已经具备多种开源框架，回顾SpringBoot[1]的历史，JavaEE和EJB大行其道的时候，很多知名公司都是采用此技术方案进行项目开发，RodJohnson提出了一个基于普通Java类和依赖注入的更简单的解决方案，2003年RodJohnson和同伴在此框架的基础上开发了一个全新的框架命名为Spring。Spring当然也有缺点，到后面Spring每集成一个开源软件，就需要增加一些配置，因此后期使用Spring开发就需要引入很多配置文件。直到了SpringBoot，SpringBoot是由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设计理念。使用的是Springboot和vue的前后台分离的形式开发。

儿童关爱系统管理后台系统使用的Springboot开发，比较SSM框架的开发所使用的配置有所减少，尤其是在SSM中Spring的XML配置方面。在视图层使用了Vue和ElementUI[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，SpringBoot技术实现开发，更加有利于项目的稳定性，同时减少了开始的周期且简化了编程。同时前后台分离的形式，更容易把控问题的发生的位置，更加有利于开发Web项目的开发。

参考文献：

[1]王福强.SpringBoot揭秘：快速构建微服务体系[M].北京：机械工业出版社，2016.

[2]陈陆扬.Vue.js前端开发快速入