Vue+Koa+MongoDB从零开源一个任务管理系统
<blockquote><p>GitHub 地址：https://github.com/dom-bro/task-manager</p>
</blockquote>
<p>大概是在18年的时候，当时还没有疫情。当时工作中同时负责多个项目，有 PC 端运营管理后台的，有移动端 M 站的，有微信小程序的，每天 git 分支切到头昏眼花，每个需求提测需要发送邮件，而且周五要写烦人的周报，我就萌生了做一个任务管理系统的想法。其实不管是日常需求还是处理线上 bug，都可以看作一个个大大小小的任务。这些任务有排期，prd，项目分支，开发测试人员等关键因素，在开发过程中这些都会得到明确，从而根据这些信息推导出提测邮件内容，进而通过排期时间区间汇总出周报。</p>
<p>说干就干，花了两个周末。</p>
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4db73866490f4880aad930ef4618a994~tplv-k3u1fbpfcp-watermark.image?" width="100%" style="max-width: 1000px">
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4e040d5c3a344abb9adbe0bb2641332~tplv-k3u1fbpfcp-watermark.image?" width="100%" style="max-width: 1000px">
<p>基本上就是任务的增删改查。</p>
<p>使用的技术栈如下：</p>
<pre><code class="language-sh"># 前端
less
vue2
element-ui
# 后端
node
koa
# 数据库
由于当时对 mongodb 不熟悉，又想快速原型，选择了直接操作 json 文件的方式😄
</code></pre>
<p>尽管如此简陋，但我还是比较满意的，由于这时就我自己在用，功能基本够用。此时的关注点主要在 3 个要素</p>
<ul>
<li>任务的排期，汇总周报的依据</li>
<li>任务的状态
<ul>
<li>未开始，那些已提上日程但未着手开始的任务</li>
<li>开发中，进行中的工作</li>
<li>已提测，这种状态的任务的主要工作是修改 bug</li>
<li>已完成，发布上线了的任务，无需再继续关注，汇总周报，季报的时候会用到</li>
</ul>
</li>
<li>任务的项目分支，在多任务多项目并行时特别有用</li>
</ul>
<p>我就把它定为 1.0 版本吧</p>
<p>后来，我也开始借鉴市面上的任务管理工具，比如 tower，trello， teambition 等发展成熟的产品。</p>
<p>经过两年的改进和迭代，它已经变成了现在的样子。</p>
<img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a99ebf425d42463aac7c8f6554a4607a~tplv-k3u1fbpfcp-watermark.image?" width="100%" style="max-width: 1000px">
<p>支持卡片拖动去改变任务状态</p>
<p>画了一个甘特图去直观的展现任务排期跨度<br>
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1d2c594ef324514b92632d6fed4a701~tplv-k3u1fbpfcp-watermark.image?" width="100%" style="max-width: 1000px"></p>
<p>模仿 github 日历图，排除掉周末节假日，直观体现每天的任务并行情况<br>
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8634e29852d84277bb441a91431f08b0~tplv-k3u1fbpfcp-watermark.image?" width="100%" style="max-width: 1000px"></p>
<p>此时数据库也已经切换到了 mongodb</p>
<p>我就把这时的系统定为 2.0 版本吧</p>
<p>岁月荏苒，时光如梭。疫情不断反复，前端的技术也已翻天覆地。为了与时俱进，准备把这个项目用最新的技术重写一下。</p>
<p>具体计划如下</p>
<pre><code class="language-sh"># 主要是前端 vue
vue cli -> vite
vue2 -> vue3
</code></pre>
<p>最好的学习方式莫过于边学边练完成一个项目。</p>
<p>我准备接下来围绕这个项目更新一个系列，期间会涉及到下面这颗树的枝干。同时分享一些几年开发生涯的所思所想。<br>
然鹅并不会对哪个技术做过多的纠缠，我想做的是引出枝干，如果想做到枝繁叶茂硕果累累，我想官网是营养最高的地方。</p>
<img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d4b341a7f1e74c848edfdadf6d2a59cd~tplv-k3u1fbpfcp-watermark.image?" width="100%" style="max-width: 1000px">
<p>感兴趣的同学欢迎关注更新。</p><br><br>
来源：https://www.cnblogs.com/iovec/p/16596186.html
頁:
[1]