《基于Web的高校社团活动网站设计》8100字

III1.绪论1.1研究背景及意义1.1.1研究背景当前时代的发展，出现了5G等许多新兴的高端的技术，使得大学生对大学生活的要求逐渐呈现出多样化。同时为各大学校在对诸多校内社团进行管理时，提供了新的想法和内容。在新的技术的支撑下，旧的社团管理系统已经不能够满足大部分学生的自我要求[1]。1.1.2研究意义在当今的互联网时代，人们更倾向于学习更多有关浏览的知识，这为学生节省了大量时间。因此，社团管理出现新的模式，是时代所趋。可以让负责人和学生省下大量的时间。本人认为一个好的社团管理系统应该有：学生以及社团的信息，出勤管理。德育学分管理等内容[5]。

1.2研究背景及意义1.2.1国内现状当前信息技术的发展不仅改变了我们的生活方式，而且改变了我们的工作方式，因此人事管理的传统形式从根本上破坏了人们的生活。[8]在现代化过程中，引入现代管理思想是非常必要的。[9]学生会在过去的时间里，只能使用纸质文件来传达具体的活动信息。因此，学生协会联合会的工作效率将受到纸张的交付，官员的值勤时间和值班官员的专业水平的限制。通常会有协会提交文件并归还文件而没有成功或理由。由于经理的活动水平低而引起的误解或冲突。收集和存储纸质材料是一个大问题。大多数过期的纸张材料只能作为垃圾处理。对于某些需要多次批准的表单，由于执行人员交付表单的效率高，这也将增加不必要的时间成本。通常需要几天的时间才能完成课堂上多媒体请求表单的所有过程。学生协会联合会对协会的监督和管理仍处于以纸为媒介，以文件格式为考试重点的阶段。这种监督方法导致不必要的时间，人力，物力和财力浪费，并减少了学生协会联合会的成员。协会的监督管理的行政效率，审查程序已简化为手续，这增加了协会部门职能官僚化的风险。1.2.2国外研究现状随着计算机以及媒体的发展，大部分发达国家的大学已经建立了自己的学生协会平台。[6]根据数据分析，哈佛大学已经在美国知名大学建立了自己的学生社团管理网站，学生可以通过该网站查询到自己信息的动态和变化。1.3本文研究内容经过了对系统认真分析后，从而确定本课题包括了以下的内容：系统设置、消息查看、消息删除、资料查看、内容管理，在线帮助、用户管理、数据备份、查询功能、退出等功能。

