可视化个人任务管理系统的设计与实现

王 丽

(厦门大学嘉庚学院信息管理与信息技术教研室 福建 厦门 363123)

0 引言

相对于任务管理,项目管理是一个更大的概念,通常一个项目被拆分为多个任务进行跟进。目前市面上的任务管理软件大多数是从项目管理的角度进行设计的[1],如事务与项目跟踪软件Jira、团队项目任务管理软件Worktile、小团队任务管理软件Teambition,特点是通用性强、功能强大,但如果单纯用于任务管理,学习成本相对较高,且无源代码不便二次开发[2]。也有少数单纯的任务管理软件如滴答清单,功能强大,但日历视图需要会员,且以移动端为主,Web端的体验稍差。

从角色上看,任务又分为团队任务、个人任务。基于项目的任务通常是团队任务,通过任务看板清楚地展示待办任务、进行中任务及已完成任务,用于跟进团队任务状态,实现团队的无障碍沟通和透明化管理[3-4]。个人任务则更加简单,无需关注团队协作,只需跟进任务状态和任务起止时间。

本文所提可视化个人任务管理系统旨在提升个人任务管理的效率,培养个人任务管理的习惯。功能包括创建任务、修改任务、排序任务、更新任务状态、将任务分配到日历日程等,可视化以任务看板和任务日历日程的方式体现,操作方式主要是拖拽和点击,简单直观,有助于增强个人任务管理的兴趣。

1 系统分析

1.1 需求分析

个人任务管理相对于团队任务管理、项目任务管理更加简单,无需考虑团队协作,无需区分生活任务还是工作任务,只需单一的记录任务、排定顺序、跟进任务即可,有助于全局安排任务、提醒备忘任务、高效完成任务。本文设计的个人任务管理系统主要满足以下要求:①简洁、美观的操作界面,有助于增强个人任务管理的兴趣;②整个系统的操作流程直观、顺畅,所见即所得;③功能涵盖任务看板、任务排序、任务日历日程分配、按条件查询任务等;④操作简便,易于上手。

1.2 可行性研究

通过学习和使用市面上优秀的任务管理系统,汲取优点,弥补不足,设计并实现一款简洁、易操作的个人任务管理系统。

在设计上,以可视化为主,主打任务看板和任务日历日程,相对于市面上的任务管理系统的相应功能做了一些调整。通常任务看板有三列组成,待办任务、进行中任务和已完成任务。对于个人任务管理,一方面,有些任务只需关注待办状态和已完成状态,无需关注过程即中间的进行中状态,操作时直接从待办状态变更到已完成状态;另一方面,从数量和重要性上看,通常待办任务偏多且重要,进行中任务较少且重要,已完成任务最多但历史的已完成任务并不重要。因此,考虑将看板的三列改为两列,待办任务独占一列,进行中任务和已完成任务共用一列,上下分布,这样无论从待办状态拖拽到进行中状态或者已完成状态,还是从进行中状态拖拽到已完成状态都是极为便利的。日历日程操作通常是点击日历日期创建日程,但在个人任务管理里并不是所有任务都需要设置日程,比如简单任务就无需关注时间跨度,且规划任务时习惯在待办状态统一创建好任务,因此考虑将任务日历日程操作简化为复制已有任务并给任务分配日程时段,操作上直接将任务拖拽到日历的对应日期即可,这样既增加了操作的趣味性也保留了与任务看板操作的连贯性。

