YF 后台管理系统
项目简介
-
项目采用多种流行技术 , 其中技术栈包含但不限于
- SpringBoot3 、SpringSecurity6 、SpringAi、SpringEmail 、SpringCache 、MybatisPlus...
- Vue3、TypeScript、ElementPlus、VueRouter、Pinia...
- Mysql、Redis、Minio、Caffeine...
- TensorFlow、JustAuth、ffmpeg、test4j、sensitive-word、vosk...
- Alipay、OSS、COS、OBS....
-
项目为学习性后台管理系统 , 有诸多流行技术 , 持续更新 , 免费远程答疑 , 可根据基础版 yf-vue3-admin-base 修改为任意系统。
项目特色
- 简单易学 : 在项目关注度高时会在 bilibili 录制项目讲解视频
- 授权登录 : 采用JWT颁发授权信息,支持刷新Token,二次封装JustAuth并且通过简单工厂模式+模版方法模式结合SpringSecurity进行多种登录方式。
- 安全可用 : Redis多规则限流、Redis分布式防重复提交、AOP日志处理、数据脱敏、脏词过滤...
- 基础设施完善 : 用户、第三方授权、角色、菜单、字典、部门、日志等完善的权限系统功能。
- 文件模块 : 支持多种平台文件上传MinIo、OSS、COS、OBS....
- AI助手 : 使用SpringAi对接ChatGPT、ollama...
- 聊天室 : 支持集群环境下websocket通讯
- 丰富工具库 : TreeUtil(一行代码构建树形结构) 、TensorFlow 模型访问 、ip解析具体地址...
- 丰富有趣功能 : OCR、ffmpeg、脏词过滤、字幕识别...
注意事项
项目为一人一号 , Demo 账号为公用号,大家可以使用自己的账号进行测试,邮箱、三方登录均可自动注册。
项目展示
| 地址 | 链接 |
|---|---|
| 系统首页 | 系统首页 |
| 项目登录页 | 项目登录页 |
| Gitee源码 | 个人主页 |
项目文档更新
为方便大家快速掌握项目内容,我整理了非常详尽的文档库,涵盖了前后端开发的各个方面。项目中可能遇到的难点、常见问题,基本都能在这里找到解决方案。但是肯定还有未涉及的细节或问题我会慢慢添加上,欢迎催更!你也可以在开源社区中加我私聊,我每天都在线,乐于解答大家的疑问。您的支持是我最大的动力!!!
前端开发文档
- 🎨 想弄一个节日头像,结果全是广告!带你用 Canvas 自己制作节日头像
- 🔐 全面解析后台管理系统前端如何实现权限控制 ( 全流程实战 )
- 🌐 快速打造动态网站首页:免费 API 集成指南
- 💻 快速掌握 Vue3 + Element Plus 一键换肤功能,轻松切换主题
- 👥 一文带你入门 SSE | 使用 useEventSource 实现在线用户统计功能
- 📊 告别冗余代码:带你封装一个 ECharts Hook
- 💡 API 封装技巧:用 Axios 实现高效前端请求管理
- 🔄 告别频繁登录:教你用 Axios 实现无感知双 Token 刷新
- 🔧 开源 | 自研前端 Vue3 项目的基础模版
后端开发文档
- 🌐 放弃 Websocket,使用 SSE 轻松实现高效功能
- 🌳 一行代码搞定平面数据转树形结构 | 适用于多级菜单等场景
- 🔒 Hutool 实现优雅数据脱敏
- 📧 SpringBoot 实现邮箱验证码:最佳实践解析
- 📂 优雅设计多平台文件上传功能
- 🤖 SpringBoot 集成 TensorFlow:图片内容安全检测
- 📝 Java 轻松实现 OCR:SpringBoot 集成 Tess4j
- 🔄 Redis 集群负载均衡中的 WebSocket 在线通信解决方案
- 🔐 一篇文章搞定 SpringBoot 的 Jwt 无感刷新与单账号登录
- 🚦 Redis 如何多规则限流与防重复提交
- 🔑 Spring Security 源码解析:多种登录方式实现
- 📄 AOP 优雅记录 SpringBoot 日志信息
辅助工具文档
项目展示
个人作品展示
登录页
登录页-暗黑模式
首页
个人中心
项目运行
项目环境
| 环境 | 版本 |
|---|---|
| Java | 17+ |
| Maven | 3+ |
| Node | 18+ |
| Redis | 5+ |
| Mysql | 5+ |
运行命令
## 将项目下载到本地
git clone https://gitee.com/fateyifei/yf.gityf-vue-admin ( 前端服务 )
- 前提:需要有 Node 环境,系统中安装过 pnpm
## 已经安装 pnpm 则可不执行 npm install pnpm -g ## 切换目录 cd yf/yf-vue-admin ## 安装依赖 pnpm install ## 启动项目 pnpm run dev ## 接下来会自动打开项目到网页,如果未部署后端服务请设置 .env.production 中 VITE_APP_API_URL = http://yf.wiki/api
yf-boot-admin ( 后端服务 )
- 前提 : 已经配置好 java17、 maven 、redis 、mysql,并且mysql数据库已经导入
- 注意 : 导入数据库后默认管理员账户 => 用户名 : admin 密码 : 12345678
## 切换目录 cd yf/yf-boot-admin ## 打包 mvn clean package -DskipTests ## 在yf/yf-boot-admin/yf-admin 下找到 jar 包并运行 java -jar target/yf-admin-<version>.jar > xx.log 2>&1 &
项目部署
## 前端项目 ( .env.production 可修改部署配置 ) yarn run build ## 后端项目 ( application-prod 可修改部署配置信息 ) mvn clean package -DskipTests ## nginx 配置 ### 项目存储在 ( nginx/html/{.env.production中VITE_APP_PUBLIC_PATH}下 , 可以直接修改 dist 文件夹名 ) server { # 监听端口80 listen 80; server_name localhost; # SPA项目 -> yf-vue-admin location /yf-vue-admin/ { root /www/server/nginx/html; index index.html; try_files $uri $uri/ /yf-vue-admin/index.html; } # 后台服务 -> yf-boot-admin location /api { # 后端服务器地址(您的后端地址) proxy_pass ????; # 设置转发给后端的请求头 # 使用客户端请求的主机名作为后端请求的Host头 proxy_set_header Host $host; # 将客户端真实IP地址传递给后端 proxy_set_header X-Real-IP $remote_addr; # 将客户端和代理服务器链的IP地址传递给后端 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 传递使用的协议(HTTP或HTTPS) proxy_set_header X-Forwarded-Proto $scheme; # 传递请求的主机名 proxy_set_header X-Forwarded-Host $host; # 传递请求的服务器端口 proxy_set_header X-Forwarded-Port $server_port; # WebSocket 连接 # 使用HTTP/1.1协议以支持WebSocket proxy_http_version 1.1; # 处理WebSocket协议升级请求 proxy_set_header Upgrade $http_upgrade; # 处理WebSocket协议升级请求 proxy_set_header Connection "Upgrade"; # SSE 连接 # 禁用代理缓冲以支持Server-Sent Events (SSE) proxy_buffering off; # 请求速率限制 # 设置请求速率限制 #limit_req zone=one burst=20 nodelay; } } ### 后端项目任意位置运行 , 请记住端口以及地址 ( 需要服务器开发地址访问权限 , 后续通过 nginx 进行代理 ) java -jar target/yf-admin-<version>.jar > ??.log 2>&1 &
项目注意事项
提交规范
| 前缀 | 描述 |
|---|---|
| feat: ✨ | 新功能 |
| fix: 🐛 | bug修复 |
| docs: 📚 | 仅文档更改 |
| style: 🌈 | 不影响代码含义的更改(空白、格式设置、缺失分号等) |
| refactor: ♻️ | 既不修复bug也不添加特性的代码更改 |
| perf: 🚀 | 改进性能的代码更改 |
| test: 🧪 | 添加缺少的测试或更正现有测试 |
| chore: 🔨 | 对构建过程或辅助工具和库(如文档)的更改 |
| revert: ↩️ | 回滚 commit |
交流群 🚀
欢迎 start , 欢迎交流技术 , 如果有任何不懂的地方可以联系我 , 可以无偿帮您解决 , 相当于大家互相交流学习
微信 (加好友后邀请进群):





