基于Springboot + vue3实现的亚运会志愿者管理系统

37 阅读3分钟

项目描述

本系统包含管理员、志愿者两个角色。
管理员角色:
  1. 轮播图管理:管理轮播图配置,包括新增、查看、修改、删除轮播图。
  2. 管理员管理:管理管理员信息,包括新增、查看、修改、删除管理员。
  3. 志愿者管理:管理志愿者信息,包括新增、查看、修改、删除志愿者。
  4. 志愿者培训管理:管理志愿者培训信息,包括新增、查看、修改、删除培训内容。
  5. 风采展示管理:管理风采展示信息,包括查看、修改、删除、审核风采展示内容。
  6. 志愿服务岗位管理:管理志愿服务岗位信息,包括新增、查看、修改、删除岗位。
  7. 志愿服务签到管理:管理志愿服务签到信息,包括查看、审核签到记录。
  8. 志愿服务签退管理:管理志愿服务签退信息,包括查看、删除签退记录。
  9. 任务分配管理:管理任务分配信息,包括新增、查看、修改、删除任务。
  10. 任务完成管理:管理任务完成信息,包括查看、删除任务完成记录。
  11. 考勤信息管理:管理考勤信息,包括新增、查看、修改、删除、导出考勤记录,以及首页统计功能。
志愿者角色:
  1. 风采展示管理:管理风采展示信息,包括新增、查看、修改、删除风采展示内容。
  2. 志愿服务签到管理:管理志愿服务签到信息,包括查看、签退签到记录。
  3. 志愿服务签退管理:管理志愿服务签退信息,包括查看、删除签退记录。
  4. 任务分配管理:管理任务分配信息,包括查看、完成任务。
  5. 任务完成管理:管理任务完成信息,包括查看、删除任务完成记录。
  6. 考勤信息管理:查看考勤信息。

技术选型

开发工具:Idea + Vscode 运行环境:JDK 1.8 + Maven + MySQL 5.7以上 + Node.js 14 服务端技术:SpringBoot + Mybatis-Plus + Maven 前端技术:Vue3 + Axios + Element-UI

系统截图

1.首页

图片

2.风采展示

图片

3.志愿服务岗位

图片

4.志愿者培训

图片

5.后台登录

图片

6.志愿者管理

图片

7.志愿者培训管理

图片

8.风采展示管理

图片

9.志愿服务岗位管理

图片

10.志愿服务签到管理

图片

11.志愿服务签退管理

图片

12.任务分配管理

图片

13.任务完成管理

图片

14.考勤信息管理

图片

运行步骤

准备环境

安装JDK 1.8、Maven、Node.js 14 和 MySQL 5.7以上

创建数据库

使用Navicat工具创建数据库并导入SQL脚本

配置后端

修改application.yml中的数据库连接信息(用户名/密码/库名)

启动后端服务

进入后端项目(/server_code) 执行:

mvn clean install
mvn spring-boot:run

前端依赖安装

进入前端目录(/manage_code或者/client_code) 执行安装命令:

npm install

启动前端服务

执行启动命令:

npm run serve 

访问系统

后端接口系统访问地址: http://localhost:8080 后台系统前端访问地址: http://localhost:8081 前台系统前端访问地址: http://localhost:8082

常见问题

端口冲突
  • 修改后端配置文件application.yml
  • 修改前端配置文件vue.config.js
前端安装依赖失败
  • 删除node_modules、package-lock.json文件
rm -rf node_modules package-lock.json
  • 清除缓存
npm cache clean --force
  • 切换npm镜像源
npm config set registry https://registry.npmmirror.com