2023-08-11|閱讀時間 ‧ 約 3 分鐘

Project-記帳本

    選擇此專案的原因

      現在人奢侈花費變多,常常到月底回想不起自己金錢的去向,因而產生無止境的焦慮,因此希望做一個精簡的記帳專案,讓大家可以輕鬆地記錄自己的支出,還能檢視不同類別的花費以做開銷調整。

    使用的技術

    1. 用express-handlebars作為此專案的引擎樣板,並搭配connect-flash套件去給予使用者一些錯誤或成功的提示,以提升使用者感受
    2. 用mongoose操作mongodb
    3. 用method-override套件,使得路由命名符合RESTful 風格
    4. 用passport.js作為驗證系統之認證使用者的部分,而儲存認證結果則用express-session
    5. 用bcryptjs將註冊者的密碼加密
    6. 用dotenv將私密資訊另外紀錄
    7. 使用async/await 方式處理非同步函式

    實作心得

      雖不是第一次做專案,但還在摸索自己實作過程時的順序,常常有想法卻會猶豫該從哪裡開始,也因這個專案發現這個問題,有特地停下來思索出一個目前認為較適合自己的開發順序。

      比較挫折的部分是Html,花了很多時間在調整樣式,一直以來都是用flexbox的方式去做版面的對齊,但發現當內容物每列長度不一,而想要每列的欄區塊對齊時,實作上會有難度,後來查找「欄列對齊」的相關資料,發現有grid可以簡單的解決此問題,因此在new.handlebars內就有用到此方法。

      而此專案我選擇用async/await方式處理非同步函式是因為在閱讀程式碼時,能更直覺知道執行順序。印象深刻的部分是在使用try{}把非同步部分包起來時,原先看網路範例以為只要包住前面有await的函示就好,結果執行時就發生錯誤,才發現若只是包住單行,而下面的變數會有跟此非同步函是有關的部分,並不會等待非同步那行執行完,因此會找不到資料,故要將所有跟非同步相關的部分就包在try{}內,才能正確執行。

    反思

      開發流暢度可透過建立一個固定的開發步驟去提升;平時可多看bootstrap文件了解裡面可使用的東西,並再多熟悉html本身的內設和屬性,以提升切版速度;此外對於此專案使用的大多技術都尚處於半知半解的狀態,期望自己能再多理解背後相關概念,並再未來開發時多使用這些套件內的不同功能以加深對套件的熟悉程度。



    分享至
    成為作者繼續創作的動力吧!
    © 2024 vocus All rights reserved.