基于Spring Boot+Vue的场地预约管理系统的设计

杜瑛，刘冬杰

（1.华南师范大学软件学院，广东广州 510631；2.广东东软学院计算机学院软件工程系，广东佛山 528225）

1 系统开发的意义及策略

随着“互联网+”与数字化校园的建设发展，高校管理信息系统迎来了全面深度的开发与建设，与此同时，各种大学社团如雨后春笋般迅速成长，大学社团的各种活动都需要借用场地来完成，频繁的场地借用、场地借还、场地时限、场地开关门等都需要统一的管理。本文对之进行分析、研究，并依据这些需求设计开发出了“基于Spring Boot+Vue的场地预约管理系统”,系统围绕开发框架设计、系统功能设计等进行研究，利用MyBatis框架实现系统与数据库SQL的交互，最终完成了场地预约管理系统的全部功能。

2 系统开发采用的关键技术和理论研究

2.1 SSM框架

SSM是Spring、SpringMVC和MyBatis整合而成的，是JavaWeb应用框架中比较受欢迎的一种框架。其中的Spring包括两个主要的内核，首先是IOC，也称为控制反转，它的功能类似于一个工厂；另一个是AOP，也就是面向切面控制，它可以将不同的代码块分开，减少耦合，提高开发的效率，所以Spring最大的优势在于它能有效地减少程序的耦合[1]。经过十多年的发展，Spring已经不再是一个单纯的应用框架，而是逐渐发展成为由多个不同子模块组成的成熟技术，如Spring Boot、Spring MVC、Spring Cloud、Spring Data、Spring Framework、Spring Security等，其中Spring Boot是Spring框架的扩展，它将烦琐的配置功能进行了内部整合，使项目的配置更加简化。

2.2 Spring Boot框架

以往的MIS开发人员经常会使用SSM架构，其开发的具体步骤如下：1）创建一个maven项目，然后修改pom.xml文件来添加所有的依赖；2）整合MyBatis，通过xml方式配置连接数据库、连接池和SqlSessionFactory；3）整合Spring，开启扫描包，可以在类上通过@Service的注解来声明该类属于Service层，并且由Spring托管，通过@Autowired自动注入dao层的对象，以供Service层使用；4）整合SpringMVC，开启支持MVC的注解驱动，配置视图解析器，并且在web.xml上配置DispatcherServlet和乱码过滤等，以上配置都做完，才可以开始正式开发JavaWeb项目。当使用SSM架构开发新的JavaWeb项目时，需要多次重复以上的配置，为了杜绝SSM架构的“配置地狱”缺点，能够自动化完成绝大部分配置的Spring Boot框架便诞生了[2]。Spring Boot框架是基于Spring开源框架的二次开发，Spring Boot旨在简化开发过程中的繁琐配置，Spring Boot提供了各种默认配置来简化项目，简化配置的依赖过程，Spring Boot可以通过不同的配置类进行配置，使用注解等使项目变得更加直观而且易于理解，使用Spring Boot只需要在导入相关依赖的基础上，通过相关注解即可完成，增加了开发的灵活度，简化了初始搭建以及开发过程，因此Spring Boot在快速应用开发领域占据着主导地位[3]。

2.3 Vue框架

Vue是一套用于构建用户界面的渐进式框架，与其他大型框架不同的是，Vue采用自底向上增量开发方式，架构更加简单、灵活和开放，适合开发人员快速掌握并投入使用。另外，Vue.js是一套用于构建用户界面的轻量级渐进式框架，Vue.js着眼于MVVM前端的View和Model部分，可以在单页上嵌入已有的页面，也可以配合其他库一起使用[4]。Element-ui是基于Vue2.0的组件库，提供了配套的设计资源，在遵循用户习惯语言和概念上，其设计与现实的流程与逻辑，元素与结构均保持一致，可以帮助网站快速成型。

2.4 MyBatis框架

MyBatis是Apache的一个开源项目，提供给开发者一个持久层框架，它支持自定义SQL、存储过程以及高级映射，它将原生的JDBC中的SQL语句分开，通过配置文件的方式处理数据库中的数据，其他的部分都是MyBatis自动执行，开发者只要把注意力集中在如何实现SQL语句上，就能很好地解决对数据库的操作问题，这也是MyBatis能流行的原因之一[5]。

2.5 MySQL数据库

MySQL是一个关系型数据库管理系统，无论是它的存储方式还是安全处理都十分优秀，MySQL还支持开发者优化，使用Explain指令可以查看SQL语句的运行状态，是否使用，使用了哪些索引，方便开发者进行调整。MySQL具有最小粒度、最多列、功能齐全、查询速度快等优点，尤其是其开源代码，得到很多中小型网站的青睐。

3 系统开发框架设计

依照场地预约管理系统的需求，对系统的各个功能模块进行设计，其中包括前端系统、后端系统、数据库三大部分的设计。本系统的前端选择使用Vue.js和Element-ui进行构建，后端业务模块使用SpringBoot进行搭建，使用MyBatisPlus持久层框架对数据库进行交互，如图1所示，系统前端架构的设计。

图1 系统前端架构设计

在数据存储上，使用了MySQL持久化存储、Redis缓存以及Minio对象存储服务器，基于软件的功能需求，数据库的设计围绕借用历史这一对象进行展开，每一个借用历史都有对应借用者、审核者和借用的场地等，系统后端MySQL数据库关系模型设计如图2所示，MySQL关系模型设计。

图2 MySQL关系模型设计

4 系统功能设计

4.1 系统功能设计

本系统包含的功能有：1）场地借用申请；2）用户与场地管理；3）借用申请审核；4）钥匙借出与归还；5）管理员的管理；6）数据查看。系统后端采用分层开发，按照程序响应请求的顺序分为控制层（Controller）、业务逻辑层（Service）和数据访问层（Mapper），其具体的功能有：1）用户注册；2）登录与退出；3）借用场地申请；4）管理场地列表；5）管理钥匙借还；6）普通管理员初次审核；7）主页数据请求等。如图3所示，系统功能设计示意图。

图3 系统功能设计示意图

4.2 系统开发与实现

首先是数据库表格的建立，根据数据库的关系模型,结合具体功能的分析,各个数据库表的属性构成，分别建立了如下数据库表格，1）用户表user，2）管理员表admin，3）场地信息表site，4）借用历史表history等，其中场地信息表site如表1所示。

表1 场地信息表site

场地预约管理主要代码：

系统开发的主界面分为三个部分，普通用户、普通管理员和超级管理员，主界面的多数功能以表格的形式呈现，可依据不同的权限查阅不同的表格。主界面效果图如图4所示。

图4 主界面效果图

5 结束语

本系统主要对Spring Boot和Vue及MyBatis框架进行研究，并设计出了场地预约管理系统。该系统分为前端与后端两个分离的子系统，让前端的开发更注重界面的呈现与用户的体验，后端的开发更注重数据存储与处理。随着高校场地预约管理系统的使用，极大地方便了管理员对场地预约的高效、全面管理，此系统具有一定的推广应用价值。