主要包含多个模块以及这鞋模块的功能延展。通过对这几个模块的设计和实现，让该系统可以完成对团员信息的查询以及其他基础功能的实现及数据库管理等，使用该系统使得社团工作管理更加合理、简洁高效且该系统具有高效、易操作、易维护等特点，系统的界面也相对较为清晰，具体的功能也清晰可见。2.系统技术介绍2.1前端本人在前端设计时，认真考虑使用后使用了基础性的语言来完成，再利用其他相关语言进行完善。HTML是在编写网页系统时，最常被使用的一种基本性语言，可以在网站中传递部分信息，也可以描述许多网页中比较常见且直观的信息。CSS是一种可以让网页变得有趣的语言，也可以控制网页中元素的排列，使得网页可以按我们自己的意愿进行改变。可由浏览器直接执行而且不需要编译。迄今为止，它在网络上被广泛应用，是大家所熟知的层叠样式表，是通用制作网页的一种语言，它可以控制页面布局，也可以控制元素的渲染，但主要还是在静态页面离修改，拥有对网页对象和模型样式编辑的能力，所以成为了现如今最标准的语言之一。2.2后端对于后端的设计来说，主要使用Java语言编写和实现具体的功能。该语言具功能强大以及使用便捷的两大特点。后期加入了部分C语言的内容。2.3数据库数据库主要是用的是MySql数据库，工具则是使用Navicat显示数据库表。2.4系统技术介绍总结本人在对前端设计时，考虑使用后使用了基础性的语言来完成，再利用其他相关语言进行完善，对于后端相关的设计来说，主要使用Java语言编写和实现具体的功能。该语言具功能强大以及使用便捷的两大特点。后期加入了部分C语言的内容。3.系统需求分析3.1技术可行性对于本人的网页系统，大多数采用了相对应用熟练的技术，因为技术的熟练，对于能够表达出本人系统是非常有利的。主要还是使用前端和后端相关基础语言，并且又数据库的应用等。因为都是学习过的知识，所以在操作和应用的过程中是可行的。3.2经济可行性对于WEB系统来说，它的成本相对较低，所以对于一个学生来说，是可以实现的。也是相对容易实现的。3.3功能需求这是对本人系统最具有的功能进行分析，使之形成相互独立有相互联系的整体。一般来说本次系统应具备以下功能：用户的登陆注册、发帖、查看帖子、申请加入社团以及管理员系统等。系统存在三种用户：第一类是学生，第二类是管理员，第三类是超级管理员（Admin），这三种用户对应各自的功能。3.3.1普通用户的需求用户只能通过自己的账号密码来实现系统的登陆。。在使用该系统进行查询社团的相关信息时，用户需要先进行登录操作，如果登陆无法使用，则需要来进行注册操作。在进行登陆操作后，才有资格查询社团的相关信息。本人的系统包含校内社团的所有信息，对于修改和添加个人信息等功能就交给管理员和超级管理员进行管理。3.3.2管理员的需求管理员在自己的权限内，可以对用户没有的权限进行相关操作，包括团员信息，帖子的增删改。3.3.3超级管理员的需求超级管理员在本人系统内权限最高最大，在系统内可以进行的功能和操作有很多。比如：社团相册管理、社团活动管理、社团成员管理、社团信息管理功能等。3.4非功能需求可用性：适用于国内外相当一部分学校和相关的管理单位。可靠性：系统适应能力高，反应速度快，有效提高各单位的办事效率。性能方面：是一个整体明确，功能表达清晰的网页。物理方面：是一个顺应时代发展诞生的互联网产产品。4.系统设计4.1总体设计总体设计笼统的来说，就是要把系统需要什么，实现的操作是什么，来划分出整个网页系统的结构。还应该说明系统中的模块一起构成了哪些程序。要说明各个模块之间是否有联系。本人设计的网页系统粗略包括了几个模块。根据模块的功能操作不同，将数据库中表存放的位置不同。目标为：（1）对注册登录进系统内的用户相关信息的读取和查询。（2）在用户更新自己的信息后，可以有及时的反馈。（3）主界面有注册、登录、发表查看帖子、申请社团等。（4）操作界面整体功能清晰，页面也相对简洁，功能点全面，各个用户操作起来很方便，即学习操作该程序的教学成本会大大降低。（5）数据库的设计通过详细的业务逻辑的梳理相对较为合理，减少冗余数据，提升系统效率，避免系统执行过多不必要的过程。（6）系统具有灵活、严格权限设定功能。系统流程图：图4.1系统权限流程图

图4.2管理员权限操作图图4.3系统包含功能及相关用户信息图

4.2数据库总体设计什么是数据库，顾名思义就是一个数据集合。而且是按一定模型进行存储的，可以被多种多样的用户共同使用。用户的实体信息，是本人设计的网页系统中的中心实体，包含了各个用户的信息，并且学号是唯一标识。图4.4用户信息实体图对于发帖的管理，可以用下表进行相关的描述，但是每篇贴子都有自己的编号，因此帖子编号就成了唯一标识。帖子内容帖子内容帖子编号帖子帖子编号帖子标题发帖人发帖人发帖时间发帖时间发帖发帖图4.5发帖实体图整个系统的实体关系图（E-R）图4.6本人整个系统实体关系图

