一、项目背景
社区志愿服务长期依赖线下登记、微信群通知、纸质签到等方式，存在活动信息分散、报名统计繁琐、服务时长难以核算、志愿者档案缺失等问题。本文介绍一套前后端分离的社区志愿者服务系统，用一套系统打通"活动发布 → 报名审核 → 签到签退 → 时长统计"的完整业务闭环。
二、系统解决的问题
| 传统痛点 | 系统方案 |
|---|---|
| 活动信息靠群消息刷屏，易遗漏 | 活动统一发布与上下架管理，志愿者端集中浏览 |
| 报名靠人工接龙、统计易出错 | 在线报名 + 后台审核，状态流转清晰可追溯 |
| 服务时长靠手工记录，易造假 | 签到签退自动计算服务时长，形成个人服务档案 |
| 志愿者身份无审核，管理混乱 | 志愿者注册与审核机制，人员信息统一归档 |
| 权限一刀切，数据无隔离 | 基于 RBAC 的菜单权限 + 按钮权限细粒度控制 |
三、核心功能
系统采用管理端与志愿者端双角色视角设计，两种角色在同一系统中完成各自的业务操作。
1. 志愿者端
- 注册与登录：志愿者自助注册，经管理员审核后生效
- 首页：活动概览与快捷入口
- 志愿服务
- 志愿活动：浏览活动列表、查看详情、在线报名
- 我的服务：查看个人报名记录与服务时长统计
2. 管理端
- 志愿管理
- 活动管理：活动发布、编辑、上下架
- 报名管理：报名信息审核、通过/驳回
- 志愿者管理：志愿者信息审核与维护
- 系统管理
- 账号管理：用户账号维护
- 角色管理：角色定义与权限分配
- 菜单管理：菜单与按钮级权限配置
四、技术架构
1. 技术选型
| 层次 | 技术 |
|---|---|
| 后端语言 | Java 21 |
| 后端框架 | Spring Boot 2.7 + MyBatis-Plus |
| 数据库 | MySQL 8.0 |
| 前端框架 | Vue 3 + Element Plus |
| 构建工具 | Maven 3.9 / Vite 5 |
| 开发工具 | IntelliJ IDEA / VSCode |
2. 架构设计
采用前后端分离架构：后端提供统一的 RESTful API，前端通过 HTTP 接口交互，职责边界清晰，便于独立开发与部署。
Vue3 + Element Plus (前端)
│ HTTP / JSON
▼
Spring Boot RESTful API (后端)
│ MyBatis-Plus
▼
MySQL 8.0
3. 关键技术点
- JWT 认证：无状态令牌鉴权，前后端分离场景下更适配
- MD5 盐值加密：用户密码加盐存储，避免明文与彩虹表风险
- Druid 连接池：数据库连接复用与监控
- MyBatis-Plus：简化 CRUD，减少样板代码
- 自定义拦截器：统一处理登录校验与权限拦截
- RBAC 权限模型：用户—角色—菜单/按钮三级关联，实现菜单可见性与按钮操作权限的细粒度控制
五、项目亮点
- 业务贴近真实场景：覆盖活动发布与上下架、志愿者注册与审核、活动报名与审核、签到签退与服务时长自动计算等核心流程。
- 双角色视角：管理端与志愿者端在同一系统中无缝切换，完整还原志愿服务管理的业务闭环。
- 企业级组件实践：JWT、盐值加密、连接池、拦截器、RBAC 等常用组件落地，贴近企业开发规范。
- 工程化思维：前后端分离 + 统一接口规范，便于扩展与维护。
六、总结
该系统以社区志愿服务真实业务为蓝本，用 Spring Boot + Vue3 的技术组合实现了从活动发布到服务时长统计的全流程数字化管理，既解决了线下管理的效率与可信度问题，也是一套适合全栈开发者实践 RBAC 权限设计、前后端分离架构与业务闭环建模的完整案例。
演示站： test.wwwoop.com/?s=/zhi-yua…
有需要可以查看预览~
