# admin权限管理系统

**Repository Path**: w_zhenhua/vueadmin

## Basic Information

- **Project Name**: admin权限管理系统
- **Description**: 基于 SpringBoot + SpringSecurity + Jwt + Redis + Vue 的前后端分离后台权限管理系统
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2022-10-17
- **Last Updated**: 2022-10-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VueAdmin

## 介绍

基于 SpringBoot + SpringSecurity + Jwt + Redis + Vue 的前后端分离后台权限管理系统

## 软件架构

**后端**

- 以 SpringBoot 2.4.0 + MySQL 8.0 为基础
- 使用 Freemaker模板 + MyBatisPlus生成组件 搭建基本控制层、业务层、持久层和实体类
- 使用 Redis 作为缓存，存储用户权限信息、验证码
- 使用 SpringSecurity 进行认证授权，将权限细化至按钮
- 禁用 Session，使用 JWT 作为 token 进行有状态的加密交互，并为其设置有效时间，并将此 token 置于 header 中方便交互
- 使用 Swagger 进行接口文档编写，方便前后端交互开发
- 

**前端**

- 使用 Vue + ElementUI 进行前端开发
- 使用 Vue-Router 进行路由， Vuex 进行状态管理
- 前期使用 mockjs 模拟后端数据接口，方便前后端分离式开发

## 安装教程

### 环境

首先安装 IntelliJ IDEA， jdk 1.8，maven 3.0+，nodejs 12.1.0+，npm 6.9.0+，redis 6.0+，MySQL 8.0（虚拟机本地皆可，我安装在Centos7.4上）

- [Nodejs安装及环境配置](https://blog.csdn.net/qq_45803593/article/details/123609663)
- [配置虚拟机](https://blog.csdn.net/qq_45803593/article/details/123609734)
- [docker安装及配置](https://blog.csdn.net/qq_45803593/article/details/123609692)

- [docker安装redis](https://blog.csdn.net/qq_45803593/article/details/123609706)

### 安装步骤

- 从 gitee 上下载该项目，并将前后端两个文件夹进行解压
- 使用 idea 打开后端项目，在 maven 中进行 jar 包的加载
- 使用 idea 打开前端项目，在该文件夹中的控制终端输入命令 npm install 进行下载
- 在虚拟机上安装 redis ，并在后端项目的 yml 文件中配置 redis 地址
- 将 sql 文件导入 MySQL 数据库
- 启动虚拟机，启动后端项目，启动前端项目 `npm run serve`，打开 localhost:8080 进行操作
- 用户名：admin，密码：123456
- 使用注册功能发送邮件需要申请邮箱的授权码，申请方式 https://blog.csdn.net/qq_45803593/article/details/124200268



## 项目截图

#### 登录

![登录](./images/login.png)

#### 注册

![注册](./images/register.png)

#### 菜单管理

![菜单列表](./images/menu_list.png)

![新增菜单](./images/menu_add.png)

![删除菜单](./images/menu_del.png)

#### 角色管理

![角色列表](./images/role_list.png)

![分配菜单](./images/menu_grant.png)

#### 用户管理

![用户列表](./images/user_list.png)

![分配角色](./images/role_grant.png)

![重置密码](./images/reset_pass.png)

#### 系统工具

![接口文档](./images/swagger.png)

![图标管理](./images/icon.png)

#### 个人中心

![个人中心](./images/usercenter.png)