基于云平台和Vue的高校任务管理系统设计

宁竞

（南宁职业技术学院 广西壮族自治区南宁市 530008）

2020年11月，党的十九届五中全会提出了“要建设高质量的教育管理体系”，这是教育信息化的一个基本任务。在国家推动下，国内高校信息化近十年来有了很大的发展。在高校的日常工作中，每年需完成各类任务（如：年度任务、评估任务等），任务的分配与执行需要细致地管理，包括任务的分配和落实责任到人，监督任务的执行进度情况，任务上交材料的存储、整理等。亟需开发针对高校的任务管理信息系统，实现对学校工作任务的高效管理，包括任务分解、实时监控任务进展及督促提醒，任务填报上传等，对提高高校工作效率、实现高校任务信息化有重要意义。

1 研究现状

当前国内外高校，特别是国内，仍有部分高校，采用传统方式进行任务管理。在传统的任务管理模式中，主要通过会议分配任务到人，责任人通过电子邮件及QQ等方式上交结果材料。这种方式下，存在工作任务分配不清晰；任务安排后，管理者进度监控困难；工作过程无记录，材料存放混乱等问题，效率低下。

部分高校能紧跟时代，使用软件任务管理系统对年度工作、评估等任务进行管理。软件项目管理最早源自于70年代中期，至今，不论是国外市场还是国内市场，都存在着各式各样的管理软件，这些软件一般是通用性的软件，以企业项目管理软件居多，由于任务管理的复杂性，这些软件从功能上并未能完全符合高校任务管理的特点。这些任务管理系统从功能上看，基本能实现任务的填报上传，但从管理者的角度看，缺少整个任务分解结构展示、任务的进度监控、进度统计图表展示、任务督促提醒等，不能完全适用于高校任务管理；从网站技术上看，对应的系统Web前端部分，基本采用传统的网站开发方式开发，在传统的服务器上存储，在网页加载、响应速度等网站性能方面有待提高。部分管理系统，仅有面向PC端的系统，欠缺手机端的支持，用户使用受限，没能跟上当前移动技术流行的趋势。

综合上述关于国内外高校有关任务管理的研究分析，我们发现，不少高校仍采用传统的任务管理，通过会议确定任务分解，督促责任人完成及通过电子邮件各种方式上交结果材料的方式效率低下。部分高校使用现有的任务管理系统，以企业项目管理软件居多，系统功能未能完全符合高校任务管理特点，运行速度、数据可靠性等有待提升，部分任务管理系统只有PC端没有手机端，不够便捷。高校任务管理亟需开发符合高校需求的任务管理软件，以达到高效的任务管理。

2 需求分析

通过对当前高校任务管理现状的研究，探索设计“高校任务管理系统”，在功能需求上，针对高校任务的特点，任务管理系统能切合当前高校任务的管理需要，不仅包含基本的责任人任务填报上传的传统功能，针对管理者，实现任务分解、分解结构清晰显示、实时监控任务进展等功能，使高校的任务管理更便捷、高效。系统分为PC端和手机端，利用计算机和手机即可方便地进行任务管理与监控。系统主要包括以下功能：

2.1 用户端功能需求

2.1.1 登录

通过登录界面，用户输入合法用户名及密码登录成功方可进行各项操作。

2.1.2 任务管理

责任人可进行进度填报与材料上传。管理者可进行任务创建与分配、整个任务分解结构及任务进度查看、查看任务详情及下载任务支撑材料。

2.1.3 消息管理

管理者对于任务中的出现的问题，可发送消息与责任人沟通，以及发送消息督促任务完成。

责任人收到及查看相关消息。

2.1.4 统计

管理者获得任务进度统计图表，以监控任务进展。

2.1.5 个人中心

用户可进行个人资料的查看及修改管理。

2.2 管理端功能需求

2.2.1 登录

通过登录界面，管理员输入合法用户名及密码登录成功方可进行各项管理。

2.2.2 任务管理

