前后端分离的权限管理系统设计和实现
代码地址项目托管在GitHub上,使用Git拉取代码。前端:https://github.com/jonssonyan/authority-ui后端: https://github.com/jonssonyan/authority相关视频演示视频部署视频界面设计和实现技术栈前端: JavaScript、Vue.js Element axios后端: Java、Spring Boot、Mybatis
代码地址
项目托管在GitHub上,使用Git拉取代码。
前端:https://github.com/jonssonyan/authority-ui
后端: https://github.com/jonssonyan/authority
相关视频
界面
设计和实现
技术栈
前端: JavaScript、Vue.js Element axios
后端: Java、Spring Boot、Mybatis-plus、 Shiro 、JWT
部署: Docker
数据库设计
代码设计
- 动态权限控制
以下是项目中的一处代码:
@RequiresRoles({"admin"})
@RequiresPermissions({"menuList:add", "menuList:update"})
public Result saveOrUpdate(@RequestBody MenuList menuList) {
}
权限框架使用的是Shiro,通过Shiro的注解实现接口的权限,可以设置接口必须要有某个权限或者某个角色才可以访问。一个账户可以关联一个角色,一个角色可以关联多个权限,
通过数据库中的user
permission
role
role_permission
相互的关联实现动态权限控制。
- 接口安全
通过JWT颁发token的方式实现前后端接口的安全。前端将token存档在Cookie中,每次请求接口是携带token。并通过Hibernate Validator实现参数校验。
- 无限层级分类设计
category
表中的parent_id
(父级id) path
(搜索路径,例如1-) level
(表示当前节点到根节点的距离或者层级)三个字段实现无限层级。
- 接口文档
通过Swagger实现,接口文档地址为localhost/IP:8888/authority/swagger-ui.html
项目部署
打包项目
前端使用npm包管理器,可以使用npm run build
命令将前端项目打包,最终打包好的文件夹在 dist
文件夹下
后端使用Maven进行依赖管理,可以通过 Maven
将项目打成.jar
的格式。
上传文件至服务器
在根目录新建 myDate 文件夹,里面存放上传的文件。如图所示,authority.jar
是后端文件,dist
是前端文件夹。
部署Docker
- 安装Docker
# 安装 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 fast # 更新缓存
# 安装最新版本的 Docker Engine 和容器,或转到下一步以安装特定版本
yum install docker-ce docker-ce-cli containerd.io
# 启动 Docker
systemctl start docker
- 设置Docker国内镜像
Docker 默认的镜像源于国内而言是有些慢,所以可以配置一下国内的镜像源,提高一下 docker pull
命令的下载速度
阿里云镜像服务参考:https://cr.console.aliyun.com/cn-shanghai/instances/mirrors
# 创建目录
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
# 拉取 Mysql 5.7.31 镜像
docker pull mysql:5.7.31
# 运行 Mysql 5.7.31
docker run -d --name myMysql -p 9506:3306 -v /data/mysql:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=123456 mysql:5.7.31
参数解释:
-d
后台运行容器,并返回容器 ID--name
为容器指定一个名称-p
指定端口映射,格式为:主机(宿主)端口:容器端口-v
绑定一个卷,容器的 /var/lib/mysql 映射到 主机的目录 /data/mysql-e MYSQL_ROOT_PASSWORD=123456
设置环境变量,密码设置为 123456mysql:5.7.31
使用镜像 mysql:5.7.31
部署好MySQL之后,导入数据库文件,SQL文件在后端项目/src/main/resources/sql/
文件夹下。
打包后端并运行为容器
在 jar
包的同一级文件夹下新建 Dockerfile 文件,文件内容如下
FROM java:8
VOLUME /tmp
ADD authority.jar authority.jar
EXPOSE 8888
ENTRYPOINT ["java","-jar","/authority.jar"]
参数解释:
from java:8
拉取一个 jdk 为 1.8 的 docker imageADD
jar包添加至容器中expose
该容器暴露的端口是多少,就是 jar 在容器中以多少端口运行ENTRYPOINT
容器启动之后执行的命令,java -jar /authority.jar 即启动 jar
# 打包镜像
docker build -t authority .
# 运行容器
docker run -d -p 8888:8888 --name authority-8888 authority
打包前端并运行为容器
在前端文件夹 dist 的同一级文件夹下新建 Dockerfile 文件,文件内容如下
FROM nginx:latest
COPY ./dist /usr/share/nginx/html/
EXPOSE 80
# 打包镜像
docker build -t authority-ui .
# 运行容器
docker run -d -p 80:80 --name authority-ui-80 authority-ui
最终效果
authority-ui--80
前端容器authority-8888
后端容器myMysql
数据库容器
打开浏览器访问服务器 IP地址
即可
更多推荐
所有评论(0)