To-Do Calendar - Day30 挑戰完賽與心得總結

2022/07/11
2-minute read
SideProject

終於來到這系列的最後一篇了，從今年四月決定題目後，幾乎每天都在邊學邊嘗試用在開發作品邊寫成部落格文章，每天都過得很充實，如今回頭一望已經完成當初給自己設立的目標了，如同三年前在恆逸那段拼命學習的日子，最後結業時看著自己寫出的作品覺得一切努力都是值得的！

以下就來簡單分享這個作品及開發心得：

To-do Calendar 待辦行事曆

此為線上時間管理工具，包含待辦事項、自訂時間管理四象限的標籤顏色、原子習慣追蹤紀錄、便利貼牆等功能。

依月曆紀錄的待辦事項

可以依日期查詢出該日的待辦事項，支援待辦事項的新刪修查、拖曳排序以及修改任務完成狀態的勾選功能。
可以自訂時間管理四象限的標籤顏色，來標識任務的輕重緩急順序。
左上角的任務進度欄、To Do 清單與 Done 清單，方便使用者快速掌握當日所有的任務進度。

以年曆呈現的原子習慣追蹤紀錄

可以依年查詢出該年的原子習慣追蹤紀錄，支援原子習慣的新刪修查、拖曳排序以及紀錄日期的圈選功能。

可自行搭配紙膠帶樣式的便利貼牆

可以隨意排列便利貼的位置，支援便利貼的新刪修查以及修改便利貼顏色、紙膠帶的樣式。

為何會選擇這個專案？

想建立良好習慣和改善工作效率，藉由具體的數據紀錄呈現來增加堅持下去的動力。
靈感來自日劇《我要準時下班》中的高效工作法，使用時間管理四象限幫助釐清工作的優先順序，提升時間利用價值。

使用了什麼技術？

採前後端分離，前端使用 Vue.js，後端使用 Spring Boot，資料庫使用 MongoDB，並以 RESTful API 串接前後端。

前端

使用 Vue.js 框架
使用 Mockingbird 規劃版面設計
- Day4 網頁布局
使用 Vue CLI 開發專案
- Day1 用 Vue CLI 建立專案
使用 Bootstrap 切版
使用 Vue Router 配置路由
- Day3 用 Vue Router 配置路由
- Day6 登入驗證與 Vue Router 配置
使用 Vuex 狀態管理
- Day7 Vuex 狀態管理（上）
- Day8 Vuex 狀態管理（下）
使用 Vue-Axios 串接 API
- Day15 實作查詢列表功能（下）- 用 Axios Instance 管理 API
使用 v-calendar 實作年曆與月曆選擇器
使用 Vue Draggable 實作拖曳效果
- Day10 用 Vue Draggable 實作拖曳效果

後端

使用 Spring Boot 框架
- Day11 建立 Spring Boot 專案
使用 MongoDB 作為資料庫
- Day12 串接 MongoDB 資料庫
使用 MongoTemplate 操作 MongoDB
- Day13 實作查詢列表功能（上）- 用 MongoTemplate 操作 MongoDB
使用 Swagger 產生 API 文件
- Day22 用 Swagger 產生 API 文件
使用 Spring Security 實現認證與授權
使用 Redis 作為緩存
- Day28 Spring Security 的認證與授權（三）

哪部分你相對能掌握？哪裡花了最多時間？

主要在資料 CRUD 操作上掌握度較高，能較熟練的以 MVC 架構分析需求，拆解出所需的畫面、資料、路由及 API。花費較多時間的，主要是前後端處理認證與授權的部分。

過程中碰到什麼困難？又如何克服？

在測試 Vue router 時發現，直接在瀏覽器輸入內頁網址，導回首頁後沒有開啟登入 Modal。但同樣是未登入狀態，從首頁輸入內頁網址，卻能正常運行攔導回首頁並自動開啟登入 Modal。

當時的解決方法是先仔細觀察兩者操作上的差異，思考造成兩者不同的結果的可能性有哪些，分析出問題可能是出在 Vue 的生命週期，也就是首頁 Vue 實體的建立時機，所以在 created hook、mounted hook 和 router 都加了 log，透過 console 打印的結果印證了想法後，便制定出了解決方法。
由於在瀏覽器輸入內頁網址，在進到內頁網址之前，會先被導航守衛攔截後提交 isLoginModalOpen 為 true，導回首頁才執行 created function 和 mounted function。而 Vue 實體是在導航守衛導回首頁之後才建立，所以無法監聽到在建立之前的 isLoginModalOpen 狀態改變，來打開登入 Modal。
解決方法是在 mounted function 補上一個判斷，如果 isLoginModalOpen 為 true，就開啟登入 Modal，代表這是直接在瀏覽器輸入內頁網址過來的，因為可以在 Vue 實體建立前就提交 isLoginModalOpen 為 true 的就只有 router 了，補上之後後續登入 Modal 又能正常運作。

詳細請看：Day9 Vue Router & Vuex 問題解決紀錄

挑戰心得總結

雖然我是後端工程師，但像這樣透過做 Side Project 接觸一些前端的技術也覺得挺有趣的，可以學習到不一樣的思維與觀念，像是《使用 Axios 你的 API 都怎麼管理？》就是蠻聰明的作法，將 API 封裝統一管理、集中設定 Request Config，再搭配 reponse 攔截器就可以制定出一致的錯誤處理，這樣就能有條理地管理 API。

也發現前端和後端的相似之處，像是各種前端框架的官方 CLI，能快速建置一個立即可用的開發環境，而 Spring Boot 也像是 Spring 框架的腳手架，透過約定優於配置的理念，只要遵循定義好的規則（例如目錄結構、默認的配置文件），就能達到開箱即用的效果，而自動化帶來的好處一是提升開發效率，二是降低學習門檻，算是目前的主流趨勢吧。

這個作品主要還是練手用的，算是彌補在上一份工作中一直沒機會用的遺憾，希望能夠透過 Side Project 來作為一個入門，所以很多知識點都只是點到為止，以專案完成度上來說還有很多地方可以再去擴展，像是 RBAC 權限管理、MongoDB 進階的查詢方法、部署到 Heroku 等等，未來如果剛好在工作上碰到的話，可能就會再另開一個系列來寫學習紀錄。

最後感謝一下一直堅持努力的自己，恭喜完賽！