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

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

實(shí)現(xiàn)了商品的展示、商品分類查詢、關(guān)鍵字搜索商品、商品詳細(xì)信息展示、登錄、注冊(cè)、用戶購(gòu)物車、訂單結(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ù)庫(kù)：Mysql

功能模塊

登錄

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

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

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

注冊(cè)

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

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

首頁

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

全部商品

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

商品詳情頁

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

我的購(gòu)物車

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

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

訂單結(jié)算

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

我的收藏

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

我的訂單

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

注意：

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

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

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