基于SpringBoot和Vue的多功能時間管理系統(tǒng)的設(shè)計與實現(xiàn)

朱啟方 黃彩霞 范旭 萬坦 任淑暉 牛佳坤

摘要：隨著社會的高速發(fā)展和人們生活節(jié)奏的加快，人們面臨的碎片化時間在不斷增加。針對人們?nèi)绾芜M(jìn)行時間管理、提高時間的利用效率以及提升專注力等問題，該文以科學(xué)的時間管理理論為依據(jù)實現(xiàn)了一個采用前后端分離架構(gòu)的基于Spring Boot和Vue的多功能時間管理系統(tǒng)，用戶可以通過使用該系統(tǒng)的云自習(xí)室、待辦事項、四象限時間管理、番茄時鐘、專注力訓(xùn)練、隨心筆記等核心功能來樹立時間管理意識，規(guī)劃日常事務(wù)，提高做事效率。

關(guān)鍵詞：時間管理;機(jī)器學(xué)習(xí);Sklearn;前后端分離;Spring Boot;Vue

中圖分類號：TP311.5? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2022）18-0031-02

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

時間就是生命的說法毫不夸張，時間管理的重要性也是不言而喻的[1]。隨著互聯(lián)網(wǎng)時代的到來，人們的生活方式變得多樣性和快節(jié)奏性，所面對的時間逐漸碎片化，可以利用的大塊時間越來越少。在當(dāng)今激烈的競爭環(huán)境和多任務(wù)的壓力下，時間已經(jīng)成為人們競爭的焦點，有良好的時間管理能力更是高效能人士的必備技能之一。如今，大多數(shù)人缺乏時間觀念、沒有樹立良好的時間管理意識，對自己的生活缺乏合理的規(guī)劃，不知不覺之間浪費了大量的時間，導(dǎo)致本應(yīng)該完成的任務(wù)沒有完成或者是最后匆匆完工，從而產(chǎn)生焦慮情緒。如果長此以往，形成做事拖延的習(xí)慣，對待平時生活學(xué)習(xí)中的任務(wù)時難免會形成消極懈怠的態(tài)度從而在完成任務(wù)時草草了事，不能發(fā)揮出真正的水平，或者是時間利用效率過低，導(dǎo)致投入大量的時間卻沒有達(dá)到預(yù)期的效果。

基于以上分析，本文采用前后端分離架構(gòu)，以SpringBoot和Vue構(gòu)建出一個多功能時間管理系統(tǒng)。該系統(tǒng)可以在幫助用戶掌握相關(guān)時間管理方法的同時為用戶提供專注力訓(xùn)練功能，并將訓(xùn)練數(shù)據(jù)通過數(shù)據(jù)可視化的形式呈現(xiàn)給用戶。用戶通過使用該系統(tǒng)能夠自主、科學(xué)地進(jìn)行時間管理，并高效地執(zhí)行相關(guān)計劃，從而提升自身的競爭力。

1 系統(tǒng)介紹

該系統(tǒng)以解決當(dāng)前人們?nèi)粘Ｉ钪袝r間管理、規(guī)劃、專注力等方面痛點為核心，確定系統(tǒng)的功能模塊分為基本功能模塊和核心功能模塊。系統(tǒng)功能模塊劃分如圖1所示。

1）基本功能模塊：為用戶訪問系統(tǒng)提供服務(wù)，用戶可以在該系統(tǒng)中實現(xiàn)注冊、登錄、修改密碼、上傳頭像、設(shè)置相關(guān)選項、查看訓(xùn)練數(shù)據(jù)等功能。

2）核心功能模塊：包含云自習(xí)室、待辦事項、四象限時間管理、專注力訓(xùn)練、番茄時鐘、倒數(shù)日、隨心筆記等功能，用戶可以根據(jù)自己的需求選擇相應(yīng)功能。

2 系統(tǒng)總體設(shè)計

該系統(tǒng)采用了前后端分離的設(shè)計理念，前端部分使用Vue及其周邊技術(shù)?？焖贅?gòu)建單頁面復(fù)應(yīng)用，后端主要圍繞SpringBoot框架構(gòu)建，整合Spring、Spring MVC、Mybatis-Plus實現(xiàn)系統(tǒng)核心業(yè)務(wù)邏輯。部分邏輯的實現(xiàn)需要借助機(jī)器學(xué)習(xí)相關(guān)知識，主要通過Python中的Sklearn庫訓(xùn)練模型，將訓(xùn)練好的功能模型借助Python Web框架FastAPI將其封裝為接口供前端模塊調(diào)用。前端通過axios向后端發(fā)送請求，后端接收相關(guān)請求經(jīng)過處理后返回數(shù)據(jù)，從而實現(xiàn)前后端交互。

2.1 開發(fā)環(huán)境概述