4.3详细设计4.3.1数据库表设计本人设计的网页系统，肯定是基于数据库的，以下是本人系统的数据库相关的信息。认真设计一个有思维，有逻辑的数据库，才是实现一个好的网页系统的精髓。无论如何，都应该满足对所有有需求的用户。所以数据库的设计应该纵观全局，认真的去思考。本人在确定功能的逻辑结构以后，设计了一个认为最优的数据库。表4.1用户信息记录表名称类型长度小数点是否空键idvarchar320否主键loginNamevarchar2550是非主键namevarchar2550是非主键passwordvarchar2550是非主键imgUrlvarchar2550是非主键studentIdvarchar2550是非主键schoolClassNamevarchar2550是非主键remarksvarchar2550是非主键createTimedatetime00是非主键lastUpdateTimedatetime00是非主键statusInteger20否非主键表4.2用户权限信息记录表名称类型长度小数点是否空键idvarchar320否主键useridvarchar320是非主键menuAuthorityArraytext00是非主键remarksvarchar2550是非主键createTimedatetime00是非主键lastUpdateTimedatetime00是非主键statusInteger20否非主键 表4.3社团信息记录表名称类型长度小数点是否空键idvarchar320否主键useridvarchar320是非主键logovarchar2550是非主键namevarchar2550是非主键remarksvarchar2550是非主键createTimedatetime00是非主键lastUpdateTimedatetime00是非主键statusInteger20否非主键表4.4社团相册信息记录表名称类型长度小数点是否空键idvarchar320否主键communityIdvarchar320是非主键urlvarchar2550是非主键namevarchar2550是非主键sortNumbervarchar2550是非主键typeInteger20是非主键createTimedatetime00是非主键lastUpdateTimedatetime00是非主键statusInteger20否非主键表4.5帖子信息记录表名称类型长度小数点是否空键idvarchar320否主键communityIdvarchar320是非主键userIdvarchar320是非主键sortIdvarchar320是非主键titlevarchar1000是非主键contenttext00是非主键htmlContenttext00是非主键readCountInteger80否非主键createTimedatetime00是非主键lastUpdateTimedatetime00是非主键statusInteger20否非主键表4.6学生和社团关联信息记录表名称类型长度小数点是否空键idvarchar320否主键communityIdvarchar320是非主键userIdvarchar320是非主键stateInteger20否非主键createTimedatetime00是非主键lastUpdateTimedatetime00是非主键statusInteger20否非主键表4.7用户登录历史记录的表名称类型长度小数点是否空键idvarchar320否主键userIdvarchar320是非主键namevarchar2550是非主键ipAddressvarchar1000是非主键addrvarchar2550是非主键cityCodevarchar2550是非主键cityNamevarchar2550否非主键remarksvarchar2550是非主键createTimedatetime00是非主键lastUpdateTimedatetime00是非主键statusInteger20否非主键4.3.2功能模块设计

