基于Vue和Spring Boot的校园记录管理Web App的设计与实现

肖文娟 王加胜

(云南师范大学信息学院 云南 昆明 650500) (西部资源环境地理信息技术教育部工程研究中心 云南 昆明 650500)

0 引 言

便捷的移动设备加速了移动应用的普及。就其应用类型而言，可分为原生应用(Native App)、混合应用(Hybrid App)以及Web应用(Web App)[1-2]。Native App由于是基于本地系统(Android、iOS)开发而具有良好的交互性能和用户体验，但是也因此使得开发成本高、更新缓慢并且无法跨平台。与Native App相比，Web App则能够弥补其缺陷，但却体验不佳。而后出现的Hybrid App，结合了两者的优点，但由于技术的不成熟，仍然处于完善的阶段。HTML5技术的发展，使得用户体验得到提升，并加速了Web App的发展步伐。Web App成为了构建Web应用的最佳选择。

目前Web App的使用还不是很广泛,只有少数的Web App应用研究。大多数研究是针对前端的设计与实现[1,3-4]，缺乏整合后端设计与实现的应用研究。这些研究注重于个性化设计、性能和开发效率上的提升。一般通过数据的压缩处理等方式提升性能，借助快速构建应用程序的工具提升开发效率。当前开发技术越来越成熟，Web App的发展空间很大，但针对系统化的记录管理功能仍然缺乏相关的移动应用研究。因此，本文基于Vue和Spring Boot框架，设计和实现了校园记录管理Web App，以满足学生用户主体系统化管理校园生活记录的需要。

1 项目概述

1.1 项目环境

为了便于项目的二次开发，该Web App使用的是前后端分离的开发方式。针对前后端两种不同的开发环境，前端使用WebStorm，后端使用IDEA (IntelliJ IDEA)开发。开发完成后，为了测试系统在移动端的可用性与兼容性，分别对Android和iOS两种不同的系统进行测试。项目环境见表1。

表1 项目环境

1.2 开发工具及技术说明

(1) Java语言。Java以其强大实用性和兼容性在众多开发语言中独树一帜，并被广泛应用于Web后端开发中。

(2) MySQL。MySQL是一种关系型数据库。其成本低，支持快速开发，具有良好的跨平台性能。因此，成为中小型系统开发的首选。

(3) WebStorm。WebStorm前端开发工具由于其强大的JavaScript(JS)功能，被广泛应用于前端的开发工作中。

(4) IDEA。IDEA开发工具同Eclipse一样，主要用于Java开发的集成环境中，其具有强大的代码审查和重构[5]的能力，是进行后端开发的首要选择。

(5) HTML5。HTML5网页技术用于构建前端界面，其增加的很多新的特性，包括本地存储、本地文件操作以及用于构建页面结构的新元素，成为了Web App应用完善交互性能和体验的基础。

(6) ES6。ES6 (ECMAScript 6)是一种新的Java Script语言标准，为适应更复杂的应用，其新增了许多语法特性，并简化实现。

(7) Spring Boot后端框架。Spring Boot中内嵌的Tomcat服务器，直接将项目打成jar包，从而简化项目的部署工作[6]。在项目资源管理方面，通过配置Maven工具来管理大量的项目资源，可以解决项目资源管理难的问题。另外，在配置方式上，实现了自动化配置，提高了开发效率。

(8) Vue。Vue是当下流行的一个前端开发框架[7]，其提供了丰富的组件库，支持独立开发，解决当前应用开发组件不丰富的问题。此外，通过Vue，将更便于前端调用第三方工具(如Web API)。

(9) Nginx。Nginx是一个既可以提供Web服务(HTTP)，又可以提供反向代理服务的高性能服务器[8]，其强大负载能力，使其更具特点。例如，当浏览器中出现无法浏览到上传图片的情况时，Nginx就作为一个反向代理服务器，保持性能最优。

(10) FTP服务器。搭建在本地的FTP服务器，一方面用来存储传输的文件，另一方面能够便于用户访问。FTP的文件传送速度非常快，非常适合于Web应用中大文件的传送。

2 需求分析

2.1 功能性需求

根据用户类型，将 App的功能需求分为两部分：学生用户功能需求和管理员用户功能需求。

该 App中的学生普通用户功能需求主要包含如下内容：

(1) 查看校园动态。对于已注册的用户(不管是否处于登录状态)，都可以在该Web App首页中查看校园动态(包括校园风光和校园活动)，从而帮助学生第一时间了解校园动态信息。

(2) 课程管理。学习作为学生的主要内容，课程学习记录的管理很重要，特别是作业的管理。该Web App能够为学生用户提供课程基本信息的管理功能：录入、更改、删除和查询。每门课程可以管理多门作业。

(3) 健康管理。健康管理主要是通过逐月统计用户的生病情况的方式，帮助学生及时发现生病的规律，了解自身状况。具有提供添加、查看、修改、删除和统计健康记录的功能。

(4) 活动管理。活动管理包括学生参与的校园活动记录和其他活动的增删改查基本操作。

