Vue+Koa+MongoDB从零打造一个任务管理系统 - DOM哥
source link: https://www.cnblogs.com/iovec/p/16596186.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Vue+Koa+MongoDB从零打造一个任务管理系统
大概是在18年的时候，当时还没有疫情。当时工作中同时负责多个项目，有 PC 端运营管理后台的，有移动端 M 站的，有微信小程序的，每天 git 分支切到头昏眼花，每个需求提测需要发送邮件，而且周五要写烦人的周报，我就萌生了做一个任务管理系统的想法。其实不管是日常需求还是处理线上 bug，都可以看作一个个大大小小的任务。这些任务有排期，prd，项目分支，开发测试人员等关键因素，在开发过程中这些都会得到明确，从而根据这些信息推导出提测邮件内容，进而通过排期时间区间汇总出周报。
说干就干，花了两个周末。
基本上就是任务的增删改查。
使用的技术栈如下：
# 前端
less
vue2
element-ui
# 后端
node
koa
# 数据库
由于当时对 mongodb 不熟悉，又想快速原型，选择了直接操作 json 文件的方式😄
尽管如此简陋，但我还是比较满意的，由于这时就我自己在用，功能基本够用。此时的关注点主要在 3 个要素
- 任务的排期，汇总周报的依据
- 任务的状态
- 未开始，那些已提上日程但未着手开始的任务
- 开发中，进行中的工作
- 已提测，这种状态的任务的主要工作是修改 bug
- 已完成，发布上线了的任务，无需再继续关注，汇总周报，季报的时候会用到
- 任务的项目分支，在多任务多项目并行时特别有用
我就把它定为 1.0 版本吧
后来，我也开始借鉴市面上的任务管理工具，比如 tower，trello， teambition 等发展成熟的产品。
经过两年的改进和迭代，它已经变成了现在的样子。
支持卡片拖动去改变任务状态
画了一个甘特图去直观的展现任务排期跨度
模仿 github 日历图，排除掉周末节假日，直观体现每天的任务并行情况
此时数据库也已经切换到了 mongodb
我就把这时的系统定为 2.0 版本吧
岁月荏苒，时光如梭。疫情不断反复，前端的技术也已翻天覆地。为了与时俱进，准备把这个项目用最新的技术重写一下。
具体计划如下
# 主要是前端 vue
vue cli -> vite
vue2 -> vue3
最好的学习方式莫过于边学边练完成一个项目。
我准备接下来围绕这个项目更新一个系列，期间会涉及到下面这颗树的枝干。同时分享一些几年开发生涯的所思所想。
然鹅并不会对哪个技术做过多的纠缠，我想做的是引出枝干，如果想做到枝繁叶茂硕果累累，我想官网是营养最高的地方。
感兴趣的同学欢迎关注更新。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK