iT邦幫忙

2026 iThome 鐵人賽

DAY 7
0

https://ithelp.ithome.com.tw/upload/images/20260908/201839499q8cWzDck0.jpg
今天主要是重新整理記帳 App 的資料結構,讓每筆記帳資料不只是記錄「名稱、金額和分類」,還能知道這筆交易是收入還是支出,以及發生的日期,為之後做按月、按日分類和金額統計打下基礎。
資料結構前後對照
原本結構:
https://ithelp.ithome.com.tw/upload/images/20260908/20183949FFhmUhNX9G.png
後來的結構:
https://ithelp.ithome.com.tw/upload/images/20260908/20183949io0VnZq7fR.png

https://ithelp.ithome.com.tw/upload/images/20260908/20183949CvI6rLfUhV.jpg
除了這些,我也學到了 .padStart() 的用法,可以把月份和日期補成兩位數,確保格式符合 HTML 的要求。
在修改的時候,我也調整了表單的驗證方式。
https://ithelp.ithome.com.tw/upload/images/20260908/20183949bFoGMzONTb.jpg
原本要求使用者一定要輸入項目名稱和金額,這次改成只要有輸入金額就可以完成記帳。如果沒有填寫名稱,列表中就會顯示分類名稱,讓記帳流程更快速、彈性也更高。
https://ithelp.ithome.com.tw/upload/images/20260908/20183949tW9gUvrO6X.jpg
我也順便處理了資料的排序,利用 Object.keys().sort() 搭配 localeCompare(),讓月份可以按照最新到最舊的順序排列,方便之後使用者查找不同月份的記帳紀錄。
在給其他使用者使用前,測試一定是最重要的,隨著功能越做越多後,資料結構也需要跟著調整。一開始看起來只是增加幾個欄位,但其實這些資料會直接影響之後的分類、統計和畫面呈現,帶給使用者的感覺也會隨之不同。

下面是第七天的成果展示:
https://ithelp.ithome.com.tw/upload/images/20260908/20183949bK6blLAFOd.jpg


上一篇
Day 6|從資料保存到 Bug 排查:記帳 App 的問題解決
下一篇
Day 8|實作記帳資料的編輯與更新功能
系列文
Vibe Coding 實戰手冊:30 天打造具備預算控管與數據視覺化的 React 記帳應用9
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言