貓咖啡 電商咖啡店

貓咖啡 提供來自全世界的精品咖啡豆，即使生活在疫情時代，也能透過網站購買各式咖啡，除了基本咖啡豆以外，還有、冷萃咖啡、掛耳包、精品禮盒等等，讓你自己喝、一起喝、送別人喝都不成問題！

Demo : 貓咖啡

創店理念

咖啡一直都是工作者們必備的良藥，尤其對工程師而言，在平常生活中，我喜歡帶上筆電，到咖啡廳中點一杯拿鐵，聽著店內的lofi音樂，不僅環境舒適，咖啡也帶給我源源不絕的能量，大幅提升我的學習品質。

而近兩年，隨著疫情不斷變得嚴重，許多公司開始宣布遠端工作，而且可能長達數月以上。 剛開始，工程師們可能會選擇到咖啡廳工作，不但保留人與人接觸的時間，也能喝到一杯絕佳的咖啡，保持工作品質，但伴隨著確診人數的增加，漸漸的，到咖啡廳工作，也變成是一種奢侈，

為了廣大工作者們著想，貓咖啡推出電商網站，雖不能與各位見面，但我們將精心挑選的咖啡豆，送至家中，讓您即使在家工作，也彷彿在咖啡廳般享受！

---

專案說明

• 使用 Vue.js 和 Vue CLI 進行開發
• 使用 Vue Router 路由設定
• 使用 Vue Axios 串接後台 API 資料
• 使用 props emit Mitt 進行元件間資料的傳遞
• 使用 Bootstrap 5 Css框架完成版面
• 使用 ESlint Standard 控管程式碼品質
• 使用 Git 版本控制

使用技術

• Vue 2
• Vue Cli
• Vue Single-File Components
• Vue Router
• Vue Axios
• VeeValidate
• Vue-loading-overlay
• Vue-sweetalert2
• mitt
• Bootstrap5
• Bootstrap5 Icons
• FontAwesome
• Swiper
• Animate
• AOS
• LocalStorage

前台

• 商品展示：首頁、商品列表、商品介紹等
• 收藏清單：新增、編輯、刪除收藏商品
• 購物車：新增、刪除及編輯商品數量
• 優惠卷：使用優惠卷可享全館8折
• 訂單：表單驗證顧客資料

後台

• 管理者登入驗證
• 商品管理：新增、編輯、刪除
• 訂單管理：編輯部分訂單資訊、刪除
• 優惠卷管理：新增、修改、刪除

---

前台頁面介紹

首頁

商品列表

收藏清單

• 利用 LocalStorage 儲存使用者收藏紀錄

購物車

• 可任意修改購買的商品數量（不得為負值）
• 可套用優惠卷

訂單填寫

• 紅色星號為必填項目
• 每個欄位皆有格式驗證

訂單建立

後台頁面介紹

商品管理頁面

訂單管理

優惠卷管理

---

更多資訊歡迎前往 貓咖啡 進一步觀看！