# VUE项目_电商管理系统开发

**Repository Path**: whkwhk/store_admin

## Basic Information

- **Project Name**: VUE项目_电商管理系统开发
- **Description**: 使用VUE开发的电商管理系统，自己的一个模拟项目，旨在提高自己的编程开发能力！
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2021-08-02
- **Last Updated**: 2022-09-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 介绍
使用VUE开发的电商管理系统，自己的一个模拟项目，旨在提高自己的编程开发能力！

B站学习链接：[点击前往](https://www.bilibili.com/video/BV1EE411B7SU)

**注意**：B站的这个视频被封了，已经没法观看了

![image-20210824205328369](https://gitee.com/whkwhk/useimg/raw/master/img/image-20210824205328369.png)

源码下载：[码云仓库地址](https://gitee.com/whkwhk/store_admin)



# 项目成果：

## 登录界面：

![image-20210824204930517](https://gitee.com/whkwhk/useimg/raw/master/img/image-20210824204930517.png)

登录成功以后进入主界面：主界面里面后面会修改，打算放一些总览信息，以直观展示后台数据![image-20210824205008310](https://gitee.com/whkwhk/useimg/raw/master/img/image-20210824205008310.png)



## 用户列表页面：![](https://gitee.com/whkwhk/useimg/raw/master/img/20210824203735.png)



操作：

- 编辑用户信息，会修改对应数据库中的用户信息![image-20210824204150024](https://gitee.com/whkwhk/useimg/raw/master/img/image-20210824204150024.png)
- 删除该用户，会在数据库中删除该用户![image-20210824204132224](https://gitee.com/whkwhk/useimg/raw/master/img/image-20210824204132224.png)



## 角色列表页面：

![image-20210824204318150](https://gitee.com/whkwhk/useimg/raw/master/img/image-20210824204318150.png)



会展示对应角色的权限列表：![image-20210824204436653](https://gitee.com/whkwhk/useimg/raw/master/img/image-20210824204436653.png)



操作：

- 编辑角色信息![image-20210824204529994](https://gitee.com/whkwhk/useimg/raw/master/img/image-20210824204529994.png)
- 删除角色信息![image-20210824204539540](https://gitee.com/whkwhk/useimg/raw/master/img/image-20210824204539540.png)
- 编辑角色的对应权限，通过勾选对应权限前面的复选框可以更改该角色的权限，首页展示的对应列表也会随之改变![image-20210824204550478](https://gitee.com/whkwhk/useimg/raw/master/img/image-20210824204550478.png)



## 权限列表页面：

![image-20210824204745224](https://gitee.com/whkwhk/useimg/raw/master/img/image-20210824204745224.png)

功能点：

- 展示数据库中的所有权限数据，并且根据权限等级给予不同的展现方式，一二三级对应不同的tag标签





# 1、项目概述

## 1.1电商项目的基本业务概述

根据不同的应用场景，电商系统一般都提供了PC端、移动APP、移动Web、微信小程序等多种终端访问方式。
多端公用同一个服务器数据库，使用的接口一致，如图所示
![在这里插入图片描述](https://img-blog.csdnimg.cn/a1fa4f34802f4426b6a7c97b756b4e29.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


## 1.2电商后台管理系统的功能

功能这块我简单做了一个思维导图，简单明了（软件：xmind），源文件我放在项目文件夹里面了，仔细找找
![](https://img-blog.csdnimg.cn/644b159d6c574eeaa72fa703eb13d0a9.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


## 1.3电商后台管理系统的开发模式(前后端分离)

电商后台管理系统整体采用**前后端分离**的开发模式，其中前端项目是基于Vue技术栈的SPA项目。
![在这里插入图片描述](https://img-blog.csdnimg.cn/dea32bedfb6640969164f49c0f35a5fc.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


## 1.4电商后台管理系统的技术选型

**1.前端项目技术栈（重点部分）**
* vue
* vue-router
* Element-UI·
* Axios
* Echarts

**2.后端项目技术栈**
* Node.js
* Express
* Jwt（可以实现登录状态记录功能）
* Mysql
* sequelize（操作数据库的框架）


# 2、项目初始化

## 2.1前端项目初始化步骤
1. 安装vue脚手架
2. 通过vue脚手架创建项目
3. 配置vue路由
4. 配置Element-UI组件库
5. 配置axios库

### 1.安装vue脚手架

网上教程很多，我这里就不说怎么安装了，我的版本如图
![在这里插入图片描述](https://img-blog.csdnimg.cn/b16ecd55a09648e5a19180595708a9b0.png)


### 2.通过vue脚手架创建项目
在cmd里面使用指令`vue ui`可以通过可视化操作进行创建项目
![在这里插入图片描述](https://img-blog.csdnimg.cn/5e5bcd0c4e8e4d82b296434e91f5bed1.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)

![在这里插入图片描述](https://img-blog.csdnimg.cn/7cfd6d4776f843c2877ac05eecfd05af.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/9b05b7b56f294148981d23bb80b63158.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/8514b36fa27540458fd8e4e897a95f3a.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


里面的Babel、Router、Linter/Formatter和使用配置文件一定要安装上

Babel：将现代JavaScript转换为旧版本(为了兼容性)
[Babel官网](https://babeljs.io/)
![在这里插入图片描述](https://img-blog.csdnimg.cn/77838f5dfc4146f0a0e434592b162aa0.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


Router：用动态页面构造应用程序
[Router官网](https://router.vuejs.org/)
![在这里插入图片描述](https://img-blog.csdnimg.cn/e226340e0aef4ca1a89d5749b368ff32.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


Linter/Formatter:使用ESLint或Prettier检查和强制代码质量
[Linter/Formatter](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint)

![在这里插入图片描述](https://img-blog.csdnimg.cn/1e64b475bd504fb08e45ac7214e2e544.png)

也可以使用命令行`vue create XXX（项目名称）`来创建项目，推荐使用UI界面进行创建，简单易懂

![在这里插入图片描述](https://img-blog.csdnimg.cn/efba44a6e21f4d06a0014cdf6b301e99.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


### 4.配置Element-UI组件库
创建好项目以后到插件地方搜索“element”，下载如图所示的插件
![在这里插入图片描述](https://img-blog.csdnimg.cn/3c75ae2ded4143f9bdfd492c5e0e1986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


### 5.配置axios库
依赖面板下右上角点击`安装依赖`，搜索`axios`进行安装
![在这里插入图片描述](https://img-blog.csdnimg.cn/859bda6985df4735917befe560ffb345.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/bf6e294f301e4c399c54a02de4325785.png)


## 2.2后台项目的环境安装配置
1. 安装MySQL数据库
2. 安装Nodejs 环境
3. 配置项目相关信息
4. 启动项目
5. 使用Postman测试后台项目接口是否正常

### 1.安装MySQL数据库
下载安装PHPStudy,打开其中的MySQL服务
![在这里插入图片描述](https://img-blog.csdnimg.cn/21016728e08646cfb6c1b22615f8b378.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


导入数据库文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/df0ac88e965748bdb62426fa6ab5d592.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/3d28802d26ce4361abcbc7ed78eb4424.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


导入完成以后可以检查一下是否成功
![在这里插入图片描述](https://img-blog.csdnimg.cn/c2ddf9788c454c309f0e4854041b2ece.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/48578e6c6b204595a1e77df591e5def9.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/30ab883c63cf4ab2ae1f4ce8dcaaf352.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


如果显示这些表，说明导入成功了
![在这里插入图片描述](https://img-blog.csdnimg.cn/3fa536c02dbf41f1b5bac399a48fae24.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


首先安装依赖包，在后端代码文件夹中打开命令行中使用指令`npm install`进行安装

然后把项目跑起来，命令行代码`node .\app.js`,打印出如下信息说明已经成功
![在这里插入图片描述](https://img-blog.csdnimg.cn/92036be0511b40eb96f76697163e1e43.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)

![在这里插入图片描述](https://img-blog.csdnimg.cn/e04cc8e3bf99422b92be1f6185f167f9.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


使用postman进行接口测试，如图，我测试了登录的接口，显示有返回信息，说明目前搭建的比较成功
![在这里插入图片描述](https://img-blog.csdnimg.cn/8c9b2cabf21b47fb997887dda8cca32e.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


再来测试一个已经存在的账号，提示登陆成功
![在这里插入图片描述](https://img-blog.csdnimg.cn/66c5582fc9614ff0b8f0771401b4eaa3.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)



# 3、登录/退出功能
## 3.1登录概述
### 1.登录业务流程
1. 在登录页面输入用户名和密码
2. 调用后台接口进行验证
3. 通过验证之后，根据后台的响应状态跳转到项目主页

### 2.登录业务的相关技术点
* http是无状态的
* 通过cookie在客户端记录状态
* 通过session在服务器端记录状态
* 通过token方式维持状态


## 3.2登录——token原理分析
原理如图所示，我做的已经很详细了，从上到下是顺序步骤
![在这里插入图片描述](https://img-blog.csdnimg.cn/2a2a1e88649c4196ab033f3498f9c7e2.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)



## 3.3登录功能的实现

### 1.登录页面的布局
通过element-UI组件实现布局：[Element-UI官网](https://element-plus.gitee.io/#/zh-CN/component/form)
登陆页面主要用到的是表单组件
![在这里插入图片描述](https://img-blog.csdnimg.cn/c45500accd5d4326b275622a667d29f4.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)

登陆界面（后期可能还会进行修改）

### 2.登陆验证

登录成功/失败验证使用到的Element-UI组件：
![在这里插入图片描述](https://img-blog.csdnimg.cn/208a6d3fbffa4baf9b858bcdf01fe09b.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)

```
<template>
<el-button :plain="true" @click="open1">成功</el-button>
  <el-button :plain="true" @click="open2">警告</el-button>
  <el-button :plain="true" @click="open3">消息</el-button>
  <el-button :plain="true" @click="open4">错误</el-button>
</template>

<script>
  import { defineComponent } from 'vue'
  import { ElMessage } from 'element-plus'
  export default defineComponent({
    setup() {
      return {
        open1() {
          ElMessage.success({
            message: '恭喜你，这是一条成功消息',
            type: 'success'
          });
        },
        open2() {
          ElMessage.warning({
            message: '警告哦，这是一条警告消息',
            type: 'warning'
          });
        },
        open3() {
          ElMessage('这是一条消息提示');
        },
        open4() {
          ElMessage.error('错了哦，这是一条错误消息');
        }
      }
    }
  })
</script>

<style>

</style>
```

登陆成功提示：
![在这里插入图片描述](https://img-blog.csdnimg.cn/2ffc02a22359405981dd0cb3a37a903e.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


登陆失败提示：
![在这里插入图片描述](https://img-blog.csdnimg.cn/8a88d508e53f40178845f4f5e5bf881b.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)

2021.8.6日完成了后台页面的大概框架，包括页面路由等等都已经做完了，点击就可以跳转到相应的组件。
![在这里插入图片描述](https://img-blog.csdnimg.cn/94d2770a497f4d92bc6a01991568ca42.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)

### 3.路由导航守卫控制访问权限

如果用户没有登录，但是直接通过URl访问特定页面，需要重定向到登录页面

```
//为路由对象添加ceForeEach导航守卫
router.beforeEach((to,from,next) => {
	//如果用户访问登录页，直接放行
	if(to.path === '/login') return next()
	
	//从sessionStorage中获取到保存的token值
	consta tokenStr = window.sessionStorage.getItem('token')
	//没有token，则强制跳转到登录页
	if(!tokenStr return next('/login'))
	next()
})
```


## 3.4退出

### 1.退出功能的实现原理

# 4.主页布局

## 4.1整体布局

对home页面，也就是登录进入后的页面，进行了一个简单的布局设计
![请添加图片描述](https://img-blog.csdnimg.cn/749f7f7b99d44fe480dbb11e0585aecc.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)


header部分优化过后：
![请添加图片描述](https://img-blog.csdnimg.cn/cc2a83bd23a241afab7b4e11cd183fbe.jpg)


aside部分优化过后：

main部分优化过后：

## 4.2左侧菜单布局

使用到的侧边导航栏代码：

```
<el-menu
          :uniqueOpened="true"
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#2F4F4F"
          text-color="#fff"
          color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <!-- 一级菜单 -->
            <template #title>
              <!-- 一级菜单图标 -->
              <i class="el-icon-location"></i>
              <!-- 一级菜单标题 -->
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <!-- 二级菜单注释 -->
              <template #title>分组一</template>
              <!-- 二级菜单标题 -->
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
```


## 4.3通过接口获取菜单数据

通过axios请求拦截器添加token，保证拥有获取数据的权限，代码：

```
//axios请求拦截
axios.interceptors.request.use(config =>{
	//为请求头对象，添加token验证的Authorization字段
	config.headers.Authorization = window.sessionStorage.getItem('token')
	return config
})
```

2021.8.6已经完成的后台界面
![请添加图片描述](https://img-blog.csdnimg.cn/0258cd173ec546f1b6fee02bbb669104.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)

## 用户列表的制作
![在这里插入图片描述](https://img-blog.csdnimg.cn/14eaa3422c74428f88aa3609c52e61c6.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70)