# drinking_client

**Repository Path**: ehuicoder/drinking_client

## Basic Information

- **Project Name**: drinking_client
- **Description**: 饮品商城移动端项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-21
- **Last Updated**: 2021-12-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目介绍

使用vue-cli脚手架自动构建工具， vant框架工具，以及Vue + Vue-router + Vue-axios。

功能目前已实现： 前台系统 、会员系统、 订单系统、搜索系统、账号管理系统。

### 未登录功能

包含注册、登录、找回密码功能，也可先去首页逛一逛，输入框具有校验功能

```
实现登录方式
```
前后端分离，使用token验证登录。
前端使用一个正确的账号和密码跟服务器换取一个合法token，服务器将token返回给前端，前端将token保存在本地存储，后面每次访问有关于用户信息的页面，都必须携带token到后台验证，如果验证通过，则允许访问，否则直接拦截。

![](./src/assets/readmeImg/01.png)

这里注册组件在登录路由组件处通过vue事件总线控制开关

![](./src/assets/readmeImg/02.png)

找回密码，通过后端给邮箱发送验证码，只有验证成功才能进行下一步

![](./src/assets/readmeImg/03.png)

![](./src/assets/readmeImg/04.png)


### 首页组件

轮播图展示热门商品，热卖推荐采用图片懒加载，提高性能

![](./src/assets/readmeImg/05.png)

### 菜单组件

![](./src/assets/readmeImg/06.png)

### 购物袋组件

```
未登录状态
```

![](./src/assets/readmeImg/07.png)

```
已登录状态
```

可编辑删除，也可直接单选或多选提交订单

![](./src/assets/readmeImg/08.png)

![](./src/assets/readmeImg/09.png)

### 我的组件

```
未登录状态
```

![](./src/assets/readmeImg/10.png)

```
已登录状态
```

用户可以查询或修改个人资料，查询订单和收藏、进行地址管理以及进行修改密码、注销账号、退出登录的操作

![](./src/assets/readmeImg/11.png)

### 搜索组件

![](./src/assets/readmeImg/12.png)

### 详情界面

利用路由携带参数获取商品id显示详情，并且通过路由守卫实现页面部分数据的缓存。未登录时会拦截收藏、加入购物袋、购买功能，并跳转登录界面。

![](./src/assets/readmeImg/13.png)

![](./src/assets/readmeImg/14.png)

### 结算界面

可选择地址，无地址需前往设置。选择地址组件仍用vue事件总线控制开关

![](./src/assets/readmeImg/15.png)

![](./src/assets/readmeImg/16.png)

![](./src/assets/readmeImg/17.png)

### 订单界面

这里利用过滤器格式化时间，并且利用路由守卫拦截重复支付的操作

![](./src/assets/readmeImg/18.png)

![](./src/assets/readmeImg/19.png)

![](./src/assets/readmeImg/20.png)

### 个人中心

可修改昵称

![](./src/assets/readmeImg/21.png)

![](./src/assets/readmeImg/22.png)

### 我的收藏

可进行删除操作

![](./src/assets/readmeImg/23.png)

### 地址列表

可新增地址和编辑已有地址

![](./src/assets/readmeImg/24.png)

![](./src/assets/readmeImg/25.png)

![](./src/assets/readmeImg/26.png)

![](./src/assets/readmeImg/30.png)

![](./src/assets/readmeImg/31.png)

### 安全中心

![](./src/assets/readmeImg/27.png)

![](./src/assets/readmeImg/28.png)

![](./src/assets/readmeImg/29.png)