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

【通聯編輯：梁書】