在技术实现上,采用前后端分离架构,前端即浏览器端主要负责界面交互和数据展示,后端即服务器端主要负责存储数据和提供接口,前后端通过HTTP(hypertext transfer protocol,超文本传输协议)请求和响应进行数据的交互[5]。前端技术栈使用Vue+Bootstrap+VueDraggable+FullCalendar,Vue是目前流行的Web前端框架,优点是响应式数据绑定和组件化让开发更加快捷,虚拟DOM(document object model,文档对象模型)技术让页面渲染更加流畅[6];Bootstrap是基于HTML(hyper text markup language,超文本标记语言)、CSS(cascading style sheets,层叠样式表)和JavaScript(简称JS)前端框架,提供丰富强大的内置组件,让前端开发更加迅速、简单;VueDraggable是一款基于Sortable.js实现的Vue拖拽插件,可用于实现任务拖拽,变更任务状态;FullCalendar是一款极其优秀的日历控件,支持日程和拖拽,可用于实现把任务拖拽到日历日程及日程事件。后端技术栈使用Spring Boot+MySQL,Spring Boot框架是基于Spring框架的优化,开箱即用和约定优于配置的策略极大地简化了配置工作,提高了开发人员的开发效率;MySQL是一个开源、跨平台的关系型数据库,功能强大,运行速度快,安全性高,目前在全球数据库人气排名第二,可用于存储个人任务的数据。

2 系统设计

2.1 系统目标

每个人都需要做好任务管理,但出于习惯、没时间、懒惰、不重要等原因,往往会疏忽个人任务的管理,导致办事效率低、忘记某件事、或者拖延某件事。通过可视化个人任务管理系统让每个人实践个人任务管理、习惯个人任务管理,在不知不觉中提高个人办事效率。具体目标细分为以下4个方面:①对任务流进行可视化,激发人们的兴趣;②统一操作,简化流程,一个页面只做一件事;③界面设计友好、美观,让人印象深刻;④数据存储安全可靠,系统运行稳定流畅。

2.2 系统功能结构

个人任务管理系统的功能结构如图1所示。主要包括用户管理、可视任务管理和列表任务管理3大模块。用户管理模块是基础模块,管理用户注册、登录等信息;可视任务管理模块是核心模块,对任务进行增、删、改、查、排序及可视化展示,还支持将任务拖拽到日历的日程,即与日历模块联动;列表任务管理模块以列表形式展示所有任务,支持按条件查询任务。

图1 功能结构

2.3 数据库设计

数据库设计是个人任务管理系统建设的核心和基石。良好的数据库设计能够充分体现系统的需求,保证数据的完整性,提高系统的查询效率[5]。

本系统的数据库设计共3张表,它们之间的关系如图2所示。任务表(task)是最重要的表,用于存储任务的基本信息,如任务名称、任务状态、任务排序编号等,其中任务状态包括待办、进行中、已完成3种状态。任务日程表(tocalendar)用于存储任务的日程信息,id与任务表的id一致,主要针对已分配日程的任务,实际使用也存在不分配日程的任务,因此任务表与任务日程表是一对一或一对零的关系。用户表(user)是最基础的表,存储用户注册、登录等信息,主要字段为用户名、密码,简化起见,要求使用手机号码作为用户名。在表间关系上,任务日程表依赖于任务表,任务表隶属于某一个用户,因此用户表与任务表是一对一或一对零的关系。

图2 数据库设计

2.4 接口设计

接口主要用于界面和后台数据的交互。依据系统功能结构和界面设计,用户管理模块涉及的接口主要有注册、登录、退出等;可视任务管理模块涉及的接口主要有任务的增、删、改、查操作,任务日历日程的增、删、改操作等;列表任务管理模块涉及的接口主要有查询所有任务、按条件查询、删除等。

3 系统实现

3.1 数据库实现

基于MySQL8.0创建数据库和数据表,做好数据的准备工作。后端应用程序通过加载MySQL JDBC驱动与数据库建立连接,最终执行SQL命令与数据库进行交互。

3.2 接口实现

基于Spring Boot 2框架通过注解方式开发接口,接口规范遵循Restful风格。业务逻辑基于底层MySQL数据库的增、删、改、查实现。

3.3 界面实现

系统名称为个人任务管理系统,对应的英文名称为My Tasks。界面实现包含注册登录、任务视图、日历视图和任务管理4个模块。

(1)注册登录模块,主要是注册页、登录页实现,通过手机号码、密码注册账号,登录时输入正确的手机号码、密码后方可进入系统。

