基于云平臺(tái)和Vue的高校任務(wù)管理系統(tǒng)設(shè)計(jì)

寧競(jìng)

（南寧職業(yè)技術(shù)學(xué)院 廣西壯族自治區(qū)南寧市 530008）

2020年11月，黨的十九屆五中全會(huì)提出了“要建設(shè)高質(zhì)量的教育管理體系”，這是教育信息化的一個(gè)基本任務(wù)。在國(guó)家推動(dòng)下，國(guó)內(nèi)高校信息化近十年來有了很大的發(fā)展。在高校的日常工作中，每年需完成各類任務(wù)（如：年度任務(wù)、評(píng)估任務(wù)等），任務(wù)的分配與執(zhí)行需要細(xì)致地管理，包括任務(wù)的分配和落實(shí)責(zé)任到人，監(jiān)督任務(wù)的執(zhí)行進(jìn)度情況，任務(wù)上交材料的存儲(chǔ)、整理等。亟需開發(fā)針對(duì)高校的任務(wù)管理信息系統(tǒng)，實(shí)現(xiàn)對(duì)學(xué)校工作任務(wù)的高效管理，包括任務(wù)分解、實(shí)時(shí)監(jiān)控任務(wù)進(jìn)展及督促提醒，任務(wù)填報(bào)上傳等，對(duì)提高高校工作效率、實(shí)現(xiàn)高校任務(wù)信息化有重要意義。

1 研究現(xiàn)狀

當(dāng)前國(guó)內(nèi)外高校，特別是國(guó)內(nèi)，仍有部分高校，采用傳統(tǒng)方式進(jìn)行任務(wù)管理。在傳統(tǒng)的任務(wù)管理模式中，主要通過會(huì)議分配任務(wù)到人，責(zé)任人通過電子郵件及QQ等方式上交結(jié)果材料。這種方式下，存在工作任務(wù)分配不清晰；任務(wù)安排后，管理者進(jìn)度監(jiān)控困難；工作過程無記錄，材料存放混亂等問題，效率低下。

部分高校能緊跟時(shí)代，使用軟件任務(wù)管理系統(tǒng)對(duì)年度工作、評(píng)估等任務(wù)進(jìn)行管理。軟件項(xiàng)目管理最早源自于70年代中期，至今，不論是國(guó)外市場(chǎng)還是國(guó)內(nèi)市場(chǎng)，都存在著各式各樣的管理軟件，這些軟件一般是通用性的軟件，以企業(yè)項(xiàng)目管理軟件居多，由于任務(wù)管理的復(fù)雜性，這些軟件從功能上并未能完全符合高校任務(wù)管理的特點(diǎn)。這些任務(wù)管理系統(tǒng)從功能上看，基本能實(shí)現(xiàn)任務(wù)的填報(bào)上傳，但從管理者的角度看，缺少整個(gè)任務(wù)分解結(jié)構(gòu)展示、任務(wù)的進(jìn)度監(jiān)控、進(jìn)度統(tǒng)計(jì)圖表展示、任務(wù)督促提醒等，不能完全適用于高校任務(wù)管理；從網(wǎng)站技術(shù)上看，對(duì)應(yīng)的系統(tǒng)Web前端部分，基本采用傳統(tǒng)的網(wǎng)站開發(fā)方式開發(fā)，在傳統(tǒng)的服務(wù)器上存儲(chǔ)，在網(wǎng)頁加載、響應(yīng)速度等網(wǎng)站性能方面有待提高。部分管理系統(tǒng)，僅有面向PC端的系統(tǒng)，欠缺手機(jī)端的支持，用戶使用受限，沒能跟上當(dāng)前移動(dòng)技術(shù)流行的趨勢(shì)。

綜合上述關(guān)于國(guó)內(nèi)外高校有關(guān)任務(wù)管理的研究分析，我們發(fā)現(xiàn)，不少高校仍采用傳統(tǒng)的任務(wù)管理，通過會(huì)議確定任務(wù)分解，督促責(zé)任人完成及通過電子郵件各種方式上交結(jié)果材料的方式效率低下。部分高校使用現(xiàn)有的任務(wù)管理系統(tǒng)，以企業(yè)項(xiàng)目管理軟件居多，系統(tǒng)功能未能完全符合高校任務(wù)管理特點(diǎn)，運(yùn)行速度、數(shù)據(jù)可靠性等有待提升，部分任務(wù)管理系統(tǒng)只有PC端沒有手機(jī)端，不夠便捷。高校任務(wù)管理亟需開發(fā)符合高校需求的任務(wù)管理軟件，以達(dá)到高效的任務(wù)管理。

