這個高仿小米商城項目，拿來學(xué)習(xí)再好不過了！

今天推薦一個高仿電商項目小米商城，vue-store 作者還是學(xué)生，利用寒假做的，學(xué)生就這么牛逼哄哄，佩服佩服。

項目簡介

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

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

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

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

技術(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)控制登錄框是否顯示。關(guān)注 Java項目分享

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

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

注冊

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

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

首頁

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

全部商品

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

商品詳情頁

商品詳情頁主要是對某個商品的詳細(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)行展示。

效果預(yù)覽

體驗(yàn)地址

http://106.15.179.105/