網購平台應用-果乾專賣店

專案介紹:
由於家裡本身務農,家中長輩也有在做一些自製的果類醃製品、果乾等食品,所以想說可以自己運用自己所學做個網購平台來讓這些好吃的東西分享出去。

專案功能:

首頁
註冊/登入 功能
商品列表、商品詳情
使用者Q&A
購物車(統計商品)
訂單確認(下單給賣家)
訂單查詢功能
首頁

註冊/登入 功能


商品列表、商品詳情


使用者Q&A

購物車(統計商品)

訂單確認(下單給賣家)

訂單查詢功能

重點技術:
技術1.Django 前端base.html應用
在接觸到Django之前,前端的頁面都是一頁一頁編寫,使用base繼承頁面省去很多修改、新增等的工作,可以將前端編寫最大化的去除重複步驟,避免修改一個功能就要大費周章地去改很多地方。

技術2.前端標籤各種事件

即時計算商品價錢功能
實現即時計算商品價錢功能,查找關於html標籤的各類event,在使用者手動修改商品數量後即可自動將商品總價計算好。


技術3.後端應用(登入驗證):
1.裝飾器運用
利用裝飾器可以完成類似”驗證”的功能,並且減少code重複,而且整理起來也比較清楚易懂。
2.Session運用
我在用戶登入後使用session紀錄用戶名稱,來實踐用戶登入驗證功能。

技術4.Google mail 連動
使用者下單後的通知功能,我選擇使用簡單的Gmail連動通知,使用者完成下單步驟後,系統自動將下單的詳細資訊mail給使用者。

專案心得分享:
前端版面呈現
雖然緊急惡補了許多高手的作品,但還是因不熟悉前端導致功能陽春,做起來就是不理想。
那時候也還沒有RWD的觀念,網站只適合用瀏覽器觀看,若用手機/平板觀看格式就會跑掉,但在學習了Bootstrap之後終於獲得了改善,建議大家好好使用。
後端邏輯處理
課程學習時的我們很幸福,老師在講解的時候或多或少都已經給了大部分的方向了。
到了第一次要自己做專案的時候,從零開始構想,腦袋就會一片空白。
專案該如何下手? 我的解法是:當冒出一絲想法就立馬先寫下來,再去想如果要變成這樣的結果我需要做什麼事情,這樣一步一步的將自己思緒梳理出來,除了從頭想到尾有時候也可以試試反思,成效會出乎意料的好!
後端相互應用
達內的專案製作處於自己開發的狀況,所以前後端的溝通都是自己想到名子就用,很是便利。
工作後的我開始接觸大專案,有機會跟其他公司或團隊合作時就會發現前後端協議的重要性,當大專案如果協議沒有訂清楚,不管是在除錯或是新增東西的時候都會滿不順利的,所以在看過很多前輩寫的功能之後,我開始會把功能獨立出來,可以降低Code的重複性還可以直接調用,要改也只需要改一個地方,會變得比較簡單&一目了然,建議大家專案時就可嘗試練習!
Comments