新项目，从0到1，SpringBoot+Vue.js权限管理系统，拿去做毕设

发表于 更新于 分类于 Waline：

项目介绍

背景

最近把以前做的权限管理系统重新整理了一下（将一些不规范的地方规范了一下，并且在关键地方写了注释），代码全部开源 ，这个项目是以现在主流的前后端分离模式开发的，包含前端（authority-ui）和后端（authority）两个工程，**项目的开源地址在文章的最后 **。

适宜人群

你可以借助本项目，学习 Java、SpringBoot、MybatisPlus、Shiro、JWT …

一个系统中权限管理是最基础的功能，你可以将本项目作为脚手架，在它的基础上进行二次开发，可以提高你开发软件的速度。

技术栈

后端：

  • JDK 1.8
  • MySQL 5.2.29
  • SpringBoot
  • MybatisPlus ORM 框架
  • Shiro 权限控制
  • JWT 单点登录
  • Hibernate Validator 参数校验
  • Swagger2 API 文档工具

前端：

  • JavaScript
  • Vue.js
  • Element
  • Axios
  • Node v14.17.0
  • yarn 1.22.21

项目简介

基于 SpringBoot 和 Vue.js 的权限管理系统，项目中没有涉及到过多的业务，主要是权限系统的设计与实现，基于 RBAC 权限模型，实现用户->角色->权限之间的关系，一个用户拥有一个或者多个角色，角色拥有多个权限，并且系统还实现了角色和菜单的动态关联。

以下是数据库模型的关系图：

项目的 SQL 文件在https://github.com/jonssonyan/authority/blob/master/docs/sql/ ，在运行项目之前需要先将数据库：authority 建好，数据库中一共有 9 张表，user 表中默认有两个账户，分别是管理员账户和普通用户账户，当你启动好项目之后可以直接使用默认的账户进行登录，当然你也可以注册一个账户，新账户默认的角色是 user，也就是普通用户。

  • 用户名: admin 密码: 123456 (管理员角色)
  • 用户名: user1 密码: 123456 (普通用户角色)

登录管理员账户之后，自然看到的菜单更多，权限最全。管理员账户可以为每个账户分配角色，并且可以为角色授权，如果管理员将角色为 user 的查询分类的权限收回，那么普通用户账户查询分类的时候就会提示“没有权限”。

此时登录普通用户角色的账户，将不会有查询分类的权限。

项目的主要菜单是用户管理，角色管理，权限管理，实现了用户，角色，权限的动态控制，分类管理，商品管理，订单管理只是为了展示权限控制的效果，并没有实际的作用。另外角色和菜单也是动态关联的，角色表 role 和菜单表 menu_list，通过第三张表role_menu_list进行多对多关联。

项目开源地址

Spring Boot+Vue.js 权限管理系统前端: https://github.com/jonssonyan/authority-ui

Spring Boot+Vue.js 权限管理系统后端: https://github.com/jonssonyan/authority

欢迎 PR，感谢 Star

项目部署

这里使用 Docker 进行部署，Docker 基于容器技术，它可以占用更少的资源，方便我们管理应用

我这里使用 CentOS Stream release 8 系统的虚拟机进行演示，虚拟机的 IP 为192.168.56.101

部署的步骤是安装 Docker -> 安装 MySQL -> 部署后端 -> 部署前端

安装 Docker、安装 MySQL 可以使用我的另外一个开源项目 install-script 来一键部署，该项目是完全开源的

开源地址如下：

Linux 平台软件一键安装脚本：https://github.com/jonssonyan/install-script

为了让大家印象更深，我这里还写了手动部署的文档，以下命令逐行执行，#为注释

安装 Docker

可以参考 Docker 的官方文档：https://docs.docker.com/engine/install/centos/ ，需要注意的是我们要设置国内源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 安装 yum-utils 软件包
yum install -y yum-utils
# 设置稳定的存储库（使用阿里云镜像）
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
# 更新缓存
yum makecache
# 安装最新版本的 Docker Engine
yum install -y docker-ce docker-ce-cli containerd.io
# 启动Docker
systemctl start docker
# 设置Docker国内源
# 创建目录
mkdir -p /etc/docker
# 添加163镜像到配置文件
cat >/etc/docker/daemon.json <<EOF
{
 "registry-mirrors":["https://hub-mirror.c.163.com","https://docker.mirrors.ustc.edu.cn"]
}
EOF
# 重新加载文件 重启docker 设置Docker开机自启
systemctl daemon-reload && systemctl restart docker && systemctl enable docker

安装 MySQL

1
2
3
4
# 拉取 Mysql 5.7.31 镜像
docker pull mysql:5.7.31
# 运行 Mysql 5.7.31
docker run -d --name my-mysql --restart always --network=host -e MYSQL_ROOT_PASSWORD=123456 -e TZ=Asia/Shanghai -v /authority/mysql:/var/lib/mysql mysql:5.7.31

注意：

安装好之后需要开放 3306 端口，可以直接使用命令禁用服务器的防火墙：systemctl stop firewalld && systemctl disable firewalld

MySQL 用户名为 root，密码为 123456，使用数据库连接工具，DataGrip 或者 Navicat，新建数据库：authority，并在数据库中执行初始化 SQL，项目的 SQL 文件为：https://github.com/jonssonyan/authority/blob/master/docs/sql/，选择该文件夹中最新版本的 SQL 执行即可。

部署后端

打包项目，并将编译后的 jar 上传至服务器，使用 IDEA 打包非常方便

这里推荐使用 lrzsz 工具将文件上传至服务器，yum install -y lrzsz

在服务器上新建 Dockerfile 文件

1
2
3
4
FROM openjdk:8u312-jdk-oracle
WORKDIR /app
COPY authority-0.0.1.jar .
ENTRYPOINT ["java","-jar","authority-0.0.1.jar"]
1
2
3
4
# 打包镜像
docker build -t authority .
# 运行容器
docker run -d --name my-authority --restart always --network=host authority

部署前端

打包项目，并将编译后的文件夹上传至服务器

执行yarn run build，编译后的文件夹为dist

在服务器上新建 Dockerfile 文件

1
2
3
FROM nginx:1.20-alpine
COPY dist /usr/share/nginx/html/
ENTRYPOINT nginx -g 'daemon off;'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 新建Nginx配置文件
mkdir -p /authority/nginx/conf.d/
cat >/authority/nginx/conf.d/default.conf <<-EOF
server {
  listen       80;
  server_name  localhost;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
  }

  location /api {
    proxy_pass http://127.0.0.1:8888/authority;
  }
}
EOF
# 打包镜像
docker build -t authority-ui .
# 运行容器
docker run -d --name my-authority-ui --restart always --network=host -v /authority/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf authority-ui

部署完成

打开浏览器，访问：192.168.56.101，API 文档地址为192.168.56.101:8888/authority/swagger-ui.html

视频教程

如果你看文字版教程看不懂，可以看我录制的视频教程。

项目介绍：https://www.bilibili.com/video/BV1Fy421h7me/

项目部署：https://www.bilibili.com/video/BV19U421d7CM/