基于SpringBoot和Vue的多功能时间管理系统的设计与实现

朱启方 黄彩霞 范旭 万坦 任淑晖 牛佳坤

摘要：随着社会的高速发展和人们生活节奏的加快，人们面临的碎片化时间在不断增加。针对人们如何进行时间管理、提高时间的利用效率以及提升专注力等问题，该文以科学的时间管理理论为依据实现了一个采用前后端分离架构的基于Spring Boot和Vue的多功能时间管理系统，用户可以通过使用该系统的云自习室、待办事项、四象限时间管理、番茄时钟、专注力训练、随心笔记等核心功能来树立时间管理意识，规划日常事务，提高做事效率。

关键词：时间管理;机器学习;Sklearn;前后端分离;Spring Boot;Vue

中图分类号：TP311.5      文献标识码：A

文章编号：1009-3044（2022）18-0031-02

开放科学（资源服务）标识码（OSID）：

时间就是生命的说法毫不夸张，时间管理的重要性也是不言而喻的[1]。随着互联网时代的到来，人们的生活方式变得多样性和快节奏性，所面对的时间逐渐碎片化，可以利用的大块时间越来越少。在当今激烈的竞争环境和多任务的压力下，时间已经成为人们竞争的焦点，有良好的时间管理能力更是高效能人士的必备技能之一。如今，大多数人缺乏时间观念、没有树立良好的时间管理意识，对自己的生活缺乏合理的规划，不知不觉之间浪费了大量的时间，导致本应该完成的任务没有完成或者是最后匆匆完工，从而产生焦虑情绪。如果长此以往，形成做事拖延的习惯，对待平时生活学习中的任务时难免会形成消极懈怠的态度从而在完成任务时草草了事，不能发挥出真正的水平，或者是时间利用效率过低，导致投入大量的时间却没有达到预期的效果。

基于以上分析，本文采用前后端分离架构，以SpringBoot和Vue构建出一个多功能时间管理系统。該系统可以在帮助用户掌握相关时间管理方法的同时为用户提供专注力训练功能，并将训练数据通过数据可视化的形式呈现给用户。用户通过使用该系统能够自主、科学地进行时间管理，并高效地执行相关计划，从而提升自身的竞争力。

1 系统介绍

该系统以解决当前人们日常生活中时间管理、规划、专注力等方面痛点为核心，确定系统的功能模块分为基本功能模块和核心功能模块。系统功能模块划分如图1所示。

1）基本功能模块：为用户访问系统提供服务，用户可以在该系统中实现注册、登录、修改密码、上传头像、设置相关选项、查看训练数据等功能。

2）核心功能模块：包含云自习室、待办事项、四象限时间管理、专注力训练、番茄时钟、倒数日、随心笔记等功能，用户可以根据自己的需求选择相应功能。

2 系统总体设计

该系统采用了前后端分离的设计理念，前端部分使用Vue及其周边技术栈快速构建单页面复应用，后端主要围绕SpringBoot框架构建，整合Spring、Spring MVC、Mybatis-Plus实现系统核心业务逻辑。部分逻辑的实现需要借助机器学习相关知识，主要通过Python中的Sklearn库训练模型，将训练好的功能模型借助Python Web框架FastAPI将其封装为接口供前端模块调用。前端通过axios向后端发送请求，后端接收相关请求经过处理后返回数据，从而实现前后端交互。

2.1 开发环境概述

开发工具：IntelliJ IDEA 2019.3.3、PyCharm Community Edition 2021.1.1，平台操作系统：Windows 10，数据库服务器：Mysql-5.6.26，Web运行服务器：Tomcat 9、uvicorn-0.17.4，JDK版本：1.8及以上，Python版本：3.7。

2.2 主要开发框架及相关库介绍

Vue框架：Vue是一套构建用户界面的渐进式框架，关注视图层，采用MVVM的开发模式将页面视图数据和DOM元素进行双向绑定[2]，并为前端调用第三方工具提供便捷。

SpringBoot框架：SpringBoot是由Pivotal团队提供的全新框架，它继承了Spring框架原有的优秀特性，用来简化新Spring应用的初始搭建和开发过程，并且使项目的配置过程、部署过程和监控过程变得简洁高效[3]。

MyBatis-Plus框架：在MyBatis框架的基础上进行增强，它简化了开发过程，提高了数据操作效率，具有无侵入、依赖少、支持代码生成等优点。后端集成了Lombok注解、Log4J日志、Druid数据库连接池等工具，使开发过程更加简洁高效[4]。

FastAPI框架：是一个快速构建API的高性能web框架。

Sklearn库：Sklearn是基于Python语言的机器学习库，广泛应用于机器学习、数据挖掘领域，可以高效地进行数据分析。库中包含了分类、回归、聚类、关联规则、降维等大量有关数据挖掘和机器学习的算法。同时库中也含有丰富的测试、调试工具，并且包含模型选择和模型评估等模块，可以更加方便地对相关参数进行调整，优化模型[5]。