2 需求分析

通過對(duì)當(dāng)前高校任務(wù)管理現(xiàn)狀的研究，探索設(shè)計(jì)“高校任務(wù)管理系統(tǒng)”，在功能需求上，針對(duì)高校任務(wù)的特點(diǎn)，任務(wù)管理系統(tǒng)能切合當(dāng)前高校任務(wù)的管理需要，不僅包含基本的責(zé)任人任務(wù)填報(bào)上傳的傳統(tǒng)功能，針對(duì)管理者，實(shí)現(xiàn)任務(wù)分解、分解結(jié)構(gòu)清晰顯示、實(shí)時(shí)監(jiān)控任務(wù)進(jìn)展等功能，使高校的任務(wù)管理更便捷、高效。系統(tǒng)分為PC端和手機(jī)端，利用計(jì)算機(jī)和手機(jī)即可方便地進(jìn)行任務(wù)管理與監(jiān)控。系統(tǒng)主要包括以下功能：

2.1 用戶端功能需求

2.1.1 登錄

通過登錄界面，用戶輸入合法用戶名及密碼登錄成功方可進(jìn)行各項(xiàng)操作。

2.1.2 任務(wù)管理

責(zé)任人可進(jìn)行進(jìn)度填報(bào)與材料上傳。管理者可進(jìn)行任務(wù)創(chuàng)建與分配、整個(gè)任務(wù)分解結(jié)構(gòu)及任務(wù)進(jìn)度查看、查看任務(wù)詳情及下載任務(wù)支撐材料。

2.1.3 消息管理

管理者對(duì)于任務(wù)中的出現(xiàn)的問題，可發(fā)送消息與責(zé)任人溝通，以及發(fā)送消息督促任務(wù)完成。

責(zé)任人收到及查看相關(guān)消息。

2.1.4 統(tǒng)計(jì)

管理者獲得任務(wù)進(jìn)度統(tǒng)計(jì)圖表，以監(jiān)控任務(wù)進(jìn)展。

2.1.5 個(gè)人中心

用戶可進(jìn)行個(gè)人資料的查看及修改管理。

2.2 管理端功能需求

2.2.1 登錄

通過登錄界面，管理員輸入合法用戶名及密碼登錄成功方可進(jìn)行各項(xiàng)管理。

2.2.2 任務(wù)管理

實(shí)現(xiàn)后臺(tái)任務(wù)數(shù)據(jù)管理功能，包括任務(wù)的創(chuàng)建，各任務(wù)分解結(jié)構(gòu)及任務(wù)查看、添加、刪除、修改等管理。

2.2.3 用戶管理

實(shí)現(xiàn)后臺(tái)用戶數(shù)據(jù)管理功能，包括用戶創(chuàng)建及權(quán)限分配、各用戶信息列表查看及修改等管理。

2.2.4 消息管理

實(shí)現(xiàn)后臺(tái)消息查看與刪除管理。

2.2.5 統(tǒng)計(jì)

獲得任務(wù)進(jìn)度統(tǒng)計(jì)圖表，以監(jiān)控任務(wù)進(jìn)展。

3 系統(tǒng)相關(guān)技術(shù)

為實(shí)現(xiàn)系統(tǒng)高速無卡頓運(yùn)行，保障海量數(shù)據(jù)安全存儲(chǔ)，系統(tǒng)的前端頁面采用流行的Vue框架技術(shù)進(jìn)行系統(tǒng)開發(fā)，數(shù)據(jù)存儲(chǔ)采用當(dāng)前流行的MongoDB非關(guān)系型數(shù)據(jù)庫存儲(chǔ)，開發(fā)完成后將系統(tǒng)部署在阿里云的云平臺(tái)上，利用云平臺(tái)強(qiáng)大的計(jì)算能力來提升系統(tǒng)的運(yùn)行速度、數(shù)據(jù)存儲(chǔ)安全性。

3.1 Vue框架技術(shù)

Vue是近兩年來流行的一款Web前端框架技術(shù)，相對(duì)于傳統(tǒng)前端網(wǎng)站開發(fā)技術(shù)，用其制作網(wǎng)站系統(tǒng)有以下優(yōu)點(diǎn)：

