Cat Coffee 貓咖啡電商網站

發佈時間

簡介#

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


創店理念#

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

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

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


專案說明#

  • 使用 Vue.jsVue 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 儲存使用者收藏紀錄

購物車#

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

訂單填寫#

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

訂單建立#

後台頁面介紹#

商品管理頁面#

訂單管理#

優惠卷管理#


相關連結#