(2)任务视图模块,对应任务视图页如图3所示,3个列表项ToDo、Doing、Done分别表示待办、进行中、已完成,主要操作包括添加任务到待办、修改任务状态、排序任务、修改任务、删除任务、按关键字搜索等。

图3 任务视图页

①添加任务到待办:在左侧文本框按照提示输入任务名称,按回车键或者点击“添加到ToDo”按钮,即可将任务添加到ToDo列表的第一个位置,默认添加的任务优先级比较高,排在任务的最前面。

②修改任务状态或排序任务:是核心的可视化操作,都是通过拖拽操作完成。拖拽任务到对应的列表下(如Doing或Done),即可修改任务状态。在同一个任务列表下拖拽任务到其他位置即可调整任务的优先级顺序。

③修改任务或删除任务:点击任务,弹出修改或删除任务对话框,在对应文本框中修改任务名称,点击“修改”按钮即可确认修改。点击“删除”按钮即可删除当前任务。

④按关键字搜索:在右侧文本框按照提示输入任务关键字,按回车键或者点击“搜索”按钮,即可在ToDo、Doing、Done列表下显示关键字匹配的任务。

(3)日历视图模块,对应日历视图页如图4所示,主要操作包括将任务分配到日历日程、修改任务状态、修改任务时间跨度、在日历中删除等。

图4 日历视图页

①将任务分配到日历日程:直接拖拽ToDo、Doing、Done中的任务到日历的某个日期中即可,拖拽结束后ToDo、Doing、Done任务列表及日历中对应的任务呈现相应的背景色。如果是ToDo任务,任务背景是蓝色,提示是待办任务;如果是Doing任务,任务背景是警告色黄色,提示是当前正在进行的任务;如果是Done任务,任务背景是绿色,提示是已完成任务。

②修改任务状态:方式一,拖拽任务到对应的列表下(如Doing或Done),即可修改任务状态;方式二,在日历中点击任务,弹出对应的任务对话框如图7所示,修改任务状态字段。以上采用任何一种方式修改后两边同步更新。

③修改任务时间跨度:时间粒度以天为单位。方式一,鼠标悬浮在日历中的任务右边缘,待出现拖拽图标后,直接拖拽即可调整时间跨度的长短;方式二,鼠标悬浮在日历中的任务上,待出现拖拽图标后,直接拖拽即可平移任务调整起止时间;方式三,在日历中点击任务,弹出对应的任务对话框如图7所示,修改时间跨度字段,既可调整时间跨度的长短也可调整起止时间。以上采用任何一种方式修改后保持同步更新。

④在日历中删除:在日历中点击任务,弹出对应的任务对话框如图5所示,点击左侧按钮“在日历中删除”即可取消分配日历日程,左边任务列表中该任务的背景色变回白色。

图5 在日历中修改或删除任务

(4)任务管理模块,对应任务管理页如图6所示,主要是将所有任务按表格形式展示,支持按照任务关键字、任务状态(ToDo、Doing、Done)、日程开始日期、日程结束日期进行查询。

图6 任务管理页

4 结语

本文首先分析任务管理与项目管理、个人任务与团队任务的区别,梳理个人任务管理的需求,从设计和开发的角度分别论证实现个人任务管理系统的可行性,然后围绕系统功能结构、数据库设计、接口设计三方面展开详细的系统设计,接着实现采用前后端分离架构,前端基于Vue框架构建Web交互界面,后端基于Spring Boot框架和MySQL数据库提供数据处理接口,最后打包部署,将前后端分别部署到阿里云平台,通过浏览器访问界面进行任务管理。

本文的创新之处在于突显可视化,激发人们使用个人任务管理系统的兴趣。相对于市面上的任务管理系统做了两方面的优化,一方面基于个人任务的特殊性,将三列任务流调整为两列,使得任务从待办状态拖拽到进行中状态和已完成状态更加便捷;另一方面,一改常规的在日历上创建任务日程,而是延续任务流的操作,根据需要将任务以拖拽形式分配到日程,并在任务列表和日历中保持任务同步更新。