首先在這里給大家拜個(gè)晚年，祝大家新年愉快，編程功力節(jié)節(jié)高升~~

我自己有制定年度規(guī)劃的習(xí)慣，之前也一直在用OneNote在做。OneNote雖然好用，可是沒(méi)有相關(guān)統(tǒng)計(jì)功能。這樣就不容易把握計(jì)劃制定的是否合理。于是就趁著放假，順手做一個(gè)簡(jiǎn)單的ToDoList小程序。

需求分析

這個(gè)項(xiàng)目就先叫他EasyTodoList吧。不過(guò)先別急著動(dòng)手，先利用腦圖簡(jiǎn)單整理一下需求。這樣既可以清楚地知道需要哪些東西以及從哪下手，也可以防止在做的過(guò)程中歪樓。

EasyTodoList 項(xiàng)目需求

技術(shù)選擇

技術(shù)方面Vue和vue-router相信不會(huì)有什么問(wèn)題，畢竟是現(xiàn)在的主流之一。所以這一次的主要問(wèn)題是在存儲(chǔ)的選擇上。

首先，先去掉MySQL和MongoDB，因?yàn)檫@僅僅只是一個(gè)小項(xiàng)目，數(shù)據(jù)量也不是很大。因此沒(méi)有必要上后端的東西。
那么剩下就是客戶(hù)端存儲(chǔ)了。在客戶(hù)端存儲(chǔ)中，storage只能進(jìn)行簡(jiǎn)單的key-value存儲(chǔ)，沒(méi)有查詢(xún)和統(tǒng)計(jì)的功能；而WebSQL雖然用起來(lái)很爽，但已經(jīng)是不在維護(hù)的項(xiàng)目了，所以也不推薦使用了；最后就是IndexedDB了，IndexedDB是目前比較推薦的客戶(hù)端存儲(chǔ)技術(shù)了。類(lèi)似于MondgoDB的NoSQL數(shù)據(jù)庫(kù)。因?yàn)樵鶤PI相對(duì)繁瑣，為了簡(jiǎn)化開(kāi)發(fā)，這里就使用二次開(kāi)發(fā)的PocuhDB來(lái)作為客戶(hù)端存儲(chǔ)（API調(diào)用很簡(jiǎn)單，參考一下官網(wǎng)就能搞定）。（關(guān)于客戶(hù)端存儲(chǔ)的相關(guān)內(nèi)容可以查看我之前的文章客戶(hù)端存儲(chǔ)技術(shù)）

需要注意的是，IndexedDB也是客戶(hù)端存儲(chǔ)的一種，自然也有客戶(hù)端存儲(chǔ)的特性。那么當(dāng)改變?yōu)g覽器或者改變監(jiān)聽(tīng)端口時(shí)，之前存儲(chǔ)的數(shù)據(jù)自然也就消失不見(jiàn)了（相當(dāng)于重新?lián)Q了個(gè)數(shù)據(jù)庫(kù)），這在使用上或多或少帶來(lái)了不便。

效果展示

先來(lái)看一下最終做出來(lái)的效果。

效果圖

整個(gè)項(xiàng)目比較簡(jiǎn)單，只有總覽以及任務(wù)列表兩個(gè)頁(yè)面。在添加了任務(wù)分類(lèi)以及分類(lèi)下的任務(wù)后，在總覽頁(yè)面就會(huì)有相關(guān)統(tǒng)計(jì)。在設(shè)置任務(wù)完成后，也會(huì)統(tǒng)計(jì)完成與未完成的任務(wù)的比例以及圖表。圖表部分是用Echarts來(lái)進(jìn)行繪制的，繪制的方法也可以參考官方文檔。

因?yàn)榇a量不多也就不在這里多啰嗦了。詳細(xì)代碼可以來(lái)我的GitHub上參觀(guān)指導(dǎo)。
項(xiàng)目地址：EasyTodoList

總結(jié)

整個(gè)項(xiàng)目在技術(shù)上沒(méi)有難點(diǎn)，是個(gè)很容易擼的項(xiàng)目。結(jié)合了前端存儲(chǔ)（IndexedDB），雖然簡(jiǎn)化了開(kāi)發(fā)也帶來(lái)了使用上的不便。不過(guò)作為一個(gè)練手的項(xiàng)目應(yīng)該是比較不錯(cuò)的了。因?yàn)榇鎯?chǔ)的問(wèn)題非常尷尬，所以接下來(lái)考慮移植到Electron上，直接做成一個(gè)App來(lái)避免這個(gè)問(wèn)題。