想作一個線上待辦清單引起的思考 - Node開發

啓動服務
打開VS
久違的動做
幸虧本身尚未忘記

領導有個習慣，每次都會把部門的待辦事項用excel列出來，而後郵件發送給下屬並抄送給上級，便於跟進工做事項，任務列表一更改而後再發送一遍郵件，這種管理方式沒什麼問題，可是這種操做方式實在是低效。

我決定作一個簡單的線上待辦清單，領導添加待辦事項，下屬能夠更改狀態，還有一個最關鍵的功能就是發送郵件功能，一鍵發送待辦清單給下屬並抄送上級領導，在傳統企業裏郵件真是必不可少的。

1. 數據庫準備

動手開發前先把數據庫建立了，因爲上次學習了ORM模塊，不用再在數據庫裏操做SQL語句了，直接上代碼寫上數據表的結構以及一些初始數據的導入代碼。具體示例能夠參照: 初步使用sequelize模塊 - Node實戰。

2. 前端頁面折騰

數據庫結構搞定以後，開始折騰前端頁面的設計，也不想從新寫頁面了，直接copy以前項目的代碼，短短半個小時，前端頁面就搞定了，以下圖:「PS. 結果後面又調了兩天，醉了」

前端表格使用的bootstrap table製做，與後臺數據庫的交互直接使用Ajax異步處理，如今先編寫獲取數據的API，簡單以下:

// find: 獲取table的數據
router.get('/bootstrapTable', function (req, res, next) {
  todolist.findAll({
    order: [['id', 'desc']]
  }).then(function (r) {
    res.send(r);
  });
});

一併寫完增刪改查，前臺頁面就能夠簡單的調用API就能實現一些功能了，例如添加列表功能，更改列表以及刪除列表。

3. 清單編輯功能

最近幾回開發都是使用Bootstrap Table來展示列表，這塊也是最折騰時間的地方，每次寫這個表格，老是有一堆奇奇怪怪的想法想要去實現，沒有一個總體的規劃，功能來回調整，因而在這上面浪費不少時間。此次主要折騰了字段編輯功能，以及更改列表功能。

更改表單的功能有兩種方式：一是使用modal彈出表單的方式；另外一種是行內編輯的方式；modal彈出表單的方式會添加大量的js腳本，後期管理起來很是的不方便。而行內編輯的方式，雖然不用寫大量的代碼，可是功能上就比較單一了。

整體來講，兩種方式都不是挺理想，我以爲我應該學習一些新的技術了，例如Vue。後來仍是選擇了modal彈出編輯的方式，功能作了一半，我忽然就想，爲何要有更改功能呢？，老是用開發者的思惟去作產品確定不行，開發者認爲增刪改查是最基本的功能點，而用戶在用產品的時候，其實並不同，用戶關心的是功能點，我作這個產品，面對的用戶是誰？我得好好想一想再動手......

4. 郵件功能

起初想着，在每條列表的後面加上一個操做功能-發郵件，使用簡單的mailto:lupeng@xxx.com連接，來觸發系統默認郵件客戶端來發送郵件。

後來仔細考慮了一下實際使用場景，放棄了這種方式，日常使用的時候，基本上都是表格全部的內容一併發送，來達到提醒的做用，而非督促完成每一條任務清單。另外，發送郵件最好能真正意義上的一鍵發送，須要省掉中間彈出郵件客戶端的環節。

想明白實際的使用場景後，那麼郵件的功能就須要更深刻一點，須要引入郵件模塊，取代使用客戶端的做用。

開發過程當中的一些想法，做參考，但願能給你一些啓示，項目地址： https://github.com/pengloo53/info

---