3.1.1 響應(yīng)式數(shù)據(jù)綁定

Vue會(huì)自動(dòng)對(duì)頁面中某些數(shù)據(jù)的變化做出同步的響應(yīng)，對(duì)所有綁定在一起的數(shù)據(jù)和視圖內(nèi)容都進(jìn)行修改，讓開發(fā)者有更多的時(shí)間去思考業(yè)務(wù)邏輯。

3.1.2 組件化開發(fā)

利用模塊化封裝的思想，Vue把網(wǎng)站系統(tǒng)中的各種模塊拆分到一個(gè)個(gè)單獨(dú)的組件中，實(shí)現(xiàn)了html的封裝和重用，提高了代碼重用性和可維護(hù)性。

3.1.3 虛擬DOM技術(shù)

在傳統(tǒng)網(wǎng)站開發(fā)中，對(duì)頁面進(jìn)行頻繁操作的時(shí)候，頁面容易卡頓。虛擬 DOM預(yù)先進(jìn)行各種計(jì)算并優(yōu)化，極大地提升網(wǎng)站頁面渲染速度，使網(wǎng)頁加載更快更順暢。

3.2 MongoDB技術(shù)

系統(tǒng)的后端，打破傳統(tǒng)網(wǎng)站使用關(guān)系型數(shù)據(jù)庫存儲(chǔ)慣例，采用MongoDB技術(shù)實(shí)現(xiàn)數(shù)據(jù)的存儲(chǔ)維護(hù)功能。MongoDB是當(dāng)前流行的非關(guān)系型數(shù)據(jù)庫技術(shù)，其維護(hù)的是一個(gè)開源、高性能、無模式的文檔型數(shù)據(jù)庫，具有高可靠、高性能、支撐海量數(shù)據(jù)等優(yōu)點(diǎn)，可以高效地解決本系統(tǒng)的實(shí)際業(yè)務(wù)需求。

3.3 云平臺(tái)技術(shù)

前端、后端開發(fā)完成后，將其在阿里云的云平臺(tái)部署運(yùn)行。云平臺(tái)是近年來發(fā)展的新興技術(shù)，具有強(qiáng)大計(jì)算與存儲(chǔ)能力、高可靠性。通過采用云服務(wù)器，極大地提升高校任務(wù)管理系統(tǒng)的運(yùn)行速度、存儲(chǔ)安全性可靠性。其包括操作系統(tǒng)及高可靠、高安全性的存儲(chǔ)系統(tǒng),提供服務(wù)器的應(yīng)用部署、安全管理、運(yùn)維監(jiān)控等，網(wǎng)絡(luò)速度更快更穩(wěn)定。

4 系統(tǒng)總體設(shè)計(jì)

4.1 系統(tǒng)技術(shù)架構(gòu)

系統(tǒng)采用MVVM模式和B/S架構(gòu)。

MVVM模式是Model-View-ViewModel的縮寫，分為模型層、視圖層、視圖模型層。模型層主要負(fù)責(zé)提取及處理返回?cái)?shù)據(jù)；視圖層主要負(fù)責(zé)頁面展示；視圖模型層起到前兩者的連接作用，一方面響應(yīng)用戶事件向模型層發(fā)送請(qǐng)求獲取數(shù)據(jù)，另一方面將模型層返回的數(shù)據(jù)轉(zhuǎn)化成所看到的頁面。MVVM模式提高代碼的可重用性，可以把一些視圖邏輯放在ViewModel中進(jìn)行重用；使代碼低耦合，視圖（View）可以獨(dú)立于Model變化和修改；方便獨(dú)立開發(fā)，開發(fā)人員可以專注于業(yè)務(wù)數(shù)據(jù)的操作，設(shè)計(jì)人員可以專注于頁面布局與制作。

系統(tǒng)采用B/S架構(gòu)實(shí)現(xiàn)前后臺(tái)管理。用戶通過使用瀏覽器，登錄后就可進(jìn)行高校任務(wù)管理系統(tǒng)前端各功能的使用。瀏覽器端又分為電腦PC端和手機(jī)端，用戶利用計(jì)算機(jī)和手機(jī)即可方便地進(jìn)行任務(wù)管理與監(jiān)控，提升了用戶體驗(yàn)。管理員使用瀏覽器登錄管理端，實(shí)現(xiàn)對(duì)任務(wù)管理系統(tǒng)的各項(xiàng)管理。

