# Store(参考小米商城)
## 前言
模仿 [小米商城 ](www.mi.com)做一个电商项目
## 说明
> 本项目前后端分离,前端参考 [小米商城](www.mi.com) 实现,但与小米官方没有关系,纯属个人瞎搞,若需要购买小米产品请到小米官方商城。
> 这是本项目的前端,后端请移步到store-server,没有兼容移动端,请使用电脑访问
## 项目简介
本项目前后端分离,前端基于`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实现小米商城购物车](https://juejin.im/post/5e660ef9518825490276748a)
### 订单结算
用户在购物车选择了准备购买的商品后,点击“去结算”按钮,会来到该页面。
用户在这里选择收货地址,确认订单的相关信息,然后确认购买。
### 我的收藏
用户在商品的详情页,可以通过点击加入 喜欢 按钮,把喜欢的商品加入到收藏列表。
### 我的订单
对用户的所有订单进行展示。
## 运行项目
0. 先启动服务器,在vue.config.js修改服务器ip,同样在src/Global.js
http://localhost:3000
1. 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
```
## 页面截图
**首页**
![Home](./public/screenshots/home.png)
**全部商品**
![goods](./public/screenshots/goods.png)
**购物车**
![shoppingCart](./public/screenshots/shoppingCart.png)
**我的收藏**
![collect](./public/screenshots/collect.png)
**我的订单**
![order](./public/screenshots/order.png)
**登录**
![login](./public/screenshots/login.png)
**注册**
![register](./public/screenshots/register.png)
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
本项目前后端分离,前端基于`Vue`+`Vue-router`+`Vuex`+`Element-ui`+`Axios`,参考小米商城实现。后端基于`Node.js(Koa框架)`+`Mysql`实现。 前端包含了11个页面:首页、登录、注册、全部商品、商品详情页、关于我们、我的收藏、购物车、订单结算页面、我的订单以及错误处理页面。 实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算、用户订单、用户收藏列表以及错误处理功能。 后端采取了MVC模式,根据前端需要的数据分模块设计了相应的接口、控制层、数据持久层。
资源推荐
资源详情
资源评论
收起资源包目录
基于vue+vue-router+vuex+element-ui+axios,参考小米商城,实现的电商项目,仿小米商城源代码 (250个子文件)
.browserslistrc 21B
github-markdown.css 16KB
index.css 1KB
shoppingCart.gif 1.73MB
.gitattributes 66B
.gitignore 214B
.gitignore 213B
index.html 547B
favicon.ico 4KB
MiTv-4C 55-1.jpg 467KB
MiTv-4C 55-2.jpg 404KB
MiTv-4A-32-4.jpg 321KB
charger-car-4.jpg 307KB
charger-car-2.jpg 274KB
charger-car-3.jpg 248KB
charger-car-5.jpg 245KB
charger-car-6.jpg 214KB
charger-car-1.jpg 212KB
charger-tio-4.jpg 204KB
charger-30w-4.jpg 170KB
charger-tio-5.jpg 167KB
protectingShell-Mi-CC9Pro-1.jpg 162KB
MiTv-4A-32-1.jpg 148KB
MiTv-4A-32-2.jpg 147KB
MiTv-4X 43-2.jpg 147KB
Redmi 8A-1.jpg 144KB
protectingShell-Mi-9-red-1.jpg 144KB
charger-30w-3.jpg 143KB
MiTv-E55A-2.jpg 143KB
MiTv-ArtTv-65-1.jpg 143KB
MiTv-4X 43-1.jpg 141KB
MiTv-E55A-1.jpg 140KB
Redmi 8-1.jpg 138KB
MiTv-E65A-1.jpg 137KB
charger-car-37w-4.jpg 136KB
Redmi 7A-1.jpg 135KB
Redmi Note8-2.jpg 134KB
MiTv-E65A-2.jpg 132KB
MI CC9 Pro-1.jpg 126KB
charger-30w-1.jpg 126KB
Redmi K30 5G-2.jpg 126KB
MI CC9 Pro-4.jpg 125KB
Redmi K30 5G-1.jpg 124KB
MI CC9 Pro-2.jpg 122KB
charger-car-37w-3.jpg 116KB
Redmi 7A-5.jpg 116KB
Redmi 7A-2.jpg 116KB
Redmi Note8-1.jpg 116KB
charger-18w-2.jpg 113KB
protectingMen-Mi-CC9-1.jpg 105KB
Redmi 8-3.jpg 104KB
protectingShell-RedMi-K20&pro-1.jpg 101KB
charger-car-37w-2.jpg 93KB
Redmi 8-2.jpg 93KB
Redmi K30 5G-3.jpg 93KB
Washer-Pro-10-2.jpg 91KB
Washer-Pro-10-1.jpg 86KB
Redmi 7A-3.jpg 85KB
Washer-Pro-10-3.jpg 85KB
Redmi K30 5G-5.jpg 83KB
Redmi 8-4.jpg 82KB
MiTv-4A 65-1.jpg 79KB
charger-tio-2.jpg 78KB
MI CC9 Pro-5.jpg 73KB
charger-10000mAh-5.jpg 70KB
protectingShell-Mix-3-1.jpg 69KB
charger-30w-2.jpg 68KB
charger-36w-3.jpg 67KB
MI CC9 Pro-3.jpg 66KB
charger-36w-4.jpg 65KB
MI CC9 Pro-6.jpg 61KB
charger-tio-3.jpg 61KB
MiTv-4C 55-3.jpg 60KB
MiTv-4A-32-3.jpg 60KB
AirCondition-V1C1-1.jpg 57KB
Washer-Pro-10-4.jpg 56KB
MiTv-4X 43-3.jpg 56KB
charger-car-37w-1.jpg 53KB
charger-36w-2.jpg 52KB
charger-60w-3.jpg 50KB
cms_4.jpg 48KB
Redmi Note8-3.jpg 47KB
charger-car-37w-5.jpg 45KB
charger-18w-1.jpg 43KB
charger-10000mAh-1.jpg 43KB
protectingShell-Mi-9SE-1.jpg 43KB
Redmi Note8-4.jpg 43KB
Redmi K30 5G-4.jpg 43KB
charger-tio-1.jpg 42KB
charger-36w-1.jpg 42KB
protectingMen-Mi-CC9e-1.jpg 41KB
Redmi 8-5.jpg 41KB
charger-60w-1.jpg 40KB
charger-60w-2.jpg 38KB
MiTv-E55A-4.jpg 38KB
cms_1.jpg 38KB
Redmi 7A-4.jpg 38KB
cms_3.jpg 37KB
charger-60w-4.jpg 36KB
MiTv-E65A-4.jpg 35KB
共 250 条
- 1
- 2
- 3
资源评论
蜗牛乌龟谁跑的快
- 粉丝: 2
- 资源: 4
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功