本系统利用 JAVA程序设计语言，idea和eclipse均可运行。通过Spring MVC、Spring和MyBatis三大框架技术实现了志愿者信息管理、活动发布管理、志愿者申请管理、公告通知管理以及系统设置等一系列功能，为志愿者和管理者提供一个优秀的网络志愿服务平台。使用Eclipse2022作为开发工具，利用 MySQL 8.0对该数据库进行了支持。系统中还涉及了Web，JavaScript，Vue，Html5+Css3等等。本系统分为前台和后台两大功能模块，前台端主要功能有：用户注册登录、查看组织信息、查看志愿者活动、查看新闻资讯等功能。而后台端主要有：用户信息管理、志愿者申请管理、组织申请管理、活动管理、活动打卡管理、公告资讯管理、系统管理等功能。

（项目含有 详细说明文档）

用户功能

2.2.1 用户注册

新用户在注册界面填写账号、密码、用户姓名、姓名、所在学院、手机、邮箱以及邮箱所收到的验证码;“注册”按钮验证通过之后，就可以在登陆页面输入新注册的账号密码进行登陆系统，如图所示

图2.2用户注册功能图

功能实现：新用户进入系统需要注册账号信息才可以；用户在注册界面需要填写账号、密码、用户姓名、姓名、所在学院、手机、邮箱以及邮箱所收到的验证码点击“注册”按钮验证通过之后触发点击事件，通过url找到并调用YonghuController类的 register方法通过接口yonghuService业务层调用接口insert方法执行注册逻辑,把信息持久保存到yonghu数据表，然后就可以去登录页登录本网站预览活动，查看组织信息等操作，也可以去申请志愿操作，对活动进行评论操作；如果用户已存在这返回给页面提示“注册用户已存在”。

2.2.2 登录

用户登录系统需要输入账号、密码，选择角色验证通过之后才能够进入系统。登录功能图，如图所示。

图2.3用户登录功能图

功能实现：在登陆界面用户输入帐号、密码后，点击登录触发事件，通过url找到并调用在控制器中YonghuController类的login()登录控制方法通过接口yonghuService业务层调用接口selectOne（）方法查询yonghu数据表该用户是否存在。若存在，然后通过tokenService接口调用generateToken（）方法接口获取到用户token信息密码账号跟对应输入密码与输入的密码对比，校验通过则成功进入到系统首页。如图所示：反之则需要重新输入；验证通过才可正常跳转；若无账号则需要注册页面进行账号注册，注册成功后 在登录页面输入账号面进行登录操作。

图2.4用户首页

2.2.3 组织信息介绍

用登陆成功后，点击组织信息，可以查看组织；点击组织可以查看组织详情；如图所示。

图2.5组织信息介绍功能图

图2.6组织详情介绍功能图

功能实现：用户登录成功后，在系统首页，点击活动信息触发a标签进行页面跳转，进入页面默认执行方法通过url访问到并调用ZuzhixinxiController类中的list（）方法使用get方法查询活动信息返回给页面显示；点击活动 detail（）方法通过url并携带组织信息id访问并调用ZuzhixinxiController类中detail（）方法根据id通过业务层zuzhixinxiService接口查询对应Zuzhixinxi数据表的组织详情返回到detail页面进行数据回显。

2.2.4 志愿者活动

志愿者活动，可以查看到所有发布的志愿者活动，点击活动即可查看到对应的活动详情（当用户申请成为志愿者后可以在活动页面活动报名），如图所示。

图2.7志愿活动功能图

图2.8志愿活动详情功能图

功能实现：在系统首页，用户点击志愿者活动通过a标签url访问并调用ZhiyuanhuodongController类中的list（）方法通过zhiyaunhuodongService业务层接口调用queryPage接口查询所有的志愿者活动信息。点击活动通过post方法携带参数id访问并调用ZhiyuanhuodongController的detail（）方法通过业务层zhiyaunhuodongService接口的detail（）方法根据活动id查询志愿者活动详情返回到detail页面进行显示。