4.2 業(yè)務(wù)流程設(shè)計(jì)

系統(tǒng)是一個(gè)高校任務(wù)管理的系統(tǒng)，主要實(shí)現(xiàn)高校任務(wù)的高效、便捷管理。根據(jù)高校任務(wù)管理功能，其主要業(yè)務(wù)流程如下：

登錄系統(tǒng)后，首先，任務(wù)管理者或項(xiàng)目負(fù)責(zé)人根據(jù)任務(wù)要求創(chuàng)建任務(wù)并對(duì)項(xiàng)目成員進(jìn)行任務(wù)的逐級(jí)分配。然后，任務(wù)責(zé)任人即項(xiàng)目成員接受任務(wù)后，及時(shí)進(jìn)入系統(tǒng)填報(bào)任務(wù)完成情況、完成進(jìn)度，上傳及編輯任務(wù)支撐文件材料。在此過程中，任務(wù)管理者通過系統(tǒng)中的任務(wù)分解結(jié)構(gòu)監(jiān)控任務(wù)的進(jìn)展情況，對(duì)任務(wù)的完成進(jìn)度情況以圖表方式進(jìn)行分類統(tǒng)計(jì)。任務(wù)管理者可查看每個(gè)任務(wù)的信息及支撐文件材料，進(jìn)行支撐材料的下載，對(duì)于進(jìn)度滯后的任務(wù)進(jìn)行消息督促及提醒。系統(tǒng)管理員，則負(fù)責(zé)進(jìn)行系統(tǒng)各類管理及維護(hù)，包括用戶管理、任務(wù)管理、消息管理等。

4.3 系統(tǒng)功能結(jié)構(gòu)設(shè)計(jì)

高校任務(wù)管理系統(tǒng)的主要目標(biāo)是切合當(dāng)前高校任務(wù)的管理需要，使高校的任務(wù)管理更便捷、高效，不僅包含基本的責(zé)任人任務(wù)填報(bào)上傳的傳統(tǒng)功能，管理者可進(jìn)行任務(wù)分解及實(shí)時(shí)監(jiān)控任務(wù)進(jìn)度、消息提醒，有效提高辦公的效率。

根據(jù)需求及工作流程，系統(tǒng)設(shè)置了三類角色：超級(jí)管理員、任務(wù)管理者、任務(wù)責(zé)任人。超級(jí)管理員具有整個(gè)系統(tǒng)的各項(xiàng)管理維護(hù)權(quán)限；任務(wù)管理者可創(chuàng)建分配任務(wù)、查看任務(wù)完成進(jìn)度情況及進(jìn)行消息督促提醒；任務(wù)責(zé)任人對(duì)自己所負(fù)責(zé)的任務(wù)進(jìn)行任務(wù)填報(bào)、修改及支撐材料上傳，這三類用戶具有不同訪問權(quán)限，看到的是不同的系統(tǒng)菜單。

系統(tǒng)包括下面幾個(gè)模塊：系統(tǒng)登錄模塊、任務(wù)管理模塊、消息管理模塊、用戶管理模塊、統(tǒng)計(jì)管理模塊，任務(wù)管理系統(tǒng)的總體結(jié)構(gòu)如圖1所示。

圖1：系統(tǒng)功能結(jié)構(gòu)

5 系統(tǒng)實(shí)現(xiàn)

5.1 系統(tǒng)程序開發(fā)流程

首先，瀏覽器端（前端）的搭建及各頁面實(shí)現(xiàn)采用Vue框架技術(shù)開發(fā)。

然后，系統(tǒng)的服務(wù)器及數(shù)據(jù)庫端（后端），采用MongoDB技術(shù)創(chuàng)建數(shù)據(jù)庫，編寫API接口，實(shí)現(xiàn)數(shù)據(jù)獲取及存儲(chǔ)維護(hù)功能。

系統(tǒng)開發(fā)采用當(dāng)前流行的前后端分離模式，即服務(wù)器及數(shù)據(jù)庫端的開發(fā)與瀏覽器端開發(fā)分離，各自獨(dú)立開發(fā)。服務(wù)器及數(shù)據(jù)庫端通過API接口與瀏覽器端對(duì)接，為其操作提供數(shù)據(jù)，進(jìn)行數(shù)據(jù)返回。采用API接口模式使開發(fā)耦合度降低，分層明確，代碼清晰，前端人員專心做前端的工作，后端人員專心做后端，兩者開發(fā)同時(shí)進(jìn)行，極大地提高工作效率。

