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任务管理系统内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3使用element-plus搭建后台管理系统之菜单管理功能

    vue3使用element-plus搭建后台管理系统之菜单管理功能

    菜单管理是一套系统中最常见最核心的系统管理模块之一,我把菜单管理分成了2个部分,左边可以管理维护菜单,在菜单的最右侧可以维护每个菜单按钮权限配置 使用element-plus el-tree组件快速开发树形菜单结构,el-tree组件中filter-node-method事件便可以实现树形菜单筛选过滤功能 <template> <div class="common-tree"> <el-tree :ref="treeRef" :data

  • 如何利用Vue3管理系统实现动态路由和动态侧边菜单栏

    如何利用Vue3管理系统实现动态路由和动态侧边菜单栏

    目录 前言 动态路由 动态侧边菜单栏 总结 前言 在做Vue管理系统的时候,都会遇到的一个需求:每个用户的权限是不一样的,那么他可以访问的页面(路由),可以操作的菜单选项是不一样的,如果由后端控制,我们前端需要去实现动态路由,动态渲染侧边菜单栏. 动态路由 在本示例管理系统中,由于每个用户的权限不一样,拥有的可以访问的路由页面也不一样,用户能访问的路由页面都是后端根据权限动态配置的 我们前端需要根据后端接口返回的路由表去动态增删路由,从而生成这个用户所拥有的路由. 重点:实现动态路由api ro

  • vue实现图书管理系统

    vue实现图书管理系统

    本文实例为大家分享了vue实现图书管理系统的具体代码,供大家参考,具体内容如下 组件代码 <template> <div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <div class="book"> <div> <label for="id" v-focus> 编

  • Vue项目之学生管理系统实例详解

    Vue项目之学生管理系统实例详解

    目录 查询学生 添加学生 修改学生 删除学生 总结 查询学生 步骤1:设置导航 步骤2:添加路由 步骤3:创建页面 步骤: 步骤1:准备2个变量(pageInfo.studentVo) 步骤2:编写查询condition函数,接收参数num 步骤3:页面加载成功时,查询第一页 步骤4:遍历结果 <template> <div> 班级: <select v-model = "studentVo.cid"> <option value="

  • vue管理系统项目中的一些核心技能汇总

    目录 前言 1. Axios 拦截器和二次封装 1.1 Axios 请求和响应拦截器. 1.2 Axios 二次封装 2. Vuex 的数据持久化 3. 路由守卫和动态路由的挂载 3.1 路由守卫 3.2 动态路由的挂载 4. 环境变量的配置文件 5. 封装一个按钮级权限的自定义指令 总结 前言 很多脚手架搭建的 vue 的管理系统项目,其核心模块的处理方式大致上都是一样的. 所以,我结合之前项目,整理了一下重要模块的解决方案. 1. Axios 拦截器和二次封装 1.1 Axios 请求和响应

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

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

  • 如何使用vue3打造一个物料库

    如何使用vue3打造一个物料库

    为什么要做物料库? 我们写过很多登录页面.而每个登录页面除了一些背景图和颜色外,主体布局几乎是一致的,就那么几种类型.如果有个地方能帮我管理登录页面的代码,那么下次我再写登录的时候就可以直接把界面生成好,调逻辑就可以了. 你也许会创建一个login.txt来存放你的登录页,可随着你想保存的代码片段越来越多,你已经很难根据文件的名称来知道这个代码片段具体的展现形式,这就引出了我们要讨论的话题,如何通过构建物料库来管理可重复使用的代码片段. 物料是什么? 物料是可复用的代码片段 说到复用你也许会问,

  • VUE+Express+MongoDB前后端分离实现一个便签墙

    VUE+Express+MongoDB前后端分离实现一个便签墙

    计划来实现一个便签墙系列,这个东西做简单也简单,往复杂了做功能也很多,记录一下从零到有的开发过程吧,希望最后能把这个项目做得很完善. 首先是前后端分离架构,前端用vue,后台我们就用express,数据库用mongodb吧. 在脑袋里过一下,最最开始,要完成一个怎样的雏形呢?先把用户登录管理放在一边,当然是便签的增删改查+显示啊! 那么,我们就来实现"初号机",一张张便签的显示,增加,修改,删除. 1.怎么说也得先把样式画出来 先别管接口,先把纯前端的问题解决先,我们先来一个像模像样的

  • vue从零实现一个消息通知组件的方法详解

    本文实例讲述了vue从零实现一个消息通知组件的方法.分享给大家供大家参考,具体如下: 利用vue从零实现一个消息通知组件 平时,我们肯定用过类似element-ui,antd等一些UI框架,感受它们带给我们的便利.但当我们的需求或者设计这些框架内置的相差太大,用起来,就会觉得特别别扭,这时候,就有必要自己来重新造轮子. 重新造轮子,有几个好处,1.所有代码都是服务你的业务,没有太多用不上的东西.2.代码是由自己维护,而不是第三方,方便维护.3.提升自己的视野,让自己站在更高的角度来看问题. 好了

  • Electron+vue从零开始打造一个本地播放器的方法示例

    为什么要做? 女朋友工作是音频后期,平常会收集一些音频音乐,需要看音频的频谱波形,每次用au这种大型软件播放音乐看波形,很不方便,看到她这么辛苦,身为程序猿的我痛心疾首,于是,就有了这么一个小软件,软件涉及到的技术主要为electron,vue,node,波形的展示主要通过wavesurfer生成. 从零开始-搭建项目 项目通过vue脚手架搭建的,所以需要安装cli工具,如果已经装了,可以跳过这一步. npm install -g @vue/cli # OR yarn global add @v

  • 带你一步步从零搭建一个Vue项目

    带你一步步从零搭建一个Vue项目

    目录 一.项目创建 1.打开命令行窗口Cd /d进入想要创建项目的位置,输入vue create 项目名 2.选择Vue2 3.运行该项目 4.创建成功 二.路由的配置 1.安装路由(vue2 只能安装3版本的vue-router) 2.配置路由 三.API接口配置 1.安装axios 2.axios的二次封装 3.跨域问题 四.Vuex 总结 一.项目创建 1.打开命令行窗口Cd /d进入想要创建项目的位置,输入vue create 项目名 2.选择Vue2 3.运行该项目 4.创建成功 在浏

  • Parcel.js + Vue 2.x 极速零配置打包体验教程

    继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 "极速零配置Web应用打包工具" 简单接触了一下,单从效率上来说,确实要比 webpack 强上不少,可坑也挺多,未来升级之后应该会逐渐普及 官方文档:https://parceljs.org/getting_started.html 官方 GitHub:https://github.com/parcel-bundler/parcel 一.基本用法 Par

  • 从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    目录 项目初始化 安装router和pinia 安装ESlint eslint的vue规则需要切换 安装prettier 安装stylelint 安装husky 安装commitlint 总结 参考: 最近时间总算是闲了下来,准备着手搭建一个基础模板,为后面新项目准备的,搭建过程中遇到不少问题,现在总结下来给大家使用. 项目初始化 本项目已vite开始,所以按照vite官方的命令开始.这里使用的命令行的方式来搭建基础项目: yarn create vite my-vue-app --templa

  • 如何使用Vue3.2+Vite2.7从0快速打造一个UI组件库

    目录 1. 前言 2. 使用Vite搭建官网 2.1 创建项目 2.1.1. 全局安装vite(这里我装的时候是2.7.2) 2.1.2. 构建一个vue模板(项目名可以改成自己的名字) 2.1.3. 装好之后按照提示逐步执行命令 2.2 基本完成官网的搭建 2.2.1. 下载vue-router 2.2.2. 创建home首页与doc文档页 以及顶部导航栏 2.2.3. 配置路由 3. 封装一个Button组件 4. 封装Markdown组件介绍文档 4.1. 下载 4.2. main.ts中

  • Vue.js实现一个SPA登录页面的过程【推荐】

    技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

随机推荐