# superMall

**Repository Path**: billkonpp/superMall

## Basic Information

- **Project Name**: superMall
- **Description**: 移动端购物商城。基于Vue+Vue-Router+Vuex+mixin+axios+better-scroll,项目地址在下面。

- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2022-04-07
- **Last Updated**: 2022-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

###  **### supermall** 
 **关于作者：** 符道胜，大二学生一枚，最低级的前端小白（努力学习充电中），微信：15660950157。

 **介绍：** 
2020春节，新冠席卷而来，学校无法开学，此时在家无聊的我确定了前端的学习方向。由于大一，大二零零散散的前端知识不全面，而且好多知识都还给了老师，所以利用在家的这大半年时间系统的学习了前端的知识，本项目是为了巩固所学知识，积累实战经验。写这个项目的时候基本每天把所有时间都给了它，但是由于是第一个大型实战项目，缺乏经验，所以在开发过程中不可避免的踩了许多坑，也曾为了一个bug在电脑前坐了一天，但是对我来说前端的学习中还是有许多成就感的，今天项目完成了，也在此和大家分享一下。

 **说明：**
本项目后端接口为coderwhy老师所有，想做本项目的小伙伴可以联系老师购买接口（不贵，希望大家尊重原创），老师微信：coderwhy002.

 **项目预览（请使用手机预览）：**

![手机扫码预览](https://images.gitee.com/uploads/images/2020/0630/103205_2e44d335_7602838.png "屏幕截图.png")

项目地址：[ https://fudaosheng.gitee.io/supermall](http://)


 **项目效果图** 

首页：

|  ![输入图片说明](https://images.gitee.com/uploads/images/2020/0630/105340_fb600e20_7602838.png "屏幕截图.png") |  ![输入图片说明](https://images.gitee.com/uploads/images/2020/0630/105410_dd2ec109_7602838.png "屏幕截图.png") |

详情页

|-![输入图片说明](https://images.gitee.com/uploads/images/2020/0630/105457_4e844a26_7602838.png "屏幕截图.png")--|-![输入图片说明](https://images.gitee.com/uploads/images/2020/0630/105530_0dad8e8b_7602838.png "屏幕截图.png")--|

分类和购物车：

|  ![输入图片说明](https://images.gitee.com/uploads/images/2020/0630/105643_422ed9b9_7602838.png "屏幕截图.png") |  ![输入图片说明](https://images.gitee.com/uploads/images/2020/0630/105706_21c26007_7602838.png "屏幕截图.png") |

我的

|--![输入图片说明](https://images.gitee.com/uploads/images/2020/0630/105752_44aac793_7602838.png "屏幕截图.png")-|---|
 
 **
项目文件结构：** 

![输入图片说明](https://images.gitee.com/uploads/images/2020/0630/110707_d87883e4_7602838.png "屏幕截图.png")

 **项目功能** 

 **首页：** 首页主要由六部分组成：导航栏，轮播图，分类，本周流行，选项卡，商品展示。每一部分均是一个独立组件，组件之间利用props,$emit通信，点击展示的商品跳转到该商品的详情页。

 **详情页：** 详情页主要由九部分组成：导航栏，轮播图，商品基本信息，店铺基本信息，商品上身效果图，商品参数，商品评论，推荐，底部工具栏。
点击“加入购物车”选项，弹出购买商品页面，通过vuex对购买商品数据进行保存，加入购物车完成弹出消息提示。

 **分类页面：** 分类页面由三部分组成：顶部导航栏，左侧商品分类栏，右侧类别展示栏。

 **购物车页面：** 该页面由导航栏，购物车商品展示栏，底部工具栏三部分组成。

取消选中商品，CartListItem将会commit提交一个事件给vuex的mutations修改对应商品的checked选项，此时底部的工具栏中总价也会相应减少。底部工具栏的全选按钮只有当购物车中所有商品都被勾选时才被选中，全选按钮选中时点击则是反选按钮，没被选中时点击则是全选按钮。所有vuex中state的修改均是通过mutations修改。

 **我的：** 由于做的仅是前端，所以我的页面只是一些布局，不在说明。

###  **项目总结：
** 
 **（1）mutations:** 
  
```
/**mutations:
     * 1.mutations唯一的目的就是修改state
     * 2.mutations中每个事件尽可能只做一间事，目的是为了更好的监听数据是哪个mutations修改的
     * actions:
     * 1.做异步操作，2.在action中进行条件判断
     */

```

 **(2)$emit传值踩坑：**

笔记地址：文档：$emit传值踩坑.note

链接：[http://note.youdao.com/noteshare?id=b230d38d05fd8ece3f73bc1f91088b7a&sub=AF81479D247544AB97C7EE66C3C66616 ](http://)

 **（3）vuex中getters监听踩坑：** 

地址：文档：vuex-getters监听不到state变化.note

链接：[http://note.youdao.com/noteshare?id=04bda53231a91927c489a9260d948a78&sub=BA4A2861AEB74A8A89F73ABBADD2E881](http://)

 **（4）** 动态绑定class时监听不到对象里属性的变化如：:class="{action:item.checked}，通过click时修改item.checked时样式并不会随之变化

 最后：笔记有点多也不知道哪些对小伙伴们有用，就不再放上面，祝小伙伴们天天开心，财源滚进， _**喜欢的点个Star**_ 。

 **项目运行：** 

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).