前后端分离vue+Nodejs社区志愿者招募管理系统

1、首页
1)滑动的社区照片册
使用轮播图,对社区的活动纪念与实时事件宣传。
每个图片附有文字链接,点击跳转对应社区要闻具体页。
2)社区公告栏
日常的社区公告以及系统说明在此区域中进行说明与展示。
2、志愿活动
1)志愿活动发布
想发布需要登录
2)志愿者招募
所有的志愿者招募信息都会以模块化展出以方面用户进行浏览,没有登录也能浏览,但是报名时需要登录.
3、社区要闻
展示一些社区要闻(分页显示),标题链接,点击进入详细界面。
4、社区志愿者积分榜
从数据库读取所有志愿者的用户名和积分信息,从高到低显示前一百名(分页显示)
5、登录
点击跳转登录界面
运行软件:vscode
前端nodejs+vue+ElementUi
语言 node.js
框架:Express/koa
前端:Vue.js
数据库:mysql
开发软件:VScode/webstorm/hbuiderx均可
备注:有搜索功能的地方都用模糊查询,多条查询结果都用分页显示。前后端分离vue+Nodejs社区志愿者招募管理系统_第1张图片前后端分离vue+Nodejs社区志愿者招募管理系统_第2张图片前后端分离vue+Nodejs社区志愿者招募管理系统_第3张图片前后端分离vue+Nodejs社区志愿者招募管理系统_第4张图片前后端分离vue+Nodejs社区志愿者招募管理系统_第5张图片
 系统设计遵循界面层、业务逻辑层和数据访问层的Web开发三层架构。采用B/S结构,使得系统更加容易维护。社区志愿者招募管理系统主要实现角色有管理员和用户,管理员在后台管理志愿者申请模块、招募信息模块、用户模块、相册信息模块、用户表模块、token表模块、收藏表模块、社区公告模块、社区要闻模块、在线留言模块、积分排行模块、积分获得模块、活动信息模块、活动报名模块、相册信息评论表模块、社区公告评论表模块、活动信息评论表模块、配置文件模块。 前台页面和后台管理页面使用vue,JavaScript,HTML,CSS等技术开发,使用MySql作为数据持久化存储工具对社区志愿者招募管理系统的用户等角色权限对应的功能等进行存储。 。采用vscode集成IDE对社区志愿者招募管理系统统进行开发,整合系统的各个模块。 拟开发的社区志愿者招募管理系统通过测试,确保在最大负载的情况下稳定运转,各个模块工作正常,具有较高的可用性。系统整体界面简洁美观,用户使用简单,满足用户需要。在因特网发展迅猛的当今社会,社区志愿者招募管理系统必然会成为在数字信息化建设的一个重要方面。 本文阐述了开发的社区志愿者招募管理系统优势,并对所做系统的分析、设计及实现过程做了详细介绍。系统完成后真正实现了社区志愿者招募管理系统的网络化,本次的系统开发是社区志愿者招募管理系统网络化的推进,具有深远意义