開發(fā)工具：IntelliJ IDEA 2019.3.3、PyCharm Community Edition 2021.1.1，平臺操作系統(tǒng)：Windows 10，數(shù)據(jù)庫服務(wù)器：Mysql-5.6.26，Web運行服務(wù)器：Tomcat 9、uvicorn-0.17.4，JDK版本：1.8及以上，Python版本：3.7。

2.2 主要開發(fā)框架及相關(guān)庫介紹

Vue框架：Vue是一套構(gòu)建用戶界面的漸進(jìn)式框架，關(guān)注視圖層，采用MVVM的開發(fā)模式將頁面視圖數(shù)據(jù)和DOM元素進(jìn)行雙向綁定[2]，并為前端調(diào)用第三方工具提供便捷。

SpringBoot框架：SpringBoot是由Pivotal團(tuán)隊提供的全新框架，它繼承了Spring框架原有的優(yōu)秀特性，用來簡化新Spring應(yīng)用的初始搭建和開發(fā)過程，并且使項目的配置過程、部署過程和監(jiān)控過程變得簡潔高效[3]。

MyBatis-Plus框架：在MyBatis框架的基礎(chǔ)上進(jìn)行增強(qiáng)，它簡化了開發(fā)過程，提高了數(shù)據(jù)操作效率，具有無侵入、依賴少、支持代碼生成等優(yōu)點。后端集成了Lombok注解、Log4J日志、Druid數(shù)據(jù)庫連接池等工具，使開發(fā)過程更加簡潔高效[4]。

FastAPI框架：是一個快速構(gòu)建API的高性能web框架。

Sklearn庫：Sklearn是基于Python語言的機(jī)器學(xué)習(xí)庫，廣泛應(yīng)用于機(jī)器學(xué)習(xí)、數(shù)據(jù)挖掘領(lǐng)域，可以高效地進(jìn)行數(shù)據(jù)分析。庫中包含了分類、回歸、聚類、關(guān)聯(lián)規(guī)則、降維等大量有關(guān)數(shù)據(jù)挖掘和機(jī)器學(xué)習(xí)的算法。同時庫中也含有豐富的測試、調(diào)試工具，并且包含模型選擇和模型評估等模塊，可以更加方便地對相關(guān)參數(shù)進(jìn)行調(diào)整，優(yōu)化模型[5]。

Echarts庫：是一個純JavaScript圖表庫，其底層依賴H5技術(shù)中的Canvas類庫，提供直觀、生動、可個性化定制的數(shù)據(jù)可視化圖表，并且兼容當(dāng)前大部分的主流瀏覽器[6]。

3 系統(tǒng)實現(xiàn)

3.1 基本功能模塊

1）登錄注冊模塊：用戶進(jìn)入首頁前需要先進(jìn)行登錄，如果沒有注冊賬號需要先進(jìn)行注冊，注冊成功后相關(guān)數(shù)據(jù)會保存在數(shù)據(jù)庫中，用戶登錄時會進(jìn)行驗證，驗證成功后會跳轉(zhuǎn)至系統(tǒng)主界面，如圖2所示，用戶可以根據(jù)自身需求選擇主界面相應(yīng)的功能模塊。

2）個人中心模塊：該模塊的使用需要用戶先進(jìn)行登錄，登錄后在主界面點擊用戶頭像進(jìn)入個人中心模塊，該模塊分為兩部分如圖3所示，第一部分位于頁面左側(cè)，內(nèi)容包括用戶頭像、昵稱和功能按鈕。第二部分位于頁面右側(cè)，內(nèi)容可以根據(jù)左側(cè)選擇的功能按鈕顯示對應(yīng)內(nèi)容，如圖3當(dāng)前顯示的是專注力訓(xùn)練功能模塊所產(chǎn)生的數(shù)據(jù)，通過可視化的形式呈現(xiàn)給用戶。用戶可以通過點擊設(shè)置和個人資料功能按鈕進(jìn)行修改密碼、修改綁定的手機(jī)號、第三方登錄綁定、修改個人資料等。

3.2 核心功能模塊

1）云自習(xí)室模塊：該模塊內(nèi)容包括創(chuàng)建自習(xí)室按鈕、搜索框、當(dāng)前所有可加入自習(xí)室的信息等，自習(xí)室信息顯示自習(xí)室昵稱、限制人數(shù)、當(dāng)前人數(shù)等信息，用戶可以通過云自習(xí)室模塊選擇自習(xí)室并進(jìn)行線上自習(xí)，也可以創(chuàng)建線上自習(xí)室。用戶在進(jìn)入自習(xí)室前需要設(shè)置自習(xí)時間，進(jìn)入自習(xí)室后會顯示自習(xí)室當(dāng)前人數(shù)和自習(xí)時間的倒計時，模擬真實的自習(xí)室環(huán)境。

