# vue2_仿蘑菇街pc端项目

**Repository Path**: qu-weizhi/vue2-mushroom_street

## Basic Information

- **Project Name**: vue2_仿蘑菇街pc端项目
- **Description**: 基于vue2以及node实现的仿蘑菇街项目

- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2022-05-04
- **Last Updated**: 2024-04-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Node

## README

# 蘑菇街说明文档



## 介绍

**基于vue2以及node实现的仿蘑菇街项目** 



## 技术栈： 

前端：Vue2全家桶、Element Ui、Less 

后端：node、Express、socket.io( 基于 socket.io 实现了客服与用户的1对1聊天 ) 

数据库：mysql



## 文件说明：

**vue-mushroom_street：**

> 前端项目文件夹

**vue-mushroom_street/serve**

> 后端项目文件夹

**mgj.sql**

> 数据库文件

**API接口.xmind**

> API接口文件



## 项目启动

**前端项目**

进入 vue-mushroom_street 文件夹，下载依赖

```
npm i 
```

启动项目

```
npm run serve
```

打开项目地址

```
前台地址：http://127.0.0.1:8080/#/
后台地址：http://127.0.0.1:8080/#/admin
后台默认账号密码：admin 123456
```

**后端项目**

进入 vue-mushroom_street/serve 文件夹，下载依赖

```
npm i 
```

打开 vue-mushroom_street/serve/db/config.js 文件，修改 mysql 配置

```js
module.exports = {
    // 数据库配置
    config: {
        host: 'localhost',// 地址
        user: 'root',// 账号
        port: '3306',// 端口
        password: '12345678',// 密码
        database: 'mgj'// 数据库名
    },
```

启动项目

```
node app.js
```

后端接口地址：

```
http://127.0.0.1:3000/
```



## 静态页面

### 前台页面

1. 首页	index.html

2. 登陆页面 	login.html

3. 注册页面 	register.html

4. 购物车 	cart/index.html
   1. 确认订单		cart/cart_order.html
   2. 支付		cart/cart_payment.html
   3. 完成		cart/cart_success.html
   4. 购物车为空		cart/cart_null.html
   
5. 收藏页面			collection.html

6. 我的订单(全部订单)		order/index.html

   1. 待付款
   2. 待收货
   3. 待评价
   4. 没有订单		order/order_null.html

7. 单个商品页面		commodity.hltml

   

### 后台页面功能

1. 首页
   - 上左边
     - 当前账号的名字
     - 当前账号的权限
     - 管理员的头像
   - 上右边
     - 总订单数
     - 已完成数
     - 待付款数
     - 待发货数
     - 待评价数
     - 售后数
   - 下左边
     - 根据下单日期的<u>销量</u>折线图
   - 下右边
     - 根据下单日期的<u>当天收入</u>的柱形图
   
2. 订单管理
   - 发货
   - 订单信息
   
3. 用户账号管理
   - 用户的账号信息
   - 拉黑用户：拉黑后不允许用户购买
   - 查看用户信息
   
4. 管理员管理
   - 最高权限：可以操作管理员
   - 店长权限：发布、删除、修改商品、拉黑用户
   - 员工权限：商品发货，查看商品信息
   
5. 商品管理
   - 商品列表
   - 商品的增、删、改、查
   - 商品分类
     - 一级分类
     
       - 12个一级分类
     
     - 二级分类
     
       - 10个二级分类
   
6. 客服功能

   - 和用户在线聊天

   



## 接口



## 数据库



### 管理员表	admin

id	管理员id

name	管理员名称

password	管理员密码

permissions	权限（0[无权限]、1[员工]、2[店长]、3[超级管理员]）

state	状态（是否启用）1、0

newTime	创建时间



### 用户表	user

id	用户id

name	用户名称（默认名称为用户账号）

account	用户账号

img	用户头像

address	收货地址

password	用户密码

newTime	创建时间

editTime	修改时间

token	令牌

pullBlack 拉黑（0：没有被拉黑，1：被拉黑）[拉黑后将无法购买商品]



### 商品表	product	

id	商品id

name	商品名称

parameter	商品参数：	{ name: "尺寸：", data: ["M", "S"] },

img	商品图片

classId	商品分类id

price	商品价格

promise	商品承诺	[7天无理由，包邮]



### 商品评价表	comment	

id	评价id

product_id	商品id

user_id	用户id

rate	商品评分

evaluation	商品评价

time	评价时间



### 购物车表	cart

id	购物车id

user_id	用户id