实现后台任务数据管理功能，包括任务的创建，各任务分解结构及任务查看、添加、删除、修改等管理。

2.2.3 用户管理

实现后台用户数据管理功能，包括用户创建及权限分配、各用户信息列表查看及修改等管理。

2.2.4 消息管理

实现后台消息查看与删除管理。

2.2.5 统计

获得任务进度统计图表，以监控任务进展。

3 系统相关技术

为实现系统高速无卡顿运行，保障海量数据安全存储，系统的前端页面采用流行的Vue框架技术进行系统开发，数据存储采用当前流行的MongoDB非关系型数据库存储，开发完成后将系统部署在阿里云的云平台上，利用云平台强大的计算能力来提升系统的运行速度、数据存储安全性。

3.1 Vue框架技术

Vue是近两年来流行的一款Web前端框架技术，相对于传统前端网站开发技术，用其制作网站系统有以下优点：

3.1.1 响应式数据绑定

Vue会自动对页面中某些数据的变化做出同步的响应，对所有绑定在一起的数据和视图内容都进行修改，让开发者有更多的时间去思考业务逻辑。

3.1.2 组件化开发

利用模块化封装的思想，Vue把网站系统中的各种模块拆分到一个个单独的组件中，实现了html的封装和重用，提高了代码重用性和可维护性。

3.1.3 虚拟DOM技术

在传统网站开发中，对页面进行频繁操作的时候，页面容易卡顿。虚拟 DOM预先进行各种计算并优化，极大地提升网站页面渲染速度，使网页加载更快更顺畅。

3.2 MongoDB技术

系统的后端，打破传统网站使用关系型数据库存储惯例，采用MongoDB技术实现数据的存储维护功能。MongoDB是当前流行的非关系型数据库技术，其维护的是一个开源、高性能、无模式的文档型数据库，具有高可靠、高性能、支撑海量数据等优点，可以高效地解决本系统的实际业务需求。

3.3 云平台技术

前端、后端开发完成后，将其在阿里云的云平台部署运行。云平台是近年来发展的新兴技术，具有强大计算与存储能力、高可靠性。通过采用云服务器，极大地提升高校任务管理系统的运行速度、存储安全性可靠性。其包括操作系统及高可靠、高安全性的存储系统,提供服务器的应用部署、安全管理、运维监控等，网络速度更快更稳定。

4 系统总体设计

4.1 系统技术架构

系统采用MVVM模式和B/S架构。

MVVM模式是Model-View-ViewModel的缩写，分为模型层、视图层、视图模型层。模型层主要负责提取及处理返回数据；视图层主要负责页面展示；视图模型层起到前两者的连接作用，一方面响应用户事件向模型层发送请求获取数据，另一方面将模型层返回的数据转化成所看到的页面。MVVM模式提高代码的可重用性，可以把一些视图逻辑放在ViewModel中进行重用；使代码低耦合，视图（View）可以独立于Model变化和修改；方便独立开发，开发人员可以专注于业务数据的操作，设计人员可以专注于页面布局与制作。

系统采用B/S架构实现前后台管理。用户通过使用浏览器，登录后就可进行高校任务管理系统前端各功能的使用。浏览器端又分为电脑PC端和手机端，用户利用计算机和手机即可方便地进行任务管理与监控，提升了用户体验。管理员使用浏览器登录管理端，实现对任务管理系统的各项管理。

4.2 业务流程设计

系统是一个高校任务管理的系统，主要实现高校任务的高效、便捷管理。根据高校任务管理功能，其主要业务流程如下：

登录系统后，首先，任务管理者或项目负责人根据任务要求创建任务并对项目成员进行任务的逐级分配。然后，任务责任人即项目成员接受任务后，及时进入系统填报任务完成情况、完成进度，上传及编辑任务支撑文件材料。在此过程中，任务管理者通过系统中的任务分解结构监控任务的进展情况，对任务的完成进度情况以图表方式进行分类统计。任务管理者可查看每个任务的信息及支撑文件材料，进行支撑材料的下载，对于进度滞后的任务进行消息督促及提醒。系统管理员，则负责进行系统各类管理及维护，包括用户管理、任务管理、消息管理等。