2）待辦事項模塊：該模塊分為左右兩部分，左側(cè)部分內(nèi)容為日歷，右側(cè)部分上方包含短期清單、長期清單、未完成清單、添加清單功能按鈕，右側(cè)部分中心顯示用戶點擊功能按鈕對應(yīng)的內(nèi)容。用戶可以參考日歷添加任務(wù)清單，任務(wù)清單分為長期清單和短期清單，用戶可以查看未完成清單，在完成清單中的任務(wù)后可以刪除對應(yīng)的任務(wù)。

3）四象限時間管理模塊：該模塊列出用戶每個象限中的任務(wù)和計劃，對應(yīng)有增加和刪除按鈕，用戶可以在四象限時間管理模塊根據(jù)相應(yīng)提示對未來的計劃、任務(wù)進(jìn)行分類。

4）專注力訓(xùn)練模塊：該模塊受舒爾特方格訓(xùn)練專注力的啟發(fā)，在其原有的基礎(chǔ)上進(jìn)行改進(jìn)。改進(jìn)內(nèi)容主要為用戶訓(xùn)練前可以根據(jù)提示選擇對應(yīng)訓(xùn)練階數(shù)和預(yù)期錯誤個數(shù)，系統(tǒng)根據(jù)用戶選擇的信息通過機(jī)器學(xué)習(xí)模型對用戶的訓(xùn)練時間進(jìn)行預(yù)測。該模塊訓(xùn)練界面如圖4所示，由四部分組成，模塊最左側(cè)部分為本次訓(xùn)練選擇的階數(shù)，中間部分為訓(xùn)練內(nèi)容，最上側(cè)和最右側(cè)部分分別顯示本次訓(xùn)練的相關(guān)數(shù)據(jù)，數(shù)據(jù)為當(dāng)前游戲時間、預(yù)測時間、當(dāng)前錯誤個數(shù)等。用戶可以在該模塊進(jìn)行專注力訓(xùn)練，訓(xùn)練數(shù)據(jù)在個人中心界面通過數(shù)據(jù)可視化的形式呈現(xiàn)給用戶。

5）番茄時鐘模塊：該模塊包括任務(wù)部分和倒計時部分。用戶可以在該模塊選擇任務(wù)設(shè)置專注時間并開始計時。

6）倒數(shù)日模塊：該模塊包括設(shè)置倒數(shù)日部分和顯示倒數(shù)日部分，用戶可以在該模塊將重要日子記錄下來，系統(tǒng)會自動計算出當(dāng)天距離這些重要日子的倒數(shù)日。

7）隨心筆記模塊：該模塊包括日期部分和內(nèi)容部分，用戶可以在該模塊記錄自己想記錄的內(nèi)容并且可以根據(jù)日期查看之前記錄的內(nèi)容。

4 結(jié)論

社會的高速發(fā)展和生活節(jié)奏的加快，使人們對時間管理和時間的利用效率等問題的重視程度越來越高，人們不僅需要時間管理的手段，更需要在有良好時間管理意識的基礎(chǔ)上提高工作、學(xué)習(xí)效率。該系統(tǒng)在具備相關(guān)時間管理的功能同時，以專注力訓(xùn)練為出發(fā)點，改進(jìn)后的舒爾特方格為基本訓(xùn)練形式，結(jié)合機(jī)器學(xué)習(xí)相關(guān)知識，實現(xiàn)了專注力訓(xùn)練功能模塊，通過該模塊可以有效地訓(xùn)練專注力。該系統(tǒng)集時間管理、規(guī)劃、專注力訓(xùn)練功能于一體，幫助用戶培養(yǎng)良好的時間管理意識，掌握時間管理手段，提升專注力，從而讓自己的生活更加充實美好。

參考文獻(xiàn)：

[1] 張盟.大學(xué)生時間管理系統(tǒng)的設(shè)計與實現(xiàn)[D].天津：天津師范大學(xué)，2014.

[2] 王小寧，王儒敬，桂元苗，等.省級農(nóng)作物病蟲數(shù)據(jù)上報系統(tǒng)的設(shè)計與實現(xiàn)[J].安徽農(nóng)業(yè)大學(xué)學(xué)報，2019，46（5）：876-882.

[3] 王丹，孫曉宇，楊路斌，等.基于SpringBoot的軟件統(tǒng)計分析系統(tǒng)設(shè)計與實現(xiàn)[J].軟件工程，2019，22（3）：40-42.

[4] 顏治平.基于SpringBoot和Vue框架的教代會提案系統(tǒng)的設(shè)計與實現(xiàn)[J].科技創(chuàng)新與應(yīng)用，2020（3）：91-93，95.

[5] 陳鐳，張凡龍.Python數(shù)據(jù)挖掘在高校人才引進(jìn)中的應(yīng)用[J].中國教育信息化，2019（15）：52-54.

[6] 王建，劉曉鳳，任安晶，等.基于eCharts和iClient的二維土壤重金屬動態(tài)污染模擬繪制技術(shù)研究[J].企業(yè)科技與發(fā)展，2020（8）：56-57.

【通聯(lián)編輯：梁書】