代码地址

项目托管在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

数据库设计

数据库设计

代码设计

  1. 动态权限控制

以下是项目中的一处代码:

@RequiresRoles({"admin"})
@RequiresPermissions({"menuList:add", "menuList:update"})
public Result saveOrUpdate(@RequestBody MenuList menuList) {
}

权限框架使用的是Shiro,通过Shiro的注解实现接口的权限,可以设置接口必须要有某个权限或者某个角色才可以访问。一个账户可以关联一个角色,一个角色可以关联多个权限,
通过数据库中的user permission role role_permission相互的关联实现动态权限控制。

  1. 接口安全

通过JWT颁发token的方式实现前后端接口的安全。前端将token存档在Cookie中,每次请求接口是携带token。并通过Hibernate Validator实现参数校验。

  1. 无限层级分类设计

category表中的parent_id(父级id) path(搜索路径,例如1-) level(表示当前节点到根节点的距离或者层级)三个字段实现无限层级。

  1. 接口文档

通过Swagger实现,接口文档地址为localhost/IP:8888/authority/swagger-ui.html

项目部署

打包项目

前端使用npm包管理器,可以使用npm run build命令将前端项目打包,最终打包好的文件夹在 dist 文件夹下

后端使用Maven进行依赖管理,可以通过 Maven 将项目打成.jar的格式。

上传文件至服务器

在根目录新建 myDate 文件夹,里面存放上传的文件。如图所示,authority.jar 是后端文件,dist 是前端文件夹。

服务器文件

部署Docker

  1. 安装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
  1. 设置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 设置环境变量,密码设置为 123456
  • mysql: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 image
  • ADD 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地址 即可

Logo

前往低代码交流专区

更多推荐