项目作者: Amos-Do
项目描述 :
高级语言: Vue
项目地址: git://github.com/Amos-Do/Mr_Houdao_store.git
Mr. Houdao 厚道先生果醬電商

Demo
https://amos-do.github.io/Mr_Houdao_store/
簡介
完整電商前後台網站,後台能讓店家自行上架商品、查看訂單以及設定優惠券等功能,前台電商網站能讓消費者享受瀏覽網站,了解厚道先生對商品的用心,凸顯厚道先生的特色,並且完整的購物流程,能讓消費者買到健康又美味的果醬。
本專案選擇開發者非常喜歡的品牌與形象,自行接洽厚道先生進行合作,取得厚道先生之品牌授權,才能順利完成果醬電商。
此作品的功能有:
- 前台
- 首頁:介紹與導覽
- 購物商場:多項商品分類以及單一商品細節、商品列表、加入購物車
- 購物車:使用優惠券、調整商品(數量增減、刪除)、查看購物車商品項目,無產品時引導至購物商場
- 下單購買 / 訂單結帳
- 後台登入(登入頁) / 進入後台
- 後台
- 商品管理:商品的管理(新增/刪除/修改產品)
- 訂單管理:查看訂單狀況
- 優惠券管理:優惠券的管理(新增/刪除/修改優惠券)
主要練習
- Vue.js
- VueCLI (3)
- Vuex 管理
- VueRouter
- VeeValidate 驗證
- 元件概念
- Webpack
- Ajax串接API、ES6
- Bootstrap 4 + 搭配手刻前台SCSS(後台使用 SB Admin 2)
- RWD(支援 iphone 5)
使用的 Plugin
前台介紹
loading 動畫
厚道先生圖像動畫,凸顯品牌特色

首頁
使用 Carousel 輪播 banner 展現厚道先生健康清晰特色

品牌與產品特色

透過不同色塊呈現厚道先生介紹產品與來源,與顧客拉近距離

呈現最新上架的商品

購物商場
- 可透過分類連結選取特定分類
- 滑鼠滑入商品照片時,可進入詳細商品介紹

詳細商品介紹
點擊增減想要購買數量,並且計算出金額

購物車
建立訂單頁面

如果回到上一頁,導航守衛會做出判斷,減少訂單尚未完成而退出

付款頁面

結帳完成

後台介紹
登入

商品管理

訂單管理

優惠券管理

過濾功能
聲明
- 圖片和資料來源皆來自於厚道先生
- 本作品內的圖片與內容,純粹為個人練習技術使用,不做任何商業用途。