一、用户功能模块
1、个人信息管理
用户通过此功能可以对密码进行修改,也可以对自己的个人信息(用户名、性别、电子邮件、联系电话、个人简历附件)进行查看和修改的功能。
2、查看招募志愿者信息
用户通过此功能对社区内已经发布的所有招募信息进行查看并且可以通过招募需求分类对招募需求进行按类别的筛选以方便按类进行查找报名的功能。
3、志愿者报名功能
用户通过查看志愿者招募信息后,可进行志愿活动报名的功能,在报名时除发送个人报名外还以附件形式将简历来对个人信息进行发送,此功能只需一键便可进行,以此方便操作。
4、发布需求功能
用户通过填写招募基本信息(需求标题、所属分类、开始时间、联系电话、联系地址、需求描述)来进行需求的发布,该功能实现通过简单化的操作进行需求帮助信息的发布。
5、我的需求信息管理
用户通过查看自己发布的招募活动中,查看活动报名的审核状态以及活动的完成状态并且主要对志愿的报名人群进行审核,通过查看个人信息或进行电话联系来进行审核,选出自己称心的人选。并且在志愿者完成活动后可以点击已完成后,对志愿者用户进行评分与评价的功能。
6、我的预约查看功能
用户通过查看报名的招募活动中查看自己已经报名的志愿者招募的信息,若报名申请成功,则可查看到服务时间及完成任务时所需的需求帮助人员的部分个人信息,并在志愿活动完成后,可点击“完成”按钮来更改自己参与的活动进展状态的功能。
7、查看系统公告功能
用户通过此功能对系统公告进行查看。
8、系统在线留言
用户通过此功能在平台上填写信息(留言内容、姓名、电话、邮箱)对管理员用户端进行留言,实现对日常事情的反馈以及系统平台问题的反馈功能。
9、招募活动评论功能
用户通过查看招募需求的具体信息后,对感兴趣的活动可以进行评论以此再表达自己的想法,同时可以增加互助的精神以及志愿活动的热度。
二、管理员功能模块
1、审核用户注册
管理员可查看和审核用户注册时的个人信息,并进行选择同意与否申请和拒绝来完成对用户注册信息审核的功能,短信或者邮箱发送注册成功或者失败信息。
2、用户信息管理
管理员可查看和审核用户注册时的个人信息,并进行选择同意与否申请和拒绝来完成对用户注册信息审核的功能,短信或者邮箱发送注册成功或者失败信息。
3、发布招募信息
管理员能对审核通过的招募信息进行发布。以及管理员可以看到所有招募信息及招募活动目前的状态(未开始、进行中、已完成)和审核状态(审核成功、审核失败),并且可以修改和删除招募需求信息。 可以查询招募信息(模糊查询)。同时针对已完成的需求可帮助用户进行评分与评价,以及对志愿者的留言进行回复的功能。
4、招募信息管理
管理员通过此功能对用户发布的招募需求信息进行管理,通过查看招募需求的具体信息,对用户的发布招募需求后进行审核,帮助用户的招募需求信息进行修改以及删除,进而完成招募需求的确切描述和格式化,也可以帮助需要发布招募需求的人进行新的招募需求信息的创建。同时由管理员设置参与志愿活动后可获得的积分值。
5、志愿者报名管理
管理员通过此功能,可以查看活动的报名人信息和报名时间以及招募需求用户对报名用户的审核状态及完成状态,并且可以对报名人进行删除和帮助发布招募需求者对志愿者进行评论及打分。。
6、社区公告管理
管理员可编辑、发布、删除在主页显示的社区公告信息的功能
7、社区相册管理
管理员通过填写照片标题以及选择照片的本地位置进行首页下方的相册添加,并且可以通过界面化的方式对相册进行删除及修改的管理功能。
8、用户留言管理
管理员通过此功能对用户在平台中的留言进行查看、回复、删除。
9、招募活动评论管理
管理员通过此功能对招募需求大厅中活动下的评论通过查看进行管理,若发现不恰当或不合法的留言可以删除。
10、社区要闻管理
编辑发布社区要闻的信息,对社区要闻的增删改查。
三、登录注册
1、管理员
管理员只提供登录功能,管理员账户密码的添加与删除只有在数据库中才能实施。
2、用户
1)注册
社区内需求帮助以及想进行志愿服务的用户可通过注册来申请系统的登录账号以及密码,其中用户在注册时填写个人信息(用户名、联系电话、电子邮箱、个人简历附件)情况用来表明个人的身份和意图,并且只有在管理员确认后,用户才能正常登录使用相应功能。(密码写入数据库需要加密),用户名只能输入英文或者汉字,电话号码和邮箱需要正则表达式检验,一个电话号码只能注册一次。
2)登录
登录时候需要账号和密码验证,同时要有图片滑动验证。
3)找回密码
通过短信验证码进行密码的修改。(密码写入数据库需要加密),手机号需要正则表达式检验。
四、游客主页横向导航栏

图表 1 主页参考图
 

你可能感兴趣的:(vue.js,前端,javascript)