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安装及环境配置

• 配置虚拟机

• docker安装及配置

• docker安装redis

安装步骤

• 从 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

项目截图

登录

注册

菜单管理

角色管理

用户管理

系统工具

个人中心