4.3 系统功能结构设计

高校任务管理系统的主要目标是切合当前高校任务的管理需要，使高校的任务管理更便捷、高效，不仅包含基本的责任人任务填报上传的传统功能，管理者可进行任务分解及实时监控任务进度、消息提醒，有效提高办公的效率。

根据需求及工作流程，系统设置了三类角色：超级管理员、任务管理者、任务责任人。超级管理员具有整个系统的各项管理维护权限；任务管理者可创建分配任务、查看任务完成进度情况及进行消息督促提醒；任务责任人对自己所负责的任务进行任务填报、修改及支撑材料上传，这三类用户具有不同访问权限，看到的是不同的系统菜单。

系统包括下面几个模块：系统登录模块、任务管理模块、消息管理模块、用户管理模块、统计管理模块，任务管理系统的总体结构如图1所示。

图1：系统功能结构

5 系统实现

5.1 系统程序开发流程

首先，浏览器端（前端）的搭建及各页面实现采用Vue框架技术开发。

然后，系统的服务器及数据库端（后端），采用MongoDB技术创建数据库，编写API接口，实现数据获取及存储维护功能。

系统开发采用当前流行的前后端分离模式，即服务器及数据库端的开发与浏览器端开发分离，各自独立开发。服务器及数据库端通过API接口与浏览器端对接，为其操作提供数据，进行数据返回。采用API接口模式使开发耦合度降低，分层明确，代码清晰，前端人员专心做前端的工作，后端人员专心做后端，两者开发同时进行，极大地提高工作效率。

最终，任务管理系统的前端、后端开发完成，经测试及完善后，将其在阿里云的云平台部署运行。部署完成后，用户可在浏览器登录任务管理系统平台，进行各类任务功能操作。

5.2 系统代码实现

5.2.1 界面设计

以系统手机端为例，该项目的手机端主界面显示该用户的所有任务及其进度，点击相应按钮可查看任务详情、添加子任务等。导航菜单分为首页、统计、消息、我的四个菜单项，点击后可跳转到相应页面查看相应功能。手机端主界面效果如图2所示。

图2：手机端主界面效果

5.2.2 页面功能实现

以系统手机端中的任务创建管理模块实现为例，实现的关键代码如下：

首先，利用Vue框架和vant-ui界面框架，在浏览器前端布局任务表单页面：

然后，利用Vue框架，编写前端的表单提交按钮处理函数，对用户填写的任务表单数据进行合法性校验。校验通过后，通过API接口将表单数据提交到服务器端。

最后，在服务器端，创建MongoDB数据库，存入数据。在服务器端开发API接口，与浏览器端进行数据对接，将前端提交过来的用户任务表单数据存入MongoDB数据库。

经过上述前后端对接的代码处理，用户新创建的任务数据就存储进入数据库，实现系统手机端任务创建功能。

6 测试

高校任务管理系统在开发完成后，将其在阿里云的云平台部署运行。我们进行了系统运行的稳定性进行了测试。在任务填报及材料上传模块，并发请求400个，总请求量4000次，通过测试得到每次并发平均耗时20140.2毫秒，每个请求平均耗时50.35毫秒。系统的结果符合预期要求。

7 结语

高校任务管理系统，通过规范化管理使任务完成进度一目了然，有利于进度监控及促进任务责任人按时完成任务，Vue技术在前端应用使开发更高效、网页加载运行速度更快，后端MongoDB数据库的使用，使系统数据存储高性能、支撑用户上传支撑材料的海量数据。通过在云平台上部署运行，云平台的弹性云服务器，使系统运行更流畅、数据存储更可靠。通过在高校中应用推广，使任务管理更高效，能有效减少高校在传统任务管理上耗费的大量人力、物力，在各高校日常任务多，亟待有效管理的今天，本课题的任务管理系统将带来更高的经济效益。