【《基于H5的H学院青年志愿者网站的设计与实现》7000字（论文）】

基于H5的H学院青年志愿者网站的设计与实现目录摘要 11绪论 21.1研究现状 21.2选题意义 21.3本文结构 22相关技术 32.1HTML5 32.2SSM框架 32.2.1Spring 32.2.2SpringMVC 32.2.3MyBatis 32.3Java 32.4MySQL数据库 32.5Eclipse介绍 33系统分析 33.1可行性分析 33.1.1技术可行性 43.1.2经济可行性 43.1.3操作可行性 43.2系统需求分析 43.3系统用例图 53.3.1用户用例图 53.3.2志愿团队用例图 53.3.3管理员用例图 54系统设计 64.1界面设计 64.1.1首页设计 64.1.2用户登录设计 64.1.3管理员后台界面设计 74.1.4审核设计 74.1.5志愿项目管理设计 84.2数据库设计 84.2.1数据库概念设计 84.2.2数据库逻辑设计 95系统实现 115.1用户模块的实现 115.1.1用户登录 115.1.2用户注册 125.1.3用户加入志愿团队 135.2志愿团队管理模块的实现 135.2.1志愿项目添加页面 135.2.2用户审核页面 145.3管理员管理模块的实现 145.3.1管理员管理用户模块 145.3.2管理员管理志愿项目模块 155.3.3管理员管理评论模块的实现 165.3.4新闻管理模块的实现 166系统测试 176.1测试目的 176.2测试过程 176.3单元测试 176.3.1用户测试 176.3.2志愿团队测试 196.3.3管理员测试 20结束语 21参考文献 22摘要：随着信息化时代的迅速发展，人工管理青年志愿者事务这种方式已经淘汰，网上志愿者网站则成为顺应时代发展的必需品。因此本文设计并实现一款基于H5的H学院青年志愿者网站。该网站主要采用SSM框架设计并实现的，实现了用户可以评论志愿项目加入志愿团队，志愿团队可以发起志愿项目，管理员可以发布新闻资讯等功能。关键词：志愿者管理；SSM；Eclipse；MySQL1绪论1.1研究现状随着信息化时代的迅速发展，互联网成了主流，市面上已经出现了各式各样系统，为人们的生活带来便利。在时代的冲击下，信息技术管理这一方面的技术也飞快地发展了起来，不再像从前使用人工的方式来管理信息，而使用计算机来管理数据，减少了用户和管理人员操作难度，加大信息的有效性和准确性。互联网的方便快捷等特性已深入人心，改变了人们的管理模式。H学院青年志愿者管理如果还用传统的管理模式[1]，随着时间推移，这种方式便会不断地出现问题比如说信息查询非常困难且无法保证正确率，所以说人工管理方式必会淘汰，这就突出了H学院青年志愿者网站出现的必要性，本系统采用计算机来管理用户，智能的管理方式为大家节省了很多力气，简化了管理员的工作内容，提高了用户体验感。以H学院青年志愿者[2]为管理对象，根据需求来完成功能设计。1.2选题意义用户因为不能及时了解志愿新闻从而错失了自己想参加的志愿项目，便失去当志愿者的时机，志愿信息与志愿项目没有在一个固定的地点进行更新与维护。传统的H学院青年志愿者管理，大部分采用的还是采用人工管理[3]的方式实现管理志愿者的信息。随着时代的进步为人民服务的心态不断增强，大家越来越愿意去参加志愿活动，满足自己的内心需求和提高自己的境界，随之带来的便是用户人数的增多，若在按照以前的方法管理，就存在信息查询难、项目无法找到、没有及时的通知等缺点。一旦网站建立好之后，用户可以在第一时间在系统里找到所倾向的志愿项目信息并选择加入，同时系统还可以管理志愿项目与新闻的信息，保证信息的正确率。建立本H学院青年志愿者管理是为了通过管理者和志愿团队对志愿项目和新闻信息的录入和发布，以方便用户寻找自己想要参加的项目，一旦查询到自己所需要的志愿项目信息，用户便可以从中了解志愿项目相关信息，根据条件选择加入，如果用户没有查询到自己所需求的志愿项目信息，也可以在线提醒管理者增添。本系统通过在用户、志愿团队、管理员这3个角色所需的功能需求而完成，方便每个角色的完成自己的操作。所以建立一个网上H学院青年志愿者管理是非常必要的，其方便高效、简单快捷的管理模式非常适用于当下的生活。1.3本文结构本文第1部分绪论主要介绍了本文的研究现状和选题意义。第2部分相关知识介绍了SSM的定义、Java语言、开发工具Eclipse、MySQL数据库的相关知识。第3部分系统分析，叙述了本系统的可行性，系统分析和相关用例图。第4部分系统设计，介绍了系统的各个功能模块的设计，还有数据库的相关设计。第5部分系统实现，介绍本系统使用SSM框架完成系统功能。第6部分系统测试，说明了测试的重要性和测试过程。2相关技术2.1HTML5HTML[4]是一个规范，一个标准，通过标记编写网页每个部分。HTML5则是在HTML的基础上经历了前人的不断地努力而完成的最新标准，专门为Web中丰富的内容从而设计的，有着新的语义、图形，是我们Web开发的利器，大家简称为H5。2.2SSM框架SSM[5]框架由Spring+SpringMVC+MyBatis组成，是目前流行JavaEE企业级框架，用于搭建各种大型的企业级应用系统。2.2.1Spring为了解决程序开发中复杂的问题诞生了Spring。早期是为了代替EJB完成工作，由于自身的用途广泛的特点，逐渐成为Java应用开发的利器。在JavaEE体系中属于业务层的框架，帮助开发人员去完成一些实例化工作。2.2.2SpringMVCSpringMVC属于JavaEE中的Web层，对控制器、模型对象等定制分离。具体就是将用户请求mapping去匹配具体所对应的要执行的操作。2.2.3MyBatisMyBatis是负责数据库的交互一个持久层框架，实现数据库管理操作。2.3JavaJava[6]是一门面对对象的编程语言，具有功能强大和操作易用的特点，具有简单性、面向对象、安全性高等特点。2.4MySQL数据库MySQL数据库和别的数据库一样都由SQL语言开发，适用于大部分的操作系统，其存储方便，软件体积小，非常适合小型的数据开发。2.5Eclipse介绍Eclipse是一个发放的源代码、基于Java的可扩展开发平台。软件功能强大，大大提高了程序开发的工作效率。可以作为Java语言开发软件但是它由于扩展性强的特点，可以安装各种插件，所以同时具备了多种语言的开发特性。3系统分析3.1可行性分析可行性分析是一个项目开发的重要组成部分，为项目开发的初期规定了大致方向。H学院青年志愿者网站主要是由管理员、用户、志愿团队3个角色对应的功能组成，下面将由技术、经济、操作方面分别对系统进行分析。3.1.1技术可行性H学院青年志愿者[7]网站，是由Java语言编写，使用SSM框架在Eclipse环境上搭建完成的，H学院青年志愿者网站是使用Java语言为编译语言在Eclipse上进行开发软件，数据库方面采用MySQL数据库进行数据存储。3.1.2经济可行性本系统由个人独立完成，前端使用H5，后端使用SSM框架技术。使用软件Eclipse编程，MySQL数据库进行数据存储，这两个软件都为开源项目，使用起来经济实惠，软件的功能强大，提高了处理事情的效率，用户更能直观的了解志愿的相关信息。3.1.3操作可行性随着信息时代的到来，大家都有了对计算机操作方面的基础。本系统界面设计简洁，操作简单，可以让每个用户简单明了的找到并完成自己的所需的操作。3.2系统需求分析基于H5的H学院青年志愿者网站，主要服务的对象就是用户。用户可以浏览网站，遇到自己喜欢的项目，可以搜索、点赞、评论、申请加入，查看了解及时的志愿新闻[8]，遇见问题可以向管理员请求帮助。系统管理主要分为管理员和志愿者团队2个角色。志愿者团队可以发起项目，审核加入名单并导出。管理员可以对用户和志愿团队进行管理，对志愿新闻进行维护。系统功能图如图3-1所示。图3-1系统功能图3.3系统用例图用例图是系统最终实现的第一步，下面从每个角色分别介绍对应的功能需求。3.3.1用户用例图基于H5的H学院青年志愿者网站，志愿者可以浏览网站，遇到自己喜欢的项目，可以搜索、点赞、评论、申请加入，查看及时的志愿新闻，遇见问题可以向管理员请求帮助。用户用例图如图3-2所示。图3-2用户用例图3.3.2志愿团队用例图志愿者团队可以浏览页面发起志愿项目，审核加入志愿者信息并导出志愿者相关信息，志愿团队用例图如图3-3所示。图3-3志愿团队用例图3.3.3管理员用例图管理员可以管理志愿者和志愿者团队的相关信息，对志愿新闻进行管理，用户和志愿团队管理以及对留言进行管理。管理员用例图如图3-4所示图3-4管理员用例图4系统设计4.1界面设计界面是一个系统的门户，是与用户直接交互的方式。一个网站的好坏在于用户的体验，而界面则是重中之重。4.1.1首页设计本系统的首页向用户展示了系统菜单和部分功能，首页设计界面如图4-1所示。图4-1首页界面4.1.2用户登录设计用户登录设计主要是根据账号密码，通过按钮登录，用户登录设计界面如图4-2所示。图4-2用户登录界面4.1.3管理员后台界面设计管理员后台界面设计主要是添加了一个菜单选项，通过单击选项跳转页面，管理员后台界面如图4-3所示。图4-3管理员后台界面4.1.4审核设计审核设计是根据左边为导航栏，点击申请加入管理，便会弹出加入信息，审核设计界面如图4-4所示。图4-4审核设计界面4.1.5志愿项目管理设计志愿项目管理，由导航栏、文本框、单选按钮组成，根据文本框中所输入的内容，单击按钮，最后根据志愿项目选择自己所要找到的项目最后完成操作，志愿项目管理设计界面如图4-5所示。图4-5志愿者项目管理界面4.2数据库设计一个系统的执行效率和系统的稳定是直接与数据库的设计相关的，因此设计一个规范的、有意义的数据库是必需品。4.2.1数据库概念设计E-R图是表示了实体与属性之间的管理，可以有效的描述H学院青年志愿管理网站的概念模型。根据需求分析的结果完成对用户、志愿者团队、管理员、新闻、志愿项目等实体组成。按照数据库需求画出E-R图如图4-6所示。图4-6系统E-R图4.2.2数据库逻辑设计逻辑设计阶段主要是将E-R图转换数据库支持模型，实现从E-R图到关系模型的转换。以下是数据表是根据上面的系统E-R图而设计的。(1)用户表用户信息表（user）是对系统中用户个人信息的存储。该表由主键ID和性别、手机号码等构成，设计的详细信息如表4-1所示。表4-1用户表字段名称字段类型字段描述IDint(10)ID（主键）pxdvarchar(255)密码usernamevarchar(255)用户名namevarchar(255)姓名phonevarchar(255)手机号码sexvarchar(255)性别addtimedatetime(8)添加时间(2)志愿团队表志愿团队表（volunteerteam）是对志愿团队信息进行存储，该表由主键ID和编号、姓名、邮箱、添加时间等构成，设计的详细信息如表4-2所示。表4-2志愿团队表字段名称字段类型字段描述IDint(10)ID（主键）numberint(10)编号pxdvarchar(255)密码namevarchar(255)姓名mailboxvarchar(255)邮箱Phonenumberaddtimeint(20)datetime(8)手机号码添加时间(3)管理员表管理员信息表（admin）是对管理员信息进行存储，该表由管理员ID和密码权限等构成，设计的详细信息如表4-3所示。表4-3管理员信息表字段名称字段类型字段描述idint（主键）IDpasswordvarchar(255)密码usernamevarchar(255)用户名addtimedatetime(8)添加时间cxvarchar(255)权限(4)志愿项目表志愿项目表（projects）是志愿项目相关信息进行存储，该表由主键志愿项目ID和项目编号等构成，设计的详细信息如表4-4所示。表4-4志愿项目表字段名称字段类型字段描述IDint(10)ID（主键）numbervarchar(255)项目编号xmnrvarchar(255)项目内容Sponsorvarchar(255)发起人namevarchar(255)姓名mailboxint(20)邮箱coveraddtimevarchar(255)datetime(8)封面添加时间(5)留言表留言表（message）该表是对留言进行存储，由主键ID和手机号码等构成，设计的详细信息如表4-5所示。表4-5留言表字段名称字段类型字段描述IDint(10)ID（主键）sexvarchar(255)性别numberint(10)手机号码qqvarchar(255)qqhuifuvarchar(255)回复内容contentvarchar(255)内容phonenumberaddtimeint(20)datetime(8)手机号码添加时间(6)评论表评论表（comment）该表对用户的评论进行存储，由主键ID和编号、姓名、邮箱、手机号码等构成，设计的详细信息如表4-6所示。表4-6评论表字段名称字段类型字段描述IDint(10)ID（主键）commentvarchar(255)评论内容numberint(10)编号Reviewervarchar(255)评论人mailboxvarchar(255)邮箱phonenumberaddtimeint(20)datetime(8)手机号码添加时间(7)志愿新闻表志愿新闻表（journalism）该表存储志愿新闻的信息，由主键ID和标题、内容、发起人等构成，设计的详细信息如表4-7所示。表4-7志愿新闻表字段名称字段类型字段描述IDint(10)ID（主键）titlevarchar(255)标题contentvarchar(255)内容categoryvarchar(255)类别sponsorvarchar(255)发起人clickvarchar(255)点击率Imgaddtimevarchar(255)datetime(8)图片添加时间

