Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程

大概是在18年的时候,当时还没有疫情。当时工作中同时负责多个项目,有 PC 端运营管理后台的,有移动端 M 站的,有微信小程序的,每天 git 分支切到头昏眼花,每个需求提测需要发送邮件,而且周五要写烦人的周报,我就萌生了做一个任务管理系统的想法。其实不管是日常需求还是处理线上 bug,都可以看作一个个大大小小的任务。这些任务有排期,prd,项目分支,开发测试人员等关键因素,在开发过程中这些都会得到明确,从而根据这些信息推导出提测邮件内容,进而通过排期时间区间汇总出周报。

说干就干,花了两个周末。

Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程_第1张图片

Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程_第2张图片

基本上就是任务的增删改查。

使用的技术栈如下:

# 前端
less
vue2
element-ui

# 后端
node
koa

# 数据库
由于当时对 mongodb 不熟悉,又想快速原型,选择了直接操作 json 文件的方式

尽管如此简陋,但我还是比较满意的,由于这时就我自己在用,功能基本够用。此时的关注点主要在 3 个要素

  • 任务的排期,汇总周报的依据
  • 任务的状态
    • 未开始,那些已提上日程但未着手开始的任务
    • 开发中,进行中的工作
    • 已提测,这种状态的任务的主要工作是修改 bug
    • 已完成,发布上线了的任务,无需再继续关注,汇总周报,季报的时候会用到
  • 任务的项目分支,在多任务多项目并行时特别有用

我就把它定为 1.0 版本吧

后来,我也开始借鉴市面上的任务管理工具,比如 tower,trello, teambition 等发展成熟的产品。

经过两年的改进和迭代,它已经变成了现在的样子。

Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程_第3张图片

支持卡片拖动去改变任务状态

画了一个甘特图去直观的展现任务排期跨度

Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程_第4张图片

模仿 github 日历图,排除掉周末节假日,直观体现每天的任务并行情况

Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程_第5张图片

此时数据库也已经切换到了 mongodb

我就把这时的系统定为 2.0 版本吧

岁月荏苒,时光如梭。疫情不断反复,前端的技术也已翻天覆地。为了与时俱进,准备把这个项目用最新的技术重写一下。

具体计划如下

# 主要是前端 vue
vue cli -> vite
vue2 -> vue3

最好的学习方式莫过于边学边练完成一个项目。

我准备接下来围绕这个项目更新一个系列,期间会涉及到下面这颗树的枝干。同时分享一些几年开发生涯的所思所想。
然鹅并不会对哪个技术做过多的纠缠,我想做的是引出枝干,如果想做到枝繁叶茂硕果累累,我想官网是营养最高的地方。

Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程_第6张图片

到此这篇关于Vue+Koa+MongoDB从零打造一个任务管理系统的文章就介绍到这了,更多相关Vue+Koa+MongoDB任务管理系统内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(Vue+Koa+MongoDB从零打造一个任务管理系统的详细过程)