项目作者： 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 展現厚道先生健康清晰特色
品牌與產品特色
透過不同色塊呈現厚道先生介紹產品與來源，與顧客拉近距離
呈現最新上架的商品
購物商場
- 可透過分類連結選取特定分類
- 滑鼠滑入商品照片時，可進入詳細商品介紹
詳細商品介紹
點擊增減想要購買數量，並且計算出金額
購物車
建立訂單頁面
如果回到上一頁，導航守衛會做出判斷，減少訂單尚未完成而退出
付款頁面
結帳完成
後台介紹
登入
商品管理
訂單管理
優惠券管理
過濾功能
聲明
- 圖片和資料來源皆來自於厚道先生
- 本作品內的圖片與內容，純粹為個人練習技術使用，不做任何商業用途。