(8)申请加入表申请加入表（join）该表由主键ID和项目编号、姓名、发起人、手机号码等构成，设计的详细信息如表4-8所示。表4-8申请加入表字段名称字段类型字段描述IDint(10)ID（主键）numbervarchar(255)项目编号phonenumberint(10)手机号码entrynamevarchar(255)项目名称oneselftovarchar(255)自我介绍sponsorvarchar(255)发起人nameaddtimevarchar(255)datetime(8)姓名添加时间5系统实现5.1用户模块的实现5.1.1用户登录用户输入正确的信息，单击“登录”按钮后进入系统。登录界面如图5-1所示。图5-1登录界面登录核心代码如下：

if(user!=null){

session.setAttribute("username"，user);

return"redirect:index.do";

session.setAttribute("flag"，"登录成功！");

}else{ session.setAttribute("flag"，"登录失败！");

return"login";5.1.2用户注册用户填写相关的信息后完成注册，用户注册界面如下图5-2所示。图5-2用户注册界面用户注册代码如下所示： User.setAddtime(time.toString().substring(0,19)); UserService.add(User);//向User表里面添加数据 session.setAttribute("info","注册成功"); session.setAttribute("infoUrl",request.getHeader("Referer")); return"redirect:back.jsp";5.1.3用户加入志愿团队用户登录后，选择志愿项目菜单，单击详情，可对符合条件的志愿团队进行加入，用户加入志愿团队如下图5-3所示。图5-3用户加入志愿项目界面用户加入志愿项目代码如下所示： Join.setAddtime(time.toString().substring(0,19)); JoinService.add(join);//向join表里面添加数据 session.setAttribute("info","添加成功"); session.setAttribute("infoUrl",request.getHeader("Referer")); return"redirect:back.jsp";//返回back界面5.2志愿团队管理模块的实现5.2.1志愿项目添加页面志愿者团队登录后，进入后台，选择志愿项目菜单，单击志愿项目添加，添加志愿项目如下图5-4所示。图5-4志愿项目添加界面志愿项目添加核心代码如下所示：StringaddVolunteerprojects(HttpServletRequestrequest,ProjectsProjects,HttpSessionsession)throwsSQLException{ Projects.setAddtime(time.toString().substring(0,19)); ProjectsjectsService.add(projects);//向projects中插入数据 session.setAttribute("info"，"添加成功"); session.setAttribute("infoUrl",request.getHeader("Referer")); return"redirect:back.jsp";//返回back界面5.2.2用户审核页面志愿者团队登录后，进入后台，选择志愿项目菜单，单击申请加入管理，审核加入如下图5-5所示。图5-5用户审核界面用户审核代码如下所示： JoinService.update(projects);//向projects中插入数据 session.setAttribute("Info","审核成功"); session.setAttribute("InfoBack",request.getHeader("Referer")); return"redirect:back.jsp";//返回back界面5.3管理员管理模块的实现5.3.1管理员管理用户模块登录成功后，通过左侧的菜单栏找到其中的志愿者管理选项，页面会跳转至管理用户对应的页面，通过单击完成操作。管理员管理用户界面如下图5-6所示。图5-6管理员管理界面用户添加核心代码如下所示： UserService.add(User);//向User表中插入数据 session.setAttribute("Info","添加成功"); session.setAttribute("InfoBack",request.getHeader("Referer")); return"redirect:back.jsp";//返回back界面5.3.2管理员管理志愿项目模块在管理员登录成功后，通过左侧的菜单栏找到其中的志愿项目管理选项，页面会跳转至管理志愿项目对应的页面，通过单击完成操作。管理员管理志愿项目界面如下图5-7所示。图5-7管理员管理志愿项目界面管理员添加志愿项目核心代码如下所示： VolunteerService.add(volunteer);//向volunteer表中插入数据 session.setAttribute("Info","添加成功"); session.setAttribute("InfoBack",request.getHeader("Referer")); return"redirect:back.jsp";//返回back界面5.3.3管理员管理评论模块的实现管理员在菜单栏中找到留言管理按键并单击，界面将会跳转到留言管理界面，可以回复和删除相关的留言。留言管理页面效果如5-8所示。图5-8管理员管理评论界面管理员添加评论核心代码如下所示： MessageService.add(message);//向message表中插入数据 session.setAttribute("Info","添加成功"); session.setAttribute("InfoBack",request.getHeader("Referer")); return"redirect:back.jsp";//返回back界面5.3.4新闻管理模块的实现管理员进入新闻数据管理模块后，找到所需的操作页面，填写信息最后完成操作。志愿新闻管理页面效果如5-9所示。图5-9管理员管理志愿新闻界面管理员添加新闻核心代码如下所示： JournalismService.add(journalism);//向journalism表中插入数据 session.setAttribute("Info","添加成功"); session.setAttribute("InfoBack",request.getHeader("Referer")); return"redirect:back.jsp";//返回back界面6系统测试6.1测试目的系统测试的目的找到系统的不足，提高系统的效率，让开发人员能及时的修补信息。基于H5州学院青年志愿者管理，主要测试管理员登录、志愿项目管理、志愿团队管理、和新闻管理等系统功能是否实现。6.2测试过程H学院青年志愿者网站在最后的测试阶段，采用黑盒测试。黑盒测试主要为了测试系统的输入输出。6.3单元测试6.3.1用户测试（1）登录测试主要输入用户名和密码，点击“登录”按钮查看是否登录成功。=1\*GB3①不输入管理员名和密码，直接点击登陆，如图6-1所示。图6-1登录失败测试=2\*GB3②输入正确用户名和密码，例如：用户名012、密码001。用户登录成功如图6-2所示。图6-2登录成功测试（2）用户申请加入志愿项目=1\*GB3①用户志愿项目菜单，进去志愿项目页面。=2\*GB3②根据项目编号、项目名称、发起人等查询项目。=3\*GB3③点击详情，进入项目主页，满足条件可申请加入。如图6-3所示。图6-3用户申请加入测试（3）用户在线留言=1\*GB3①用户志愿项目菜单，进去在线留言页面。=2\*GB3②填写相关信息，后成功留言如图6-4所示。表6-4用户在线留言测试6.3.2志愿团队测试(1)志愿项目的添加=1\*GB3①根据输入项目编号、项目名称、项目内容、发起人、姓名、联系方式、邮箱、上传封面。=2\*GB3②完成添加志愿项目，经验证测试成功，如图6-5所示。图6-5项目添加界面(2)志愿项目的修改=1\*GB3①志愿修改，输入项目编号、项目名称、项目内容、发起人、姓名、手机号。=2\*GB3②点击查询可以查询到志愿项目，单击修改按钮，进入修改界面经验修改界面如图6-6所示。图6-6志愿项目修改界面(3)修改个人资料=1\*GB3①输入工号、密码、领导人、联系方式、邮箱=2\*GB3②单击提交可以修改个人资料，经验证测试成功，如图6-7所示。6-7修改个人信息界面6.3.3管理员测试（1）管理管理用户测试=1\*GB3①点击用户查询选项，根据用户名等关键字查询志愿者信息。=2\*GB3②根据编辑、删除、详细按钮，完成对用户的操作图6-8所示。6-8用户信息编辑界面（2）管理员管理志愿项目测试=1\*GB3①点击志愿团队查询选项，根据用户名等关键字查询志愿项目信息。=2\*GB3②根据编辑、删除、详细按钮，完成对志愿者的操作如图6-9所示。6-9志愿项目信息编辑界面（3）志愿新闻管理测试=1\*GB3①点击新闻数据管理查询选项，根据标题，类别查询。=2\*GB3②根据编辑、删除、详细按钮，完成对新闻的操作如图6-10