(5) 相册管理。该部分功能包括相片的上传、删除、查询和下载。

(6) 查询校园通讯录。该功能帮助学生查询校园通讯录和拨号。校园通讯录为校园学院、公共部门的通信信息。针对大多数的学生用户而言，其使用并不频繁，不会将其存储，但却是很必要。

该 Web App中的管理员用户功能主要包含如下内容：

(1) 用户管理功能。包括学生用户信息查询、重置学生用户密码和删除学生用户。

(2) 校园新闻管理功能。服务于管理员进行校园新闻信息的增删改查和发布。

(3) 校园通讯录管理功能。包括增加、删除、修改和查询校园通讯录信息。

2.2 非功能性需求

(1) 可靠性。充分考虑到Web App应用运行的诸多异常问题(如数据异常等)，并进行处理。

(2) 易用性。在考虑用户使用习惯的基础上，保持界面简洁而美观、添加人性化提示，保持系统的易用性。

(3) 性能。在服务器负载、内容缓存、数据压缩等方面考虑优化性能，使得校园记录管理Web App能对用户的操作提供快速的响应。

3 总体设计

3.1 模块设计

根据第2节的功能性需求分析，得到系统模块设计如图1所示。

图1 系统模块设计

活动管理模块是App中主要的模块，活动占据学生生活很大一部分。然而，比起学习，学生更容易忘记活动的事项，尤其是在填写简历的时候，活动管理显得尤为重要。有两种方式添加活动记录。第一种是学生处于登录状态时，在选择查看校园活动之后，可将其添加为活动记录，即能生成校园活动记录信息。第二种是进入到学生用户管理首页，在“我的活动”入口中手动添加活动记录信息。图2显示的是进入学生用户管理首页后进行活动管理的流程。Web App中其他管理模块流程与其类似。

图2 活动管理模块流程图

3.2 数据库设计

为了能够减少数据不必要的冗余，节省存储空间，保持数据库的轻便，从而便于数据的维护和更新，研究基于第三范式进行数据库设计。

根据图1所示的系统模块设计，在数据库中总共建立了8张表，各个表的详细信息见表2。将sys_user表(用户表，包括所有用户，即学生用户和管理员用户)作为主表与user_extend表、album表、healthy表、phone_book表、active_move表和course表建立联系，如图3所示。数据库以InnoDB为存储引擎(以ID为索引)，所有表都以user_id(用户编号)作为关联节点，通过其对数据进行操作。

表2 数据库表信息

续表2

图3 系统E-R图

3.3 接口设计

接口是分离的前后端通信的基础，Web App后端需要设计接口，为前端的页面提供数据。研究使用Restful(Representational State Transfer)风格设计接口，其优点是结构清晰、一目了然。接口开发使用HTTP 协议，遵循可寻址性原则。将健康状况类对应的接口信息表作为接口设计的示例，如表3所示，其中接口服务配置端口为8080。可以看出，最终生成的接口地址中前三节URL的映射是相同的，即“http://localhost:8080/healthy/”，这样统一的接口设计规范，便于应用的管理和实现。

表3 接口设计(健康状况)

4 前端实现与优化

4.1 MVVM模式

本文使用了Vue框架设计前端，页面采用响应式布局[9]来适应不同大小的移动设备。使用的开发模式是基于MVC (Model-View-Controller)衍生而来的MVVM (Model-View-ViewModel)，其架构图如图4所示。该模式与MVC模式相比，不再局限于数据单向绑定，而是能够实现数据双向绑定、同步刷新。由图4可知，View层和Model层是通过ViewModel层建立联系的。用户在View层的操作，通过数据绑定传达给ViewModel层，进而更新Model层[10]。Model层更新之后，ViewModel层也自动随之变化，对View层重新渲染更新。

图4 MVVM模式

(1) 数据层。Model层通过接口的方式从后端接收数据，该层中最重要的是接口请求，本文使用的是axios。axios 作为一个封装了的ajax (Asynchronous Javascript And XML)，其优点是能够将异步请求同步化，从而简化了请求机制，并且数据持久化，用户体验良好。

(2) 视图数据层。ViewModel层是模式中最为重要的一部分，也是Model层与View层重要的联系。在Vue中通过双向绑定(即v-model指令)，可实现数据与视图的实时更新。

(3) 视图层。View层Vue中最关注的地方，内置的Vue模板语言实现了内容和样式的分离，便于展现和修改。而组件化系统是Vue框架中最特色的内容，各个页面即为一个组件，父组件和子组件通过接口的方式建立通信。图5为学生用户模块中父组件向子组件传送数据的示例，箭头代表通信方向。

图5 学生用户模块中父组件向子组件传送数据

在Vue中，各个组件通过路由(即Vue Router)来实现定向。对于需要通信的组件，都需要注册路由，进而在页面挂载。针对组件加载过程中耗时的问题，本文通过在View层中使用按需加载的方式加载组件，进而优化加载，提升资源的显示速度。以editorHealthy组件为例，其按需加载组件的实现代码如下：

