Github地址

• 前端地址
• 后端地址

Gitee地址

• 前端地址
• 后端地址

项目特点

前端项目基于pure-admin 开源项目进行了改进和优化，RBAC（基于角色的访问控制）。在我项目中，后端负责验证请求地址的访问权限。

整个项目都采用响应式设计，可以兼容移动设备，除了表格显示在移动端可能不够友好外，其他方面表现良好。由于表格本身具有一定的复杂性，手机上查看效果可能不理想，目前无法对其进行修改。

登录内容

登录可以选择用户名和密码登录或者是邮箱方式登录

1. 首页定制

提供了自定义首页的功能，可以根据个人喜好替换首页内容。我将首页设计成类似Git提交的内容，以便更直观地查看信息。

2. 系统设置

系统设置包含基本的权限管理配置。

系统菜单管理

系统菜单管理功能允许您快速调整菜单内容的排序、显示和隐藏。删除功能采用逻辑删除，菜单名称通常与路由名称相同。如果菜单名称重复，系统会跳转至最后一个具有相同名称的路径，因此请确保菜单名称的唯一性。

系统菜单图标支持动态图标。

在添加外链时，路由名称即为外链地址。

用户管理

筛选条件和部门筛选可以同时进行选择。

其中系统中有一个默认用户是不会在前台用户进行展示的Administrator这个用户是系统预留，以防出错或维护使用

角色权限管理

权限管理中的权限添加支持树型结构。

在新增权限时，请求地址可以是正则表达式或者Java中的antpath，两者皆可兼容。

部门管理同样采用树型结构。

3. 系统配置

菜单图标

邮件用户配置

发送验证码时，若未配置用户默认值，则会使用默认地址发送。若默认地址也未配置，则会提示未设置默认邮箱用户。

默认选项最终只有一个。

其中默认选项无论有多少用户最终默认的只会有一个

邮件模板

第一个是发送验证码邮件模板

前端页面配置

因为这个模板作者将配置选项放在了前端文件中的public文件夹下， 配置选项现已变为动态，交给后端管理

4. 系统监控

服务监控

查看当前服务的CPU占用情况，使用SpringBoot中的actuator端点。图表每2秒请求一次，页面兼容移动设备。

后台文件管理

用户登录日志

任务执行日志

使用任务调度时执行状态都会记录在这个里面

系统缓存

项目中使用了SpringCache，如果请求的内容可以缓存在SpringCache中

5. 定时任务

6. 多语言

外部页面

环境部署

使用Docker进行部署，后端接口地址以/admin开头，但前端默认请求前缀为/api，因此在请求时需要进行替换。详细内容请参考以下【项目部署】说明。

配置相关

docker文件

# 使用官方的 Nginx 镜像作为基础镜像
FROM nginx

# 删除默认的 Nginx 配置文件
RUN rm /etc/nginx/conf.d/default.conf

# 将自定义的 Nginx 配置文件复制到容器中
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 设置时区，构建镜像时执行的命令
RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
RUN echo "Asia/Shanghai" > /etc/timezone

# 创建一个目录来存放前端项目文件
WORKDIR /usr/share/nginx/html

# 将前端项目打包文件复制到 Nginx 的默认静态文件目录
COPY dist/ /usr/share/nginx/html
# 复制到nginx目录下
COPY dist/ /etc/nginx/html

# 暴露 Nginx 的默认端口
EXPOSE 80

# 自动启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

NGINX文件

在请求中会使用代理所以会拿不到用户真实的IP地址，素以在要NGINX侠做下面的配置，这样用户在访问时就可以拿到真实的IP了

proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;

NGINX的文件

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    listen       80;
    listen       [::]:80;
    server_name  localhost;

    location / {
        root   /etc/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html;
    }

    # 后端跨域请求
    location ~/admin/ {
        proxy_pass http://172.17.0.1:8000;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    error_page  404              404.html;

    location = /50x.html {
        root   html;
    }
}

项目部署

使用WebStorm进行项目部署，项目上线时默认端口为80。因此，Docker默认暴露的IP端口也应为80，NGINX中默认暴露的端口也是80，三者应一一对应。

若无法下载，请先使用pnpm下载。若不需使用pnpm，请删除或修改相应内容。

docker配置

配置环境

设置启动端口号和项目地址机器后端请求地址

配置线上环境

设置项目启动端口号，线上环境默认请求路径为/admin，需在NGINX中将访问请求前缀更改为/admin。

配置开发环境

开发环境默认IP为7000，若与本地项目端口冲突，请修改。后端请求地址为7070。

前端设置的请求前缀为/api，但后端接受的前缀为/admin，因此需在服务中修改此内容。

修改请求路径

部署命令

docker build -f Dockerfile -t bunny_auth_web:1.0.0 . && docker run -p 80:80 --name bunny_auth_web --restart always bunny_auth_web:1.0.0

展望未来

1. 计划将文件上传服务改为本地的OSS，Minio可能会被移除。
2. 消息服务，管理员相关的消息公告内容