代码地址
项目托管在GitHub上,使用Git拉取代码。
相关视频
界面
设计和实现
技术栈
前端: JavaScript、Vue.js Element axios
后端: Java、Spring Boot、Mybatis-plus、 Shiro 、JWT
部署: Docker
数据库设计
代码设计
- 动态权限控制
以下是项目中的一处代码:
1 | @RequiresRoles({"admin"}) |
权限框架使用的是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
1 | # 安装 yum-utils 软件包 |
- 设置Docker国内镜像
Docker 默认的镜像源于国内而言是有些慢,所以可以配置一下国内的镜像源,提高一下 docker pull
命令的下载速度
阿里云镜像服务参考:https://cr.console.aliyun.com/cn-shanghai/instances/mirrors
1 | # 创建目录 |
部署MySQL
1 | # 拉取 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 文件,文件内容如下
1 | FROM java:8 |
参数解释:
from java:8
拉取一个 jdk 为 1.8 的 docker imageADD
jar包添加至容器中expose
该容器暴露的端口是多少,就是 jar 在容器中以多少端口运行ENTRYPOINT
容器启动之后执行的命令,java -jar /authority.jar 即启动 jar
1 | # 打包镜像 |
打包前端并运行为容器
在前端文件夹 dist 的同一级文件夹下新建 Dockerfile 文件,文件内容如下
1 | FROM nginx:latest |
1 | # 打包镜像 |
最终效果
authority-ui--80
前端容器authority-8888
后端容器myMysql
数据库容器
打开浏览器访问服务器 IP地址
即可