const editorHealthy = r => require.ensure([], () => r(require(′../page/me/editorHealthy.page.vue′)),′editorHealthy′)

export default new Router({

routes: [

{

path:′/editorHealthy/:userId/:id/:value/:type/:result/:time/′,

name: ′editorHealthy′,

component: editorHealthy

}

]

})

代码中按需加载使用的函数为“require.ensure”，“path”为组件的路径(在此使用的是二级路径)，“name”为组件名，“component”即为该组件。

4.2 关键技术

(1) 分页。对于某些页面，例如“校园动态浏览”模块，其接收的数据量是很庞大的。如果全部查询，不仅超出页面的范围，还会影响用户的体验。因此，本文通过使用分页技术来限制查询，加快响应。在Vue中使用的组件是loadmore，组件上需要绑定loadTop和loadBottom方法实现上下页面的切换。其实现的代码如下：

loadTop () {

this.allLoaded = false

if (this. num > 1) {

this. num --

}

this.getData()

this.＄refs.loadmore.onTopLoaded()

},

loadBottom () {

if (this. num < this. total) {

this. num ++

} else if (this. num >= this. total) {

this.allLoaded = true

}

this.getData()

this.＄refs.loadmore.onBottomLoaded()

}

(2) 本地存储。在HTML5中，存在着的两种存储数据的方式：会话存储(sessionStorage)和本地存储(localStorage)。两者的不同之处在于，sessionStorage在窗口关闭之后，数据立即会被清除；而localStorage则不然，其数据保存时间比sessionStorage更长，而后更快加载页面。因此，在改善用户体验方面，localStorage更适合。

(3) 数据压缩。在很多功能模块中，尤其是作业管理模块和相册管理模块，有时候获取到的图片数据是比较大的。为了减小数据传输的压力，本文通过HttpClient调用第三方Web API实现数据压缩处理。

5 后端实现与优化

5.1 三层架构设计

后端基于Spring Boot开发，使用三层架构，即数据访问层(Dao)、业务逻辑层(Service)、控制层(Controller)。

(1) 数据访问。Dao层是最底层的设计，用来操作数据库，本文使用MyBatis持久化框架来实现接口开发。与Hibernate相比，MyBatis操作数据库更简单和灵活，其魅力在于映射器(Mapper)中的XML文件。Dao层设计步骤为：① 在MySql数据库中生成数据库表；② 通过XML文件实现数据库的映射和操作。

(2) 业务逻辑层。Service层为中间层，在Dao层和Controller层之间进行逻辑处理工作。考虑到程序的耦合度问题，为了降低各个模块的关联，每个接口都封装有各自的业务处理方法。

(3) 控制层。Controller层是第三层，通过调用Service层，与前端页面交互。

5.2 关键技术

(1) 跨域访问。跨域访问是实现前端与后端交互的基础工作。跨域资源(CORS)通过允许所有来源、标头列表、请求方法来实现灵活的跨域请求。其代码实现如图6所示。

图6 跨域访问

(2) 加密。对于一个可靠的系统，用户信息的安全性是首要考虑的问题。而重中之重的就是用户账户的安全问题，尤其是密码。目前密码加密的主流方法是MD5、base64、Sha256。本文使用MD5 (Message-Digest Algorithm)信息-摘要算法，获得密文之后，将密文转换成十六进制的字符串形式。与base64相比，安全性更高；与Sha256相比，耗时短。

(3) 文件上传。在很多功能模块中(活动管理模块、相册管理模块、作业管理模块等)，都需要通过FTP实现文件上传功能。其步骤为：① 与FTP建立连接，如图7所示；② 配置文件名、文件路径；③ 读取文件并上传到FTP服务器；④ 返回路径+文件名存放到数据库。

图7 连接FTP配置

6 系统实现

项目开发完成之后，该Web App应用在Chrome浏览器和移动平台(Android 4.4.4版本、Android 5.5.5版本、iPhone 5s和iPhone 6s)经过测试并无异常，页面显示以及与用户交互方面，与需求一致。学生用户主要功能模块如图8所示，管理员功能模块如图9所示。

(a) 查询校园动态 (b) 课程管理

(c) 活动管理 (d) 相册管理图8 学生用户模块

(a) 管理员用户首页 (b) 用户管理

(c) 通讯录管理 (d) 校园新闻管理图9 管理员用户模块

7 结 语

本文论述了基于Vue和Spring Boot两种框架下的

校园记录管理Web App的设计与实现，主要介绍了项目需求分析、数据库设计、接口设计和技术实现等内容。通过使用负载平衡器、缓存技术、数据压缩和改进页面渲染等方式提升性能。

通过实践验证了Spring Boot和Vue这两种框架的优势。此外，经过不同平台的测试，也验证了Web App的跨平台的重要性质。本文设计的Web App虽然达到了预期目标，但在安全性和活动记录添加方面有待提升。下一步拟使用Shiro[11]安全机制认证用户权限提高安全性，结合第三方应用实现自动添加活动记录。