Echarts库：是一个纯JavaScript图表库，其底层依赖H5技术中的Canvas类库，提供直观、生动、可个性化定制的数据可视化图表，并且兼容当前大部分的主流浏览器[6]。

3 系统实现

3.1 基本功能模块

1）登录注册模块：用户进入首页前需要先进行登录，如果没有注册账号需要先进行注册，注册成功后相关数据会保存在数据库中，用户登录时会进行验证，验证成功后会跳转至系统主界面，如图2所示，用户可以根据自身需求选择主界面相应的功能模块。

2）个人中心模块：该模块的使用需要用户先进行登录，登录后在主界面点击用户头像进入个人中心模块，该模块分为两部分如图3所示，第一部分位于页面左侧，内容包括用户头像、昵称和功能按钮。第二部分位于页面右侧，内容可以根据左侧选择的功能按钮显示对应内容，如图3当前显示的是专注力训练功能模块所产生的数据，通过可视化的形式呈现给用户。用户可以通过点击设置和个人资料功能按钮进行修改密码、修改绑定的手机号、第三方登录绑定、修改个人资料等。

3.2 核心功能模块

1）云自习室模块：该模块内容包括创建自习室按钮、搜索框、当前所有可加入自习室的信息等，自习室信息显示自习室昵称、限制人数、当前人数等信息，用户可以通过云自习室模块选择自习室并进行线上自习，也可以创建线上自习室。用户在进入自习室前需要设置自习时间，进入自习室后会显示自习室当前人数和自习时间的倒计时，模拟真实的自习室环境。

2）待办事项模块：该模块分为左右两部分，左侧部分内容为日历，右侧部分上方包含短期清单、长期清单、未完成清单、添加清单功能按钮，右侧部分中心显示用户点击功能按钮对应的内容。用户可以参考日历添加任务清单，任务清单分为长期清单和短期清单，用户可以查看未完成清单，在完成清单中的任务后可以删除对应的任务。

3）四象限时间管理模块：该模块列出用户每个象限中的任务和计划，对应有增加和删除按钮，用户可以在四象限时间管理模块根据相应提示对未来的计划、任务进行分类。

4）专注力训练模块：该模块受舒尔特方格训练专注力的启发，在其原有的基础上进行改进。改进内容主要为用户训练前可以根据提示选择对应训练阶数和预期错误个数，系统根据用户选择的信息通过机器学习模型对用户的训练时间进行预测。该模块训练界面如图4所示，由四部分组成，模块最左侧部分为本次训练选择的阶数，中间部分为训练内容，最上侧和最右侧部分分别显示本次训练的相关数据，数据为当前游戏时间、预测时间、当前错误个数等。用户可以在该模块进行专注力训练，训练数据在个人中心界面通过数据可视化的形式呈现给用户。

5）番茄时钟模块：该模块包括任务部分和倒计时部分。用户可以在该模块选择任务设置专注时间并开始计时。

6）倒数日模块：该模块包括设置倒数日部分和显示倒数日部分，用户可以在该模块将重要日子记录下来，系统会自动计算出当天距离这些重要日子的倒数日。

7）随心笔记模块：该模块包括日期部分和内容部分，用户可以在该模块记录自己想记录的内容并且可以根据日期查看之前记录的内容。

4 结论

社会的高速发展和生活节奏的加快，使人们对时间管理和时间的利用效率等问题的重视程度越来越高，人们不仅需要时间管理的手段，更需要在有良好时间管理意识的基础上提高工作、学习效率。该系统在具备相关时间管理的功能同时，以专注力训练为出发点，改进后的舒尔特方格为基本训练形式，结合机器学习相关知识，实现了专注力训练功能模块，通过该模块可以有效地训练专注力。该系统集时间管理、规划、专注力训练功能于一体，帮助用户培养良好的时间管理意识，掌握时间管理手段，提升专注力，从而让自己的生活更加充实美好。

参考文献：

[1] 张盟.大学生时间管理系统的设计与实现[D].天津：天津师范大学，2014.

[2] 王小宁，王儒敬，桂元苗，等.省级农作物病虫数据上报系统的设计与实现[J].安徽农业大学学报，2019，46（5）：876-882.

[3] 王丹，孙晓宇，杨路斌，等.基于SpringBoot的软件统计分析系统设计与实现[J].软件工程，2019，22（3）：40-42.

[4] 颜治平.基于SpringBoot和Vue框架的教代会提案系统的设计与实现[J].科技创新与应用，2020（3）：91-93，95.

[5] 陈镭，张凡龙.Python数据挖掘在高校人才引进中的应用[J].中国教育信息化，2019（15）：52-54.

[6] 王建，劉晓凤，任安晶，等.基于eCharts和iClient的二维土壤重金属动态污染模拟绘制技术研究[J].企业科技与发展，2020（8）：56-57.

【通联编辑：梁书】