本項(xiàng)目前后端分離，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，參考小米商城實(shí)現(xiàn)。后端基于Node.js(Koa框架)+Mysql實(shí)現(xiàn)。

前端包含了11個(gè)頁面：首頁、登錄、注冊、全部商品、商品詳情頁、關(guān)于我們、我的收藏、購物車、訂單結(jié)算頁面、我的訂單以及錯(cuò)誤處理頁面。

實(shí)現(xiàn)了商品的展示、商品分類查詢、關(guān)鍵字搜索商品、商品詳細(xì)信息展示、登錄、注冊、用戶購物車、訂單結(jié)算、用戶訂單、用戶收藏列表以及錯(cuò)誤處理功能。

后端采取了MVC模式，根據(jù)前端需要的數(shù)據(jù)分模塊設(shè)計(jì)了相應(yīng)的接口、控制層、數(shù)據(jù)持久層。 

技術(shù)棧

前端：Vue+Vue-router+Vuex+Element-ui+Axios

后端：Node.js、Koa框架

數(shù)據(jù)庫：Mysql

功能模塊

登錄

頁面使用了element-ui的Dialog實(shí)現(xiàn)彈出蒙版對話框的效果，登錄按鈕設(shè)置在App.vue根組件，通過vuex中的showLogin狀態(tài)控制登錄框是否顯示。

這樣設(shè)計(jì)是為了既可以通過點(diǎn)擊頁面中的按鈕登錄，也可以是用戶訪問需要登錄驗(yàn)證的頁面或后端返回需要驗(yàn)證登錄的提示后自動彈出登錄框，減少了頁面的跳轉(zhuǎn)，簡化用戶操作。

用戶輸入的數(shù)據(jù)往往是不可靠的，所以本項(xiàng)目前后端都對登錄信息進(jìn)行了校驗(yàn)，前端基于element-ui的表單校驗(yàn)方式，自定義了校驗(yàn)規(guī)則進(jìn)行校驗(yàn)。

注冊

頁面同樣使用了element-ui的Dialog實(shí)現(xiàn)彈出蒙版對話框的效果，注冊按鈕設(shè)置在App.vue根組件，通過父子組件傳值控制注冊框是否顯示。

用戶輸入的數(shù)據(jù)往往是不可靠的，所以本項(xiàng)目前后端同樣都對注冊信息進(jìn)行了校驗(yàn)，前端基于element-ui的表單校驗(yàn)方式，自定義了校驗(yàn)規(guī)則進(jìn)行校驗(yàn)。

首頁

首頁主要是對商品的展示，有輪播圖展示推薦的商品，分類別對熱門商品進(jìn)行展示。

全部商品

全部商品頁面集成了全部商品展示、商品分類查詢，以及根據(jù)關(guān)鍵字搜索商品結(jié)果展示。

商品詳情頁

商品詳情頁主要是對某個(gè)商品的詳細(xì)信息進(jìn)行展示，用戶可以在這里把喜歡的商品加入購物車或收藏列表。

我的購物車

購物車采用vuex實(shí)現(xiàn)，頁面效果參考了小米商城的購物車。

詳細(xì)實(shí)現(xiàn)過程請看：基于Vuex實(shí)現(xiàn)小米商城購物車

訂單結(jié)算

用戶在購物車選擇了準(zhǔn)備購買的商品后，點(diǎn)擊“去結(jié)算”按鈕，會來到該頁面。 用戶在這里選擇收貨地址，確認(rèn)訂單的相關(guān)信息，然后確認(rèn)購買。

我的收藏

用戶在商品的詳情頁，可以通過點(diǎn)擊加入 喜歡 按鈕，把喜歡的商品加入到收藏列表。

我的訂單

對用戶的所有訂單進(jìn)行展示。

注意：

后端接口地址已經(jīng)修改為線上的地址，本地運(yùn)行會直接分為我部署在服務(wù)器的后端。

為了方便測試，數(shù)據(jù)庫數(shù)據(jù)沒有加密，注冊時(shí)切記不要使用自己的常用密碼。

如果需要自己運(yùn)行后端，請移步到store-server clone后端項(xiàng)目，并修改前端的接口地址為您的服務(wù)器地址。