模块化设计可以提高代码重用性、可维护性以及稳定性。每个页面的顶部dock和尾部dock重复复使用多次，可以进行封装模板化的设置该页面。网页页面顶部导航和尾部指南或者其他重复功能部分也可以进行独立设置，所以可以将头部导航和尾部指南分别设置成一个控件来重复使用。网页页面的整体功能的布局为了整个网站的风格能够一致以及代码量的节约，程序开始阶段就会设计一个整体的页面布局，然后只要填充不同的栏目和内容就可以。整个程序内链接数据库的代码此次全部放到同一个文件中。社团活动网页应该要最直观的展现出对社团相关信息的宣传，只有学生在第一眼被吸引，才有继续使用下去的动力。所以，页面的美观度以及各种元素的布局，是影响使用率的关键所在。在此之外，更应该将系统使用时的易操作性放在首位，将各种功能直观的展现出来，在使用相关功能时，学生也不会觉的很繁琐。在登陆后学生们就可以直接看到网站最主要的内容，在节约时间的首要前提下，更加促进了学生使用的便捷性。所具备的功能也简单实用，不会存在更多繁琐的操作。4.4系统总体功能设计本人的网页系统整体上使用了最常用的框架即MVC。MVC包含以下几个模块。4.4.1Model（模型）该模块主要供给给控制器模块，为控制器模块提供一些相关的内容。在控制器发出指令后，该模块就会做出相关的操作。4.4.2View（视图）该模块是为了更好的让学生对本人网页各种元素进行交互。4.4.3Controller（控制器）该模块是本人使用框架的核心，每个请求都由该模块做出一定的操作，并最后决定由哪一个页面来反应该请求。4.5本章小结该章节主要反映了本人在设计网页系统时，所进行的相关思考以及在实现过程中的相关构架。5.系统实现5.1主要实现功能与部分代码登录：本人设计的社团管理网页，是有两个登陆模式，包含了普通用户登录和管理员进行登录。部分代码如下：Publicstringindex(Integerrole,Modelmodel,httpsessionsession){IntegerparentId=(Integer)session.get.Attribute(“parentId”);IntegerschoolId=(Integer)session.get.Attribute(“schoolId”);IntegerclassroomId=(Integer)session.get.Attribute(“classroomId”);}注册：所有普通用户皆可注册，管理员账号需要超级管理员在后台进行审核。修改：修改大部分只属于超管。发布公告：发布公告功能由管理员和超级管理员进行管理，文件上传以及删除等操作。部分代码如下：Homeworkobj=homeworkService.load(id);Stringpath=”D:/my/up;oad/”+cbj.getName();发帖：发帖只有在学生进行登录或者注册以后才能进行发帖。管理员也可以对发帖内容进行一定的审核和删除修改。HttpservletRequest,HttpservletResponseresponse,HttpSessionsession{IntegerparentId=(Integer)session.get.Attribute(“parentId”);IntegerschoolId=(Integer)session.get.Attribute(“schoolId”);}发布公告：公告发布只能由超管进行操作。Map1.put(“type”,1);List<Notice>noticeList1=noticeService.list(map1);5.2页面实现5.2.1注册用户页面实现学生在进入到本人的社团管理系统之后，找到蓝色的注册字样，就可以进入到注册相关的页面。在填写相关的内容之后，点击提交之后所有信息核对无误才能进行下一步注册。注册内容包括：姓名、邮箱号、密码以及验证码，系统上分别做了长度的验证，以及格式的验证，点击提交即可完成注册操作，且该信息可以在用户的个人中心内查询到所有的字段。图5.1注册页面图核心代码//开始注册Useruser=userService.findByLoginName(map.get("mail").toString());userNew.setLoginName(map.get("mail").toString());userNew=userService.create(userNew);5.2.2登录模块页面实现通过注册账户或者管理员授权账户，可以使用该登录界面。在该界面可以进行邮箱和密码的账户登录，登录前还得进行验证码验证，该验证码的作用为防止机器人脚本进行系统入侵。密码做了可视化处理，输入后可以选择全部可视活动默认隐藏输入的密码。下方可以进行【忘记密码】的验证操作，通过邮件的方式进行密码找回操作。图5.2登录页面图核心代码Stringcode=redisUtil.getString("code−"+user.getCodeKey());(code==null||!code.equals(user.getCode())){returnresult.failed("验证码错误/过期");}Stringtoken=userService.login(user.getUsername(),user.getPassword());(token==null){returnresult.failed("账号密码错误");}Mapmap=newHashMap();map.put("token",token);historyLoginService.create(request,user,1);5.2.3发帖模块这个模块主要是发布自己的帖子信息供后台管理员以及用户查看。主要编辑内容为标题和内容，内容部分做了富文本编辑器的功能，这样就可以对文本无文本要求的编辑，文字字数、图片数量、视频、文本格式、文字样式、超链接等都可以进行兼容显示。图5.3发帖页面图核心代码note.setReplyCount(0);note.setId(UUIDGenerator.getUUID32Bit());note.setUserId(userId);note.setCreateTime(newDate());note.setLastUpdateTime(newDate());note.setIsTop(0);note.setStatus(1);note.setLikeCount(0);5.2.4社团成员界面这个模块主要是提社团管理员员权限的功能，在此模块管理员系统进行设置。列表内容字段分别有：头像（未添加时显示默认）、姓名、申请时间、姓名以及操作列表（审核通过以及删除操作）。对该页面的数据同步显示问题，解决方式为页面上方添加刷新按钮进行实时页面刷新。图5.4社团成员页面图核心代码List<Predicate>userCommunityList=newArrayList<>();(userCommunity.getStatus()!=null){userCommunityList.add(criteriaBuilder.equal(root.get("status"),userCommunity.getStatus()));}5.3本章小结第五章是本人在实现系统的过程中所使用的代码进行一定的阐述，表达本人所使用的核心代码，交代了具体的功能是由哪些代码来实现的。

