The Nap Store

Demo

https://nedbe.github.io/the-nap-store-demo/#/home

主要技術

• Vue
• Vue Router
• Vue Cli4
• JavaScript
• jQuery
• ESlint(Airbnb)
• Bootstrap 4
• SCSS
• AJAX
• RWD(375px、768px、1024px)

主要套件

• Vue-axios
• Vue-loading-overlay
• Vue-awesome-swiper
• Vee-validate
• Font Awesome

網頁架構與功能

前台

• 首頁－圖片輪播、網站簡介、聯絡表單
• 商品列表－切換分類、價格排序
• 商品介紹－加入購物車、瀏覽商品紀錄
• 購物車－調整數量、刪除商品、更新購物車
• 結帳頁－套用折扣碼、結帳

後台

• 管理者登出入
• 訂單管理－修改與取消訂單
• 商品管理－新增、修改與刪除商品
• 折扣碼管理－新增、修改與刪除折扣碼

網頁畫面

前台

• 首頁

• 商品列表

• 商品介紹

• 購物車

• 結帳頁

後台

• 管理者登入

• 訂單管理

• 商品管理

• 折扣碼管理

作品圖片來源

• unsplash
• designevo

聲明

本作品所載之內容與圖片僅為個人練習使用，並無任何商業用途。