硬核開源：高仿小米商城項目！

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

項目簡介

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

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

實現(xiàn)了商品的展示、商品分類查詢、關(guān)鍵字搜索商品、商品詳細信息展示、登錄、注冊、用戶購物車、訂單結(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實現(xiàn)彈出蒙版對話框的效果，登錄按鈕設(shè)置在App.vue根組件，通過vuex中的showLogin狀態(tài)控制登錄框是否顯示。關(guān)注 Java項目分享

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

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

注冊

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

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

首頁

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

全部商品

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

商品詳情頁

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

我的購物車

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

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

訂單結(jié)算

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

我的收藏

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

我的訂單

對用戶的所有訂單進行展示。

效果預(yù)覽

體驗地址

http://106.15.179.105/