vue store
1.0.0
2020年寒假尤其特殊，因為新型冠狀病毒肺炎疫情，學校至今未開學。想起上學期利用課餘時間學習了Vue.js 、 Node.js ，一直想做個完整的專案實戰一下，但之前在學校並沒有那麼多的時間。現在剛好有時間，就想著要做一個專案鞏固之前學到的東西。
思來想去，最後決定模仿小米商城做一個電商專案。可能時間隔得有點久了，之前學的東西很多都差不多忘記了，做這個專案基本上都是看著官方的文檔一點一點做的。在家裡也免不了有各種各樣的事情耽誤了專案的進度。現在終於差不多做好了，分享出來，新手上路，如有錯誤，請多多指教。
本專案前後端分離，前端參考小米商城實現，但與小米官方沒有關係，純屬個人瞎搞，若需要購買小米產品請到小米官方商城。
這是本專案的前端，後端請移步到store-server 。
前端已經部署在阿里雲，歡迎造訪http://101.132.181.9/ （沒有相容於行動端，請使用電腦存取）。
後端也已經部署在阿里雲，介面位址已經修改為線上位址，本地運行前端也可以正常存取後端。
本人在讀本科大三，今年暑假即將開始實習，後面的時間可能沒有那麼的自由，但會不定期的更新完善該項目，如有問題請直接在Issues 中提。
如果覺得這個項目還不錯，您可以點右上角
Star支持一下， 謝謝！ ^_^
本專案前後端分離，前端基於Vue + Vue-router + Vuex + Element-ui + Axios ，參考小米商城實作。後端基於Node.js(Koa框架) + Mysql實作。
前端包含了11個頁面：首頁、登入、註冊、全部商品、商品詳情頁、關於我們、我的收藏、購物車、訂單結算頁面、我的訂單以及錯誤處理頁面。
實現了商品的展示、商品分類查詢、關鍵字搜尋商品、商品詳細資訊展示、登入、註冊、用戶購物車、訂單結算、用戶訂單、用戶收藏清單以及錯誤處理功能。
後端採取了MVC模式，根據前端所需的資料分模組設計了對應的介面、控制層、資料持久層。後端傳送位址store-server 。
前端： Vue + Vue-router + Vuex + Element-ui + Axios
後端： Node.js 、 Koa框架
資料庫： Mysql
頁面使用了element-ui的Dialog實現彈出蒙版對話框的效果，登录按鈕設定在App.vue根元件，透過vuex中的showLogin狀態控制登入框是否顯示。
這樣設計是為了既可以透過點擊頁面中的按鈕登錄，也可以是使用者造訪需要登入驗證的頁面或後端返回需要驗證登入的提示後自動彈出登入框，減少了頁面的跳轉，簡化使用者操作。
使用者輸入的資料往往是不可靠的，所以本專案前後端都對登入資訊進行了校驗，前端基於element-ui的表單校驗方式，自訂了校驗規則進行校驗。
頁面同樣使用了element-ui的Dialog實現彈出蒙版對話框的效果，注册按鈕設定在App.vue根元件，透過父子元件傳值控制註冊框是否顯示。
使用者輸入的資料往往是不可靠的，所以本項目前後端同樣都對註冊資訊進行了校驗，前端基於element-ui的表單校驗方式，自訂了校驗規則進行校驗。
首頁主要是商品的展示，有輪播圖展示推薦的商品，分類別展示熱門商品。
全部商品頁面整合了全部商品展示、商品分類查詢，以及根據關鍵字搜尋商品結果展示。
商品詳情頁主要是將某件商品的詳細資料展示，使用者可以將喜歡的商品加入購物車或收藏清單。
購物車採用vuex實現，頁面效果參考了小米商城的購物車。
詳細實現流程請看：基於Vuex實現小米商城購物車
用戶在購物車選擇了準備購買的商品後，點選「去結算」按鈕，會來到該頁面。 用戶在這裡選擇收貨地址，確認訂單的相關訊息，然後確認購買。
用戶在商品的詳情頁，可以點擊加入喜歡按鈕，把喜歡的商品加入收藏清單。
對用戶的所有訂單進行展示。
注意：
1. Clone project
git clone https://github.com/hai-27/vue-store.git
2. Project setup
cd vue-store
npm install
3. Compiles and hot-reloads for development
npm run serve
4. Compiles and minifies for production
npm run build
首頁
全部商品
購物車
我的收藏
我的訂單
登入
註冊
作者hai-27
2020年3月8日
