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

 更新时间:2022年08月18日 08:40:35   作者:DOM哥  
这篇文章主要介绍了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

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

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

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

相关文章

  • 如何解决Element UI el-dialog打开一次后无法再次打开问题

    如何解决Element UI el-dialog打开一次后无法再次打开问题

    这篇文章主要介绍了如何解决Element UI el-dialog打开一次后无法再次打开问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue插件draggable实现拖拽移动图片顺序

    vue插件draggable实现拖拽移动图片顺序

    这篇文章主要为大家详细介绍了vue插件draggable实现拖拽移动图片顺序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 简单说说如何使用vue-router插件的方法

    简单说说如何使用vue-router插件的方法

    这篇文章主要介绍了如何使用vue-router插件的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue 实现登录界面验证码功能

    Vue 实现登录界面验证码功能

    本文通过实例代码给大家介绍了Vue 实现登录界面 验证码功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • vue scss后缀文件background-image路径错误的解决

    vue scss后缀文件background-image路径错误的解决

    这篇文章主要介绍了vue scss后缀文件background-image路径错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 多个vue项目复用一个node_modules的问题

    多个vue项目复用一个node_modules的问题

    这篇文章主要介绍了多个vue项目复用一个node_modules的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue使用element-ui的el-image的问题分析

    vue使用element-ui的el-image的问题分析

    这篇文章主要介绍了vue使用element-ui的el-image的问题分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • vue+element-ui+ajax实现一个表格的实例

    vue+element-ui+ajax实现一个表格的实例

    下面小编就为大家分享一篇vue+element-ui+ajax实现一个表格的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue实现动态绑定行内样式style的backgroundImage

    vue实现动态绑定行内样式style的backgroundImage

    这篇文章主要介绍了vue实现动态绑定行内样式style的backgroundImage方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue之子组件如何修改父组件的值

    vue之子组件如何修改父组件的值

    这篇文章主要介绍了vue之子组件如何修改父组件的值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07

最新评论