README.md · Road/vue2_仿蘑菇街pc端项目

# 蘑菇街说明文档

## 介绍

**基于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. 首页
 - 上左边
 - 当前账号的名字
 - 当前账号的权限
 - 管理员的头像
 - 上右边
 - 总订单数
 - 已完成数
 - 待付款数
 - 待发货数
 - 待评价数
 - 售后数
 - 下左边
 - 根据下单日期的销量折线图
 - 下右边
 - 根据下单日期的当天收入的柱形图
 
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. 每次进入 确定订单页 或 支付页 ，发请请求，根据标记获取表中的 确定订单信息 或 订单编号
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] 无权限的管理员不允许使用客服功能
   - [ ]

Road/vue2_仿蘑菇街pc端项目

简介

发行版

贡献者

近期动态

Road/vue2_仿蘑菇街pc端项目 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Road/vue2_仿蘑菇街pc端项目