Vue+Koa+MongoDB從零打造一個任務管理系統的詳細過程

Posted on by

大概是在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任務管理系統內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：