使用Vue+PouchDB作一個本地的ToDoList

首先在這裏給你們拜個晚年，祝你們新年愉快，編程功力節節高升~~

我本身有制定年度規劃的習慣，以前也一直在用OneNote在作。OneNote雖然好用，但是沒有相關統計功能。這樣就不容易把握計劃制定的是否合理。因而就趁着放假，順手作一個簡單的ToDoList小程序。

需求分析

這個項目就先叫他EasyTodoList吧。不過先別急着動手，先利用腦圖簡單整理一下需求。這樣既能夠清楚地知道須要哪些東西以及從哪下手，也能夠防止在作的過程當中歪樓。

技術選擇

技術方面Vue和vue-router相信不會有什麼問題，畢竟是如今的主流之一。因此這一次的主要問題是在存儲的選擇上。

首先，先去掉MySQL和MongoDB，由於這僅僅只是一個小項目，數據量也不是很大。所以沒有必要上後端的東西。 那麼剩下就是客戶端存儲了。在客戶端存儲中，storage只能進行簡單的key-value存儲，沒有查詢和統計的功能；而WebSQL雖然用起來很爽，但已是不在維護的項目了，因此也不推薦使用了；最後就是IndexedDB了，IndexedDB是目前比較推薦的客戶端存儲技術了。相似於MondgoDB的NoSQL數據庫。由於原生API相對繁瑣，爲了簡化開發，這裏就使用二次開發的PocuhDB來做爲客戶端存儲（API調用很簡單，參考一下官網就能搞定）。（關於客戶端存儲的相關內容能夠查看我以前的文章客戶端存儲技術）

須要注意的是，IndexedDB也是客戶端存儲的一種，天然也有客戶端存儲的特性。那麼當改變瀏覽器或者改變監聽端口時，以前存儲的數據天然也就消失不見了（至關於從新換了個數據庫），這在使用上或多或少帶來了不便。

效果展現

先來看一下最終作出來的效果。

整個項目比較簡單，只有總覽以及任務列表兩個頁面。在添加了任務分類以及分類下的任務後，在總覽頁面就會有相關統計。在設置任務完成後，也會統計完成與未完成的任務的比例以及圖表。圖表部分是用Echarts來進行繪製的，繪製的方法也能夠參考官方文檔。

由於代碼量很少也就不在這裏多囉嗦了。詳細代碼能夠來個人GitHub上參觀指導。 項目地址：EasyTodoList

總結

整個項目在技術上沒有難點，是個很容易擼的項目。結合了前端存儲（IndexedDB），雖然簡化了開發也帶來了使用上的不便。不過做爲一個練手的項目應該是比較不錯的了。由於存儲的問題很是尷尬，因此接下來考慮移植到Electron上，直接作成一個App來避免這個問題。