当前位置：首页 > news >正文

SpringBoot3+Vue3+MySQL 社区志愿服务管理系统源码前后端分离实战

news 2026/8/2 17:10:11

一、项目简介

本项目是一套基于 Spring Boot 3 + Vue 3 前后端分离架构的社区志愿服务信息管理系统。系统围绕社区志愿服务的完整业务链路，提供志愿服务项目管理、报名审核、服务时长记录、积分体系、公告发布、数据统计看板等核心功能，帮助社区高效组织志愿活动并量化志愿者的服务贡献。

系统采用前后端分离架构，后端提供 RESTful API，前端为单页应用。系统内置管理员、活动组织者、志愿者三种角色，每种角色拥有独立的操作视图与权限边界。管理员负责全局数据管理与审核，活动组织者负责项目的发布与报名审核，志愿者负责报名参与活动并记录服务时长。

二、技术栈

技术分类	说明
后端框架	Spring Boot 3.x
ORM	MyBatis-Plus
权限认证	JWT（jjwt）
密码加密	BCrypt（jBCrypt）
前端框架	Vue 3（Composition API）
UI 组件库	Element Plus
状态管理	Pinia
前端路由	Vue Router（History 模式）
图表库	ECharts
构建工具	Vite
数据库	MySQL
文件上传	Spring MultipartFile

三、功能模块

管理员端

数据概览仪表盘：展示用户总数、志愿者数、项目总数、活跃项目数、报名总数、已审核服务记录数等核心指标，便于掌握平台整体运行情况。
项目分类统计饼图：按项目分类字段统计各分类下的项目数量，以 ECharts 饼图形式可视化呈现。
月度服务时长趋势柱状图：按月份统计已审核服务记录的总时长，以柱状图展示服务时长的月度变化趋势。
志愿者服务时长排行榜：按志愿者总服务时长降序排列，取前 10 名展示，支持对优秀志愿者的激励与公示。
用户管理：提供用户分页列表，支持按用户名/姓名/手机号搜索，可新增用户、编辑用户信息、删除用户、启用/禁用用户状态。
志愿服务项目管理：分页展示全部项目，支持按关键词/分类/状态筛选，可新增项目、编辑项目、删除项目、审核项目状态（通过/拒绝）。
报名记录管理：查看所有报名记录列表，包含项目名称和用户信息，可审核报名通过或拒绝，也可删除报名记录。
服务时长记录管理：查看所有服务时长记录列表，包含项目名称和用户信息，可新增记录、编辑记录、删除记录，审核记录状态，审核通过后自动累加用户总时长。
积分记录管理：查看积分记录列表，包含用户信息，可新增积分记录、删除记录，新增时自动更新用户总积分。
公告管理：分页展示公告列表，支持按标题搜索，可新增公告、编辑公告、删除公告。
个人中心：查看个人信息、修改个人信息、修改密码。

活动组织者端

我的项目列表：查看自己发布的志愿服务项目，分页展示，支持按关键词/分类/状态筛选。
发布志愿服务项目：填写标题、描述、分类、封面图、地点、时间、最大志愿者数、联系人信息等字段，提交后进入管理员审核流程。
编辑/删除项目：对已发布的项目进行信息修改或删除操作。
项目报名记录：查看自己项目的报名记录，包含项目名称、用户姓名、报名状态等详细信息。
审核报名：对报名记录执行通过或拒绝操作，审核结果即时更新报名状态。
个人中心：查看个人信息、修改个人信息、修改密码。

志愿者端

浏览与报名项目：查看公开的志愿服务项目列表，支持按分类、关键词搜索并分页展示；每人每个项目只能报名一次，报名后等待组织者审核。
我的报名记录：查看自己提交的报名记录，包含项目名称、审核状态等详细信息。
已通过项目列表：查看已审核通过的项目，确认自己参与的服务项目。
我的服务时长记录：查看服务时长记录列表，包含项目名称、服务日期、时长、审核状态等详细信息。
添加服务时长记录：填写项目、服务日期、时长、备注等信息提交记录，等待管理员审核。
我的积分记录：查看积分变动记录，包含积分变动类型、描述等详细信息。
个人中心：查看个人信息、修改个人信息、修改密码。

四、项目总结

本项目技术选型主流，后端采用 Spring Boot 3 + MyBatis-Plus，前端采用 Vue 3 + Element Plus + Pinia + ECharts，前后端通过 JWT 完成身份认证与权限控制。系统覆盖了志愿服务管理场景中的核心业务闭环，从项目发布、报名审核、时长记录到积分累计，各角色职责清晰、流程完整。管理员端内置多种数据可视化图表，便于运营决策。项目代码结构清晰，注释完善，附带数据库初始化脚本与万字文档，适合作为 Java 全栈开发的学习案例或二次开发的基础工程，也可用于课程设计、毕业设计等场景。