此作品使用於:當作模板,以後有製作類似網站可拿來參考

品牌介紹

宅配須知

專案動機
1.因本身喜愛美食&甜點,身邊友人有在做甜點,所以就以各種美味的蛋糕購物網站成為這次專案的動機。
2.初步構思時,參考了各家之名的甜點(亞尼克等),並且了解各家網店的功能來綜合實現。
3.去年因疫情關係,電商網購市場發展已衝破歷年來的高點,許多品牌創立之初就以電商為出發點。

重點技術
技術1.會員註冊
當會員註冊時,調用持久層查詢email的方法,如果不為null的話則表示此email已註冊過,拋出異常並alert前端畫面上。
當註冊時輸入的密碼需要另外加密,所以必須設定salt(UUID.randomUUID()) + 密碼一同加密,這樣就算加密後的密碼被竊取,也無法反向解碼得到原密碼。

會員登技術2.
登錄時,調用持久層查詢email是否存在的方法,如不存在則表示此email尚未註冊並拋出異常並alert顯示在前端畫面上。
利用前面調用查詢email的方法取得返回值result來得到Salt,和前面輸入的密碼一同加密,並與資料庫裡加密後的密碼進行比對。

技術3.保持會員登錄狀態
使用Session來取得登錄時的數據,調用方法查詢uid的數據,數據封裝為JsonResult返回。
在前端頁面使用JQuery和$.ajax來實現對後端發請求取得資料庫裡的資料並使用.text()和.attr()改變標籤裡的內容和鏈結。

技術4.登錄攔截器
非會員瀏覽某些頁面時(如購物車)、或是登入過期時,攔截器給予攔截並重定向到登錄頁。
並設定白名單頁面讓非會員可以瀏覽。

技術5.顯示商品列表
每種商品在資料庫裡都有它的類別ID,在前端頁面的選單標籤上設定type-id與value,並使用JQuery與$.ajax向後端發起請求獲得商品列表的數據。

技術6.購物車(關聯資料庫)
將商品加入購物車裡,並可調整數量,小計與總計的金額會隨著數量增減而改變。
不需此商品的話可直接刪除並跳出alert視窗確定是否刪除,總金額也會隨之變化。

技術7.訂單確認並送出
結帳後顯示會員的購物車數據(使用關連資料庫)並從該會員的資料庫裡取得收件人資料。
將訂單送出後,轉到訂單完成頁面,顯示該筆的訂單編號。


技術8.顯示訂單詳情&列表
使用關聯資料庫來獲取訂單詳情。
每筆訂單編號都是獨立,點擊該訂單編號會進入到訂單詳情頁。

技術9.忘記密碼-發送郵件
使用Spring Mail來配置文件並在pom.xml增加依賴。
送出郵件後,使用JQuery來顯示或隱藏跑圖,避免點擊多次造成Server負擔。
在該實現類方法裡,設定要發送的郵件內容並加上token來當作驗證信件。

技術10.忘記密碼-密碼重置
點擊email裡面的鏈結後 ,顯示密碼重置頁面,並在該方法裡加判斷新密碼與確認新密碼一致時便可送出完成重置密碼。
創建token時,設定5分鐘限制,超過時間未認證會轉發到錯誤頁面。

專案心得&教學回饋
專案開發讓我很頭痛的是:有時會想到新增某些功能卻不知該如何實現...
但還好有老師的指導,再帶領下實現這些功能就不是問題。
再來無法避免的是:當初設計功能時往往有些地方沒考慮進去,致於花很多時間來修改bug...
但就是這些經驗讓我編碼功力更加進步,不管是前後端、資料庫或Linux 都讓我學到很多。
最後要感謝我的指導老師 Charlie 和小幫手老師們不厭其煩地解決我的問題,也感謝崔崔追縱進度讓我能夠如期完成。
Comments