仿番茄土豆的線上webApp
前言
- 這次專案重點體驗typescript與react的結合，直接使用官方腳手架create-react-app搭建環境。
- 專案中資料統計圖形使用HTML5的Svg展示。
- 專案採用前後端分離開發模式。後端介面需要appkey才可以使用。
專案地址
專案預覽
實現功能
- 簡單使用者系統---登陸/註冊/路由鑑權
- 番茄鬧鐘---25分鐘定時鬧鐘
- 待辦任務---番茄鬧鐘期間完成待辦任務，自動記錄到番茄描述中
- 資料統計
- 月統計資料---每月累計量 & 增長率 & 平均量
- 番茄歷史統計---每日記錄（可刪改），可手動新增番茄記錄
- 待辦任務統計---每日記錄（可刪改）
技術棧
- react（部分component使用hook）
- react-router
- redux+redux-thunk
- ant-d
- typescript
- scss
- axios
預覽
- 登陸& 註冊
- 首頁（主頁面）
-
番茄 & 任務
-
月統計資料
-
番茄歷史
手動新增番茄
完成的番茄歷史
被打斷的番茄歷史
-
任務歷史
完成的任務歷史
刪除的任務歷史
實現細節
- 封裝axios，生成例項。使用攔截器處理後端傳來的token
- 關於redux & thunk
- 這次專案主要按照不同模組劃分store：tomatoes儲存處理番茄鬧鐘的資料，todos儲存處理待辦任務的資料，user負責使用者系統的資料。
- 由於非同步處理不太複雜，因此使用thunk來dispatch 一個 function action 來處理非同步資料即可。
- 由於redux中tomatoes和todos兩個模組的資料是無耦合的，但是在番茄鬧鐘運作時，番茄的描述需要與待辦任務相關聯。這個功能的處理比較一波三折。 第一次實現的思路是每次完成一個todo的時候，都傳送一個請求到後端記錄當前todo到當前tomato中，但這樣每次完成todo時，需要傳送請求並且處理當前tomato的資料，這樣比較麻煩，而且我希望兩個模組間的資料間天然解耦，因此捨棄了這個方案。 第二次實現思路是將todos的資料用props傳遞到tomato元件，每當todos發生變化時提取completed todo，並根據todo來修改tomato元件的state（description），這個處理比較危險，因為需要在componentDidUpdate這個生命週期裡setState，需要很謹慎處理，否則會陷入無限迴圈。在多次嘗試後，選擇放棄。 最後，我將番茄的描述--description提升到redux中，每次完成一個todo時， tomatoes也根據這個action type來處理tomatoes模組。將todo記錄到description中。
- 關於container的設計，我只將route component作為container，因為這個專案的元件設計並不複雜，如果每個元件都connect，顯得更繁雜。不同元件各司其職豈不更好？
- 使用thunk後，action可以是函式。因此在路由鑑權這部分的工作，我也一併放在action這裡處理了（登陸、註冊後也需要路由跳轉），所以並沒有使用browserRouter自帶的history，而是自己封裝了一個history。
- 這次專案的資料統計圖---折線圖/條形圖等使用Svg來展示，SVg相比canvas，它不依賴解析度，是基於向量的影象，因此即使在放大或改變尺寸的情況下也不會失真。