活动报名（用户成为志愿者后）；在detail页面，当用户成为志愿者后可以在详情页面进行活动报名申请；当志愿者点击报名触发点击事件进行跨表操作跳转到huodongbaoming文件夹下 的add页面；填写信息后点击提交触发事件；以http.requestJson('huodongbaoming' + '/add', 'post', data, function(res) 形式访问到huodongbaoming Controller类的add方法执行活动报名信息保存逻辑到huodongbaoming信息表中。

2.2.5 新闻资讯功能介绍

用户在留言反馈模块，可以查询留言，发布留言；如图所示。

图2.9新闻资讯功能图

图2.10新闻资讯详情功能图

功能实现：在系统首页，用户点击新闻资讯通过a标签url会跳转到到list页面，进入到list页面默认执行事件通过url路径访问并调用NewController类的list（）方法通过newService业务层接口调用queryPage（）方法查询new数据表的所有的新闻资讯信息。点击新闻资讯触发点击事件通过post方法携带参数新闻资讯id访问NewsController的detail（）方法通过业务层newsService接口的detail（）方法根据参数id查询新闻资讯详情返回到detail页面进行展示显示。

2.2.6 志愿者申请

用户在志愿者申请功能可以进行申请志愿者；如图所示

图2.11志愿者申请管理功能图

功能实现：登录系统之后点击志愿者申请会跳转到志愿者申请页面,进入页面默认会执行时间通过get方法调用YonghuController类的page方法查询当前用户信息返回给页面进行显示；查看详情会调用后端YonghuController的info方法根据id通过yonghuservice接口查询用户详情返回到页面 进行显示;新增会调用后端ZhiyuanzheController的 update方法通过yonghuservice接口更新用户状态为申请中到yonghu表。

2.3 管理员模块

2.3.1 用户管理功能图[WU1] [cx2] [cx3] 

管理员登录系统之后点击查看所有的用户信息，在此功能可以新增用户，删除用户，修改用户,对用户信息进行删除。如图所示。

图2.12用户管理功能图

功能实现：管理员点击用户管理会跳转到list页面,进入页面默认会执行时间通过get方法调用YonghuController类的page方法查询所有的用户信息返回给list页面遍历进行显示；查看详情会调用后端YonghuController的info方法根据id通过yonghuservice接口查询用户详情返回到页面 进行显示;新增会调用后端YonghuController的 save方法通过yonghuservice接口保存用户信息到yonghu表；删除会调用delete方法通过yonghuservice接口根据id进行删除用户信息。

2.3.2 志愿者申请管理

管理员在此功能可以对用户发起的志愿者申请进行审批;如图所示。

图2.13志愿者申请管理功能图

功能实现：管理员点击志愿者申请管理会跳转到list页面,进入页面默认会执行时间通过get方法调用YonghuController类的page方法查询所有的用户信息返回给list页面遍历进行显示；查看详情会调用后端YonghuController的info方法根据id通过yonghuservice接口查询用户详情返回到页面进行显示;若用户数据表的status字段为1是代表该用户申请志愿者中;操作一览会对应的显示审核按钮,审核通过yonghu表的status字段更新为3代表审核通过,页面审核按钮隐藏;用户角色更新为志愿者。

2.3.3 志愿组织管理

管理员进入系统之后在志愿者组织功能可以查看、修改组织信息、删除志愿者组织、新增志愿者组织等操作。

图2.14志愿者组织管理功能图

功能实现：管理员点击志愿者活动会跳转到zhiyaunzuzi页面,进入 页面 会默认加载数据;通过配置路径使用get方法调用zhiyaunzuziController类的page方法查询所有的组织信息返回给页面遍历进行显示；点击详情按钮详情会调用后端ZhiyaunzuziController的info方法根据id通过zhiyaunzuziservice接口查询用户详情返回到页面 进行显示;新增会调用后端zhiyaunzuziController的 save方法通过zhiyaunzuziservice接口保存组织信息到zhiyaunzuzi表；删除会调用delete方法通过zhiyaunzuziservice接口根据id进行删除志愿者组织信息。

2.3.4 志愿活动管理

管理登录系统在志愿活动可以查看志愿者组织发布的志愿者活动信息；查看 活动评论信息，也可删除志愿者活动，如图所示。

图2.15 志愿者活动管理功能图

功能实现：管理员登录成功后，点击志愿者活动会跳转到zhiyuanhuodong页面,进入页面 会默认加载数据;通过配置路径使用get方法调用zhiyuanhuodongController类的page方法查询所有的志愿者活动信息返回给页面遍历进行显示；点击详情按钮详情会调用后端zhiyuanhuodongController的info方法根据id通过zhiyaunzuziservice接口查询志愿者活动详情返回到页面进行显示;删除会调用delete方法通过zhiyuanhuodongservice接口根据id进行删除志愿者活动信息。

2.3.5 活动打卡管理

管理登录系统之后进点击活动打卡管理就可以查看到志愿者活动志愿者打卡的信息，可以对打卡记录进行删除操作；如图所示。

图2.16活动打卡管理功能图

功能实现：管理员登录成功后，点击活动打卡会跳转到huodongdaka页面,进入页面 会默认加载数据;通过配置路径使用get方法调用huodongdakaController类的page方法查询所有的志愿者活动打卡信息返回给页面遍历进行显示；点击详情按钮详情会调用后端huodongdakaController的info方法根据id通过huodongdakaservice接口查询志愿者活动打卡详情返回到页面进行显示;删除会调用delete方法通过huodongdakaservice接口根据id进行删除志愿者活动打卡信息。

2.3.6 通知公告管理

管理登录系统之后进点击通知公告就可以查看到志愿者组织发布的通知公告的信息，可以通知公告进行删除操作；如图所示。

图2.17通知公告管理功能图

功能实现：管理员登录成功后，点击活动打卡会跳转到tongzhigonggao页面,进入页面 会默认加载数据;通过配置路径使用get方法调用tongzhigonggaoController类的page方法查询tongzhigonggao表中所有的志愿者组织发布的通知公告信息返回给页面遍历进行显示；点击详情按钮详情会调用后端tongzhigonggaoController的info方法根据id通过tongzhigonggaoservice接口查询通知公告详情详情返回到页面进行显示;删除会调用delete方法通过tongzhigonggaoservice接口根据id进行删除志愿者组织发布的通知公告。

2.3.7 系统管理

管理登录系统之后进点击新闻资讯，就可以查看到已发布新闻资讯信息，可以对新闻资讯进行修改操作，也可以新增新的新闻资讯进项发布操作，可以删除已发布的新闻资讯；点击轮播图管理可以对前台页面展示的轮播图片进行修改操作；如图所示。

图2.18新闻资讯管理功能图

图2.19轮播图管理功能图

功能实现：管理员登录成功后，点击新闻资讯跳转到news页面,进入页面会默认加载数据;通过配置路径使用get方法调用newsController类的page方法查询news表中所有的已发布的新闻资讯信息返回给页面遍历进行显示；点击详情按钮详情会调用后端newsController的info方法根据id通过newsservice接口查询新闻资讯详情信息返回到页面进行显示;删除会调用delete方法通过newsservice接口根据id进行删除新闻资讯信息；新增会调用后端newsController的 save方法通过newsservice接口保存新闻资讯信息到news数据表中。

2.4 志愿组织管理模块

2.4.1 组织申请管理

志愿者组织在组织申请管理可以对志愿者发起的组织申请进行审批;如图所示。

图2.20组织申请管理功能图

功能实现：组织管理点击组织申请管理会跳转到list页面,进入页面默认会执行时间通过get方法调用zuzhishenqingController类的page方法查询所有的志愿者发起的组织申请信息返回给list页面遍历进行显示；查看详情会调用后端zuzhishenqingController的info方法根据id通过zuzhishenqingservice接口查询用组织申请信息返回到页面进行显示;若申请通过zuzhishenqing数据表申请sfsh字段更新为是；志愿者加入该组织。

2.4.2 组织信息管理

志愿者组织进入系统之后在组织信息功能可以查看到已发布的组织信息，并且可以对组织信息进行修改操作。

图2.21组织信息管理功能图

功能实现：组员组织登录系统之后点击组织信息会跳转到zuzhixinxi页面,进入 页面 会默认加载数据;通过配置路径使用get方法调用zuzhixinxiController类的page方法查询该志愿发布的组织信息返回给页面遍历进行显示；点击详情按钮详情会调用后端zuzhixinxiController的info方法根据id通过zuzhixinxiservice接口查询组织详情返回到页面 进行显示;新增会调用后端zuzhixinxiController的 save方法通过zuzhixinxiervice接口保存组织信息到zuzhixinxi表；删除会调用delete方法通过zuzhixinxiservice接口根据id进行删除者组织信息。

2.4.3 志愿活动管理

志愿组织登录系统在志愿活动可以查看志愿者组织发布的志愿者活动信息；查看 活动评论信息，也可删除志愿者活动，如图所示。

图2.22 志愿者活动管理功能图

功能实现：志愿组织登录成功后，点击志愿者活动会跳转到zhiyuanhuodong页面,进入页面 会默认加载数据;通过配置路径使用get方法调用zhiyuanhuodongController类的page方法查询所有的志愿者活动信息返回给页面遍历进行显示；点击详情按钮详情会调用后端zhiyuanhuodongController的info方法根据id通过zhiyaunzuziservice接口查询志愿者活动详情返回到页面进行显示; 新增会调用后端zhiyuanhuodongController的 save方法通过zhiyuanhuodongservice接口保存志愿活动信息到zuzhixinxi表；删除会调用delete方法通过zhiyuanhuodongservice接口根据id进行删除志愿者活动信息。

2.4.4 活动报名管理

志愿组织登录系统之后进点击活动报名管理就可以查看到志愿者发起的活动申请信息，志愿组织可以对参加志愿活动 的志愿者进行打卡时常记录，也可对活命信息进行删除操作；如图所示。

图2.23活动报名管理功能图

功能实现：志愿者组织登录成功后，点击活动打卡会跳转到huodongbaoming页面,进入页面 会默认加载数据;通过配置路径使用get方法调用huodongbaomingController类的page方法查询该志愿者组织发布的志愿者活动报名信息返回给页面遍历进行显示；点击详情按钮详情会调用后端huodongbaomingController的info方法根据id通过huodongbaomingservice接口查询志愿者活动打卡详情返回到页面进行显示;删除会调用delete方法通过huodongbaomingservice接口根据id进行删除志愿者活动报名信息；点击活动打卡则对该志愿者针对活动参加 时常信息等进行记录，填写信息点击 保存进行跨表操作跳转到huodongdakacontroller的add方法，执行保存打开信息到huodongdaka数据表。

2.4.5 活动打卡管理

志愿组织登录系统之后进点击活动打卡管理就可以查看到该志愿组织发布的志愿者活动志愿者打卡的信息，可以对打卡记录进行删除操作；如图所示。

图2.24活动打卡管理功能图

功能实现：志愿者组织登录成功后，点击活动打卡会跳转到huodongdaka页面,进入页面 会默认加载数据;通过配置路径使用get方法调用huodongdakaController类的page方法查询该志愿者组织发布的志愿者活动打卡信息返回给页面遍历进行显示；点击详情按钮详情会调用后端huodongdakaController的info方法根据id通过huodongdakaservice接口查询志愿者活动打卡详情返回到页面进行显示;删除会调用delete方法通过huodongdakaservice接口根据id进行删除志愿者活动打卡信息。

2.4.6 通知公告管理

组织管理登录系统之后进点击通知公告就可以查看到志愿者组织发布的通知公告的信息，可以通知公告进行删除操作；如图所示。

图2.25通知公告管理功能图

功能实现：志愿组织登录成功后，点击活动打卡会跳转到tongzhigonggao页面,进入页面 会默认加载数据;通过配置路径使用get方法调用tongzhigonggaoController类的page方法查询tongzhigonggao表中所有的志愿者组织发布的通知公告信息返回给页面遍历进行显示；点击详情按钮详情会调用后端tongzhigonggaoController的info方法根据id通过tongzhigonggaoservice接口查询通知公告详情详情返回到页面进行显示; 新增会调用后端tongzhigonggaoController的 save方法通过tongzhigonggaoservice接口保存通知公告信息到tongzhigonggao表；删除会调用delete方法通过tongzhigonggaoservice接口根据id进行删除志愿者组织发布的通知公告