最終，任務(wù)管理系統(tǒng)的前端、后端開發(fā)完成，經(jīng)測(cè)試及完善后，將其在阿里云的云平臺(tái)部署運(yùn)行。部署完成后，用戶可在瀏覽器登錄任務(wù)管理系統(tǒng)平臺(tái)，進(jìn)行各類任務(wù)功能操作。

5.2 系統(tǒng)代碼實(shí)現(xiàn)

5.2.1 界面設(shè)計(jì)

以系統(tǒng)手機(jī)端為例，該項(xiàng)目的手機(jī)端主界面顯示該用戶的所有任務(wù)及其進(jìn)度，點(diǎn)擊相應(yīng)按鈕可查看任務(wù)詳情、添加子任務(wù)等。導(dǎo)航菜單分為首頁、統(tǒng)計(jì)、消息、我的四個(gè)菜單項(xiàng)，點(diǎn)擊后可跳轉(zhuǎn)到相應(yīng)頁面查看相應(yīng)功能。手機(jī)端主界面效果如圖2所示。

圖2：手機(jī)端主界面效果

5.2.2 頁面功能實(shí)現(xiàn)

以系統(tǒng)手機(jī)端中的任務(wù)創(chuàng)建管理模塊實(shí)現(xiàn)為例，實(shí)現(xiàn)的關(guān)鍵代碼如下：

首先，利用Vue框架和vant-ui界面框架，在瀏覽器前端布局任務(wù)表單頁面：

然后，利用Vue框架，編寫前端的表單提交按鈕處理函數(shù)，對(duì)用戶填寫的任務(wù)表單數(shù)據(jù)進(jìn)行合法性校驗(yàn)。校驗(yàn)通過后，通過API接口將表單數(shù)據(jù)提交到服務(wù)器端。

最后，在服務(wù)器端，創(chuàng)建MongoDB數(shù)據(jù)庫，存入數(shù)據(jù)。在服務(wù)器端開發(fā)API接口，與瀏覽器端進(jìn)行數(shù)據(jù)對(duì)接，將前端提交過來的用戶任務(wù)表單數(shù)據(jù)存入MongoDB數(shù)據(jù)庫。

經(jīng)過上述前后端對(duì)接的代碼處理，用戶新創(chuàng)建的任務(wù)數(shù)據(jù)就存儲(chǔ)進(jìn)入數(shù)據(jù)庫，實(shí)現(xiàn)系統(tǒng)手機(jī)端任務(wù)創(chuàng)建功能。

6 測(cè)試

高校任務(wù)管理系統(tǒng)在開發(fā)完成后，將其在阿里云的云平臺(tái)部署運(yùn)行。我們進(jìn)行了系統(tǒng)運(yùn)行的穩(wěn)定性進(jìn)行了測(cè)試。在任務(wù)填報(bào)及材料上傳模塊，并發(fā)請(qǐng)求400個(gè)，總請(qǐng)求量4000次，通過測(cè)試得到每次并發(fā)平均耗時(shí)20140.2毫秒，每個(gè)請(qǐng)求平均耗時(shí)50.35毫秒。系統(tǒng)的結(jié)果符合預(yù)期要求。

7 結(jié)語

高校任務(wù)管理系統(tǒng)，通過規(guī)范化管理使任務(wù)完成進(jìn)度一目了然，有利于進(jìn)度監(jiān)控及促進(jìn)任務(wù)責(zé)任人按時(shí)完成任務(wù)，Vue技術(shù)在前端應(yīng)用使開發(fā)更高效、網(wǎng)頁加載運(yùn)行速度更快，后端MongoDB數(shù)據(jù)庫的使用，使系統(tǒng)數(shù)據(jù)存儲(chǔ)高性能、支撐用戶上傳支撐材料的海量數(shù)據(jù)。通過在云平臺(tái)上部署運(yùn)行，云平臺(tái)的彈性云服務(wù)器，使系統(tǒng)運(yùn)行更流暢、數(shù)據(jù)存儲(chǔ)更可靠。通過在高校中應(yīng)用推廣，使任務(wù)管理更高效，能有效減少高校在傳統(tǒng)任務(wù)管理上耗費(fèi)的大量人力、物力，在各高校日常任務(wù)多，亟待有效管理的今天，本課題的任務(wù)管理系統(tǒng)將帶來更高的經(jīng)濟(jì)效益。