6.测试6.1系统调试每一个系统在开发时，都会经历大大小小的错误，错误总是在不停的修改，又不停的出现。这时，我们就需要对系统进行测试，并且应该详细的记录下曾经出现过的错误，以及解决错误的方法，在之后遇到，就会更快的处理。这才是我们不停的测试所希望得到的结果。6.2系统测试测试类型测试内容测试目的所用测试工具和方法功能测试用户登录、基础数据录入、权限管理、信息修改等功能。测试功能是否可以均已正常实现、各业务流程是否符合常规逻辑、各数据输入输出正常无异常出现。采用黑盒测试手工测试。用户界面测试导航、页面结构、TITLE、提示信息等一致。测试各页面风格是否一致、保证用户界面易操作。手工测试安全性和访问控制测试密码是否加密处理、权限设计是否合理、通过修改URL非法访问等。核实用户所拥有权限功能、核实系统访问安全性黑盒测试、手工测试系统测试依据的系统的应用工作流:(1)页面的所有按钮是否可以正常显示。。(2)点击按钮后能否正常的跳转到相关的页面。(3)首次登录进如入注册页面：对页面相应信息进行填写。(4)学生在进行注册登陆操作后，观察页面能否正常展示。(5)大部分学生对自己的个人信息进行修改：进入修改个人信息页面，输入需要进行修改内容信息，检测是否对输入数据进行验证。(6)学生社团负责人对社团活动公告:学生在登录之后，系统会自动收集该学生的部分信息，并记录保存。(7)学生管理公告信息:学生部分信息管理模块。(8)学生提交信息:学生在编写完成后，并自己提交公告。(9)学生查询公告:学生在登陆后，自己查询信息，是否都可以查到。(10)负责人管理学生:负责人进入学生信息管理页面。是否可以对学生信息做出相关操作(11)负责人管理社团公告信息:管理员或社团负责人登陆后，对公告进行添加删除。(12)管理员管理留言信息:进入到用户管理界面，看到相关的信息。6.3测试过程6.3.1用户登录功能测试用户登录测试用例，如表6.1所示:表6.1用户登录测试用例6.3.2用户权限功能测试用户权限功能测试用例，如表6.2所示:表6.2用户权限测试用例6.3.3用户界面测试用户界面测试用例，如表6.3所示:表6.3用户界面测试用例6.4测试总结为什么要做测试，就是为了本人的系统可以使用，能够满足大部分在校学生的需要。本人的经过繁琐的测试后，目的就是观察网页系统能不能够正常的运行或者跳转。在这个经历中，本人及时发现哪里出了问题，成功有效的避免在日常使用中出现其他的一些问题。7.总结与展望7.1总结本人在本科生毕业中学习的课题为基于Web的高校社团活动网站的设计与实现。通过对外国各个学者研读出地论文文献进行学习，初步对本人此次的研究课题有了一定的了解，也意识到了设计一个可以在线上便捷处理社团相关管理工作的现实重要性，所以尽最大努力来设计本次结果。本人此次毕业设计，大部分使用了曾经在课堂上学习过的书本知识，所以做起来相对比较轻松，也还有相当有头绪的，但是也会遇到一些问题，因为并没有及时的进行复习，所以我进行了一定的总结。1.课堂上虽然学到了不少东西，但是平时缺乏锻炼，缺乏对代码的推敲，一定程度上影响了进度。2.应该多关注代码的更新。7.2展望本人在通过做这次毕业设计后，发现自己的许多不足，包括自己的懒散影响了进度。同时也缺乏平时对代码的推敲，导致自己不熟悉很多原有的代码。所以本人应该改掉自己的坏毛病，积极向上，在日常生活中不断的学习进步。参考文献[1]曹光辉.基于Web的高校社团管理系统设计与实现[J].无线互联科技,2020,17(08):38-40.[2]庄新妍.基于网站制作的Web前端开发技术与优化[J].信息技术与信息化,2020(07):17-19.[3]李健君.基于Web的学生社团线上实务系统的设计与实现[J].信息与电脑(理论版),2015(06):47-50.[4]何莉.Web前端开发技术及其优化策略[J].通信电源技术,2020,37