product_id	商品id

parameter	加入购物车的参数：{颜色：[红、黄]，尺码：[m，s]}

num	数量

newTime	添加时间



### 订单表	indent

id	订单id

user_id	用户id

number	订单编号

cart_info	购物车信息（用来存放img、名字、参数、单价、数量）

payment	实付款

state	交易状态（待付款、待收货、待评价）

afterSale	售后情况

address	收货地址

time	成交时间



### 收藏表	collection

id	收藏表id

user_id	用户id

product_id	商品id

time	收藏时间



### 商品分类表	productClass

id	分类表id

name	分类名称

grade	分类等级 （1[一级分类]、2[二级分类]）



### 用户购物车信息	user_cart_info

> 用来临时存储订单的信息

id 表id

user_id	用户id

cart_info	确认订单信息

number	待付款的订单编号

jump_flag	标记（1：确认订单页；2：待付款页



### 聊天记录表 chat

> 一对一聊天

id	表id

u_id	用户id（格式：home + 用户自己的id）

img	用户头像

name 用户名称

content	聊天记录



## 实现注册

1. 点击注册
2. 判断 确定密码和密码是否一至
3. 判断 验证码是否正确
4. 发送请求
5. 查询账号是否存在
   - 账号存在
     - 提示用户，当前账号已存在
   - 账号不存在
     - 插入数据库
     - 返回token，并保存到本地存储
     - 把当前用户的数据保存到vuex
     - 跳转到首页，渲染用户数据



## 信息存储

1. 前台登陆和注册的 token 存放在 localStorage（本地存储）
2. 验证码存放在 cookie
3. 后台登录的 token 存放在 sessionStorage（会话存储）



## 实现管理员修改

1. 判断权限（ 只允许修改比自己权限小的）
   - 自己权限 小于等于 被修改权限	--> 提示无权限
   - 被修改账号名字 等于 自己名字时 --> 允许修改 
     - 且此时 自己权限 等于 被修改权限

```js
let i = 3 // 自己的权限
let t = 3 // 被修改的权限
let iNmae = 'admin' // 自己的名字
let tName = 'admin'	// 被修改的名字

// 判断权限
if ( i <= t ){
    alter('权限不足')
    return
}else{
    // 执行一堆代码
	.....
}

// 判断名字
if( iName == tName ){
    // 执行一堆代码
    ....
}

if( iName==tName ? true : ( i <= t ? false : true ) )
```



## 解决购物刷新bog

1.  在数据库再创建一张表，用来保存 确定订单信息 以及 订单编号 和 标记
2. 每次进入 确定订单页 或 支付页 ，发请请求，根据<u>标记</u>获取表中的 确定订单信息 或 订单编号
3. 如果是正常行为，就恢复初始值，反之则不修改



## 购物车路由跳转逻辑

1. 判断是否需要验证

2. 判断 to：  /cart/order

3. 发送请求：获取临时数据  判断

   ```js
   // 订单确定页跳转
   if(cart_info !== '' && numbet==='' && jump_flag===1){
       // 允许跳转
   }
   
   // 支付页跳转
   if(cart_info === '' && number !== '' && jump_flag === 2){
       // 允许跳转
   }
   ```



## 实现首页商品分类

1. 拿到分类id
2. 保存到vuex
3. 获取vuex的分类id
4. 遍历订单列表
   - 找到相同的分类id
   - 展示相同分类id的商品
   - 把剩下的商品叠加进去（商品不一样）




# 待完成功能：

1. - [x] 登录后，可以修改个人信息
2. - [x] 首页--搜索
3. - [x] 完善后台--分类管理
4. - [x] 实现首页--分类功能
5. - [x] 商品--评论区展示
6. - [x] 后台首页--信息的展示
7. - [x] 客服功能
8. - [x] 前台首页--无限滚动
9. - [x] 全局后置路由



# 待修复的bug

1. - [x] 注册文本框未清空
   - [x] 滚动条未回到顶端
   - [x] 订单页头像关闭
   - [x] 登录密码错误未提示
   - [x] 添加售后功能
   - [x] 后台管理员权限管理--缺少权限验证
   - [x] 后台首页--每天收入有bug
   - [x] 后台首页--右上角卡片总收款逻辑
   - [x] 搜索的bug
   - [x] 优化后台表格的序号
   - [x] 商品发货后分页没了
   - [x] 未登录不允许打开客服功能
   - [x] 客服不在线时，提示用户
   - [x] 无权限的管理员不允许使用客服功能
   - [ ]