基于es6的高校社团管理系统设计与实现

毕业设计说明书基于es6的高校社团管理系统的设计与实现基于es6的高校社团管理系统的设计与实现摘要：在信息化告诉发展的当下，越来越多的集体开始使用智能化的管理模式，作为为祖国培养人才的地方，高校自然也不例外。现在的学校中已经有了可以让学生足不出户，在宿舍、教室就可以轻松查阅图书信息的电子图书室；用手机电脑就可以查看成绩的学生管理系统，作为高校学生活跃的小集体——社团也急需这种信息化的管理模式。这个通过观察发现，目前为止高校的社团管理模式依旧局限于纸质管理，这导致了信息同步慢，管理混乱等问题。即使很多社团依旧通过QQ、微信群等APP辅助管理，但是依旧会时常出现漏看信息的问题，管理模式落后不足的弊端日益显露。本系统可以有效的解决这些问题，将社团信息同步管理到一起，学生可以很方便的通过网络来接受到需要信息，通过系统可以轻松做到将其他繁杂的信息过滤。本系统基于es6的高校社团管理系统就是基于上述设想来设计开发的。本系统使用MVVM（Model-View-ViewModel）模式设计，前端部分使用的是Vue全家桶，即包括HTML5、CSS3、JavaScript等技术来编写，前端语言符合ECMAScript的语言标准。后端部分使用的是Express框架来编写，数据库使用的是MySQL数据库，后端使用node.js操作数据库，前后端的交互使用axios。本文首先对本系统的设计背景、设计目的需求分析、设计流程进行介绍，接着对开发本系统时用到的技术框架、开发工具等进行一个简单的介绍，然后详细介绍实现每个需求时的数据处理的方法，最后将对本系统的一些功能进行测试，主要测试当用户进行错误操作时的信息提示以及系统对于无法撤回的操作的提示。关键词：高校社团；管理系统；es6；前端Designandimplementationofes6-basedcollegecommunitymanagementsystemAbstract:inthecurrentdevelopmentofinformationtechnology,moreandmorecollectivebegantouseintelligentmanagementmode,asaplacetotraintalentsforthemotherland,theuniversityisnoexception.Nowthereisstillanelectroniclibraryintheschoolthatallowsstudentstoconsultbooksandinformationeasilyinthedormitoryandclassroomwithoutleavinghome.Withthemobilephonecomputercanchecktheresultsofthestudentmanagementsystem,asanactivesmallgroupofcollegestudents--communityisalsoinurgentneedofthisinformationmanagementmode.Throughobservation,itisfoundthatuptonow,themanagementmodeofassociationsincollegesanduniversitiesisstilllimitedtopapermanagement,whichleadstoproblemssuchasslowinformationsynchronizationanddisorderedmanagement.EventhoughmanyassociationsarestillmanagedbyQQ,WeChatgroupandotherapps,theproblemofmissinginformationisstillcommon.Thissystemcaneffectivelysolvetheseproblems,thecommunityinformationmanagementtogether,studentscanbeveryconvenienttoreceivetheneedinformationthroughthenetwork.Thissystembasedones6collegecommunitymanagementsystemisbasedontheaboveideastodesignanddevelop.ThissystemisdesignedwithMVVM(model-view-viewmodel)mode,andthefront-endpartiswrittenwithVuefamilybucket,HTML5,CSS3andJavaScript,whichconformstothelanguagestandardofECMAScript.Theback-endpartiswrittenusingtheExpressframework,thedatabaseUSESMySQLdatabase,theback-endUSESnode.jstooperatethedatabase,andthefront-endUSESaxiosinteractively.Designbackground,designpurposeinthispaper,firstofall,thissystemrequirementsanalysis,introducesthedesignprocess,andthentodevelopthissystemusedwhenthetechnicalframework,suchasdevelopmenttoolsforasimpleintroduction,andthenintroducedtorealizeeverydemandofdataprocessingmethod,thefinalwillbesomefunctionofthissystem,themaintestwhentheusererrormessagewhenoperating.Keywords:collegecommunity,managementsystem,Es6,thefrontend.绪论1.1系统开发背景在当今的各个高校中，校园生活成为高校学生十分重要的一个版块，学生们在课余时间有很大一部分都被社团的集体生活占据，学生们在社团中认识志同道合的朋友，同龄人有一样的兴趣爱好或奋斗目标，让学生们更加充分感受到集体生活的乐趣。随着计算机技术的快速发展，越来越多的学校将物理空间和信息空间有机衔接，使任何人、任何时间、任何地点都能便捷的获取资源和服务，智慧校园REF_Ref12360\n\h[1]已经成为学校高效率发展和运行的必备条件。智慧校园是指以物联网为基础的智慧化的校园工作、学习和生活一体化环境，这个一体化环境以各种应用服务系统为载体，将教学、科研、管理和校园生活进行充分融合REF_Ref12572\n\h[2]。大学社团是大学生在自身兴趣、爱好基础上自由结合并经有关部门批准成立的群众性业余团体。它不受科系、年级的限制，它以活动形式的多样性、内容的丰富性吸引了广大学生。大学社团活动的开展有利于大学生开阔视野，开发智力，提高文化素养，培养交往、管理、创新等能力REF_Ref12758\n\h[3]。学生可以在社团中学习更多书本上学不到的知识，对于人生有更多的历练和不同的感受。优秀的社团其中一定有优秀的学生群体REF_Ref13438\n\h[4]，而好的社团和高效率的社团管理密方式不可分REF_Ref13480\n\h[5]。如今高校的各项管理工作中纸册记录管理模式已逐渐被取代，学生只需要上网登录本校主网站即可查询自己的学籍、成绩等相关信息，十分快捷方便REF_Ref13532\n\h[6]。然而，在一些大学中，各个社团的管理仍处于人工手动管理阶段。传统的社团管理和运营方式已经难以满足学校和学生的需求REF_Ref13575\n\h[7]，在学校社团规模日益增加REF_Ref13614\n\h[8]，社团人数和有关社团管理的信息愈发复杂庞大的情况下，人工管理方式已经滞后，急需转变管理模式REF_Ref13647\n\h[9]。1.2系统开发实际意义近年来随着高校越来越重视高效率的管理模式REF_Ref13686\n\h[10]，社团的发展和管理逐渐进入人们视线，我们急需一种社团管理系统，这套系统的建立关乎高校的发展和学生精神文明生活的质量REF_Ref13800\n\h[11]。社团管理系统（CommunityManagementSystem,CMS）是为了更加便捷、直观、高效管理信息而设计的，它可以帮助管理人员快速有效提高社团管理的工作效率，降低人工管理成本REF_Ref13833\n\h[12]，实现对社团相关信息的统计查询。社团管理人可以通过系统对社团信息进行管理，发布社团活动，也可以对社团成员进行管理REF_Ref13882\n\h[13]。通过CSS技术设计界面REF_Ref13911\n\h[14]，以图形化操作简洁简便REF_Ref13940\n\h[15]，符合实际社团工作需求实用为目标REF_Ref13970\n\h[16]，设计高校社团管理系统。1.3研究的基本内容本系统预期实现一个可以满足大多数社团需求的系统功能，对于社团日常管理和活动起到帮助作用。通过研究和分析需求，不难看出，在高校社团管理的时候，一共有三种角色。一、作为校方管控社团日常活动的老师，这个角色的用户应该拥有最高权限，可以查看更多的信息，但是不可以过于繁琐，否则会造成管理层混乱，或者信息管理冲突。二、作为单个社团的领导人，即社团社长，该用户应该拥有在此社团内的最高权限，可以对整个社团的信息进行细节的维护和管理，他在这个社团内部有最完整的操作权限。三、作为社团根基的普通社员，该角色是社团中最多的角色，日常参与社团活动，所需的操作大多都是查看，比如查看社团内的社员情况，即使了解社团的变化，或者对于社团活动进行查看，以此来决定是否参与或组织某项活动，来更好的参与完成社团日常生活。对于不同的身份要有不同的操作界面渲染，这既是对界面整洁度的优化，又能有效避免不合理的操作。这就要求给三种身份设定不同的权限，及在数据库存储用户信息时，用户身份就是其中十分重要的一个，它确保了用户登录后查看的界面是否正确，同时保障了系统运行的合理和平稳。不同的用户身份有不同的操作任务，对于每个身份日常生活进行分析，比如老师在社团管理中更多的是通过或拒绝某项活动，而不是给某一个社团构思设想提出一个活动，所以在教师界面，就不需要申请活动功能。同样的，对于某个社团的社长，他只能在自己管理的社团范围内任免新社长或申请某项活动，而不能替老师管理全校的社团，或者申请其他社团的活动。对于每个人的权限和功能有了充分的认识后，就可以根据需求对于数据库进行设计。数据库的设计要尽量避免数据冗余，以保证程序运行效率和空间的有效利用。sql语句可以对数据库进行复杂的操作，这是十分有用的。2开发技术及工具介绍2.1HTML5、CSS3、JavaScriptHTML5是现在前端流行的一个标签语言，纯HTML5已经可以满足构建一个完整的页面，但是由于这项技术过于基础而导致的开发过慢、操作繁琐以及书写优美前端页面所要耗费人力大等弊端，现如今开发已经很少有人使用纯HTML了，但即便如此，HTML依旧是必须要存在的，因为目前很多组件库都是HTML的基础上优化而来的，我们可以把它看做一个承载水的容器，其他基于HTML的组件库都是容器中的水，没有了容器，再多的水也捧不到掌心；CSS3是层叠样式表，主要作用是对HTML5标签生成的页面元素进行修饰，有了CSS的帮助，我们可以将HTML书写的页面做出装饰，值得一提的是，它不仅可以书写漂亮的静态页面，还可以给页面添加动态效果。JavaScript是脚本语言，也是用来修饰页面中的HTML生成的元素，可以给HTML5代码生成的页面元素添加动态方法，可以进行数据处理，是前端开发不可或缺的一部分。2.2Vue全家桶Vue全家桶包含了Vue.js、element-ui、vue-router、axios、vuex等技术和组件库。下面将对这些技术和组件库进行简单介绍：Vue.js是javas的一种渐进式框架，Vue.js的核心是允许采用简洁的模板语言声明式的将数据渲染进DOM系统。需要注意的是，在这套框架中，所有的东西东西都是响应式的，也就是说，当后台数据发生改变时，被Vue挂在的数据会直接渲染到DOM元素上，这种渲染方法，有效的减少了和HTML的直接交互。在这个框架中，开发者还拥有很多带有v-开头的指令，他们的作用是使我们节点的元素和Vue实例中的数据保持一致。除此以外，它简洁的双向数据绑定也是一直为开发者所称赞，我们只需要在某个地方添加一个v-model指令，就可以完成全部的工作，这是比其他框架更突出的优点（这个指令在我的项目中有大量的运用）。这套框架中内含有八个生命周期钩子函数：beforeCreated（vue实例和数据对象都还未初始化的时候触发）、created（这时候数据对象已经初始化好了，项目中页面初始化向后台获取数据，大都是在这个阶段完成）、beforeMount、mounted（这时候dom节点已经加载完成，可以对dom节点进行操作，在项目中我曾使用它来获取权限，以保证获取权限时已经得到用户id）、beforeUpdate（在data更新时触发的钩子）、updated（在data更新时触发的函数，一般在这里对数据进行处理）、beforeDestroy（当组件销毁动作前触发）、destroyed，这些钩子函数可以让开发者在需要的时候进行数据处理或页面渲染。同时vue内部也封装的数据处理方法，例如v-for等可以让开发者简便的将数据遍历，减少代码量。element-ui是一个由饿了么团队开发和维护的一套组件库，内含多种样式的组件，如后台管理系统常用的数据展示的方法——表格、以及可以完美适用vue-router的侧边栏（在项目中，侧边栏的属性可以配合vue-router进行页面的跳转同时完成路由地址的转换），可以帮助开发者更快的搭建自己的前端页面，而且要比HTML和CSS开发出的页面更加风格统一，本系统也在原生HTML的基础上搭配该组件库进行开发的；vue-router是vue路由管理机，适合单页面展示，通过切换不同的路由地址来向用户展示不同的页面，同时在进行路由跳转时还可以进行参数传递，我在本系统的设计中多次应用到了路由传参；vuex是vue的状态管理机，内含五个属性：state（vuex的基本数据，用来存储最原始的数据）、getter（相当于是state的计算属性，可以用来获取state中的数据）、mutation（只能用来同步提交更新数据，更新state中的数据）、action（可以包含异步操作，用来提交mutation，和后台的数据交互多发生在这里）、modules；运用状态管理机后可以将数据进行统一的管理，再加上命名空间的使用，可以轻松让一些数据在几个不同的页面共享，在项目中，我多次运用它来共享登录用户的身份，来实现权限管理。axios是一个封装了ajax的插件，主要用来前端和后台进行数据交互，它默认返回json格式的数据，也可以对其进行很多的设置，如对消息头的设置等，可以满足不同的开发需求，其内部含有响应拦截器和请求拦截器函数，能够对前端向后端发送的请求和后端返回的响应进行一个处理。2.3Express框架Express是一个简单而灵活的NodeJSWeb应用框架，提供了一系列强大的特性来帮助开发者创建各种Web应用。其强大的特性表现为：快速进行开发，拥有灵活的扩展机制，使用简单方便，路由、多模块支持。Express也可以支持多种中间件，可以在项目中使用一些中间件来简化代码，加快开发人员的开发进度。2.4MySQL数据库数据库技术发展的越来越快，但是主流的还是使用关系型数据库，而关系型数据库比较常用的是oracle和mysql，sqlserver等等，而这三种数据库，只有mysql是真正的开源的，也就是说只有mysql是免费使用，而且mysql数据库也常用于比较小型的网站中，因此本课题也是主要使用mysql数据库。2.5ECMAScriptECMAScript（简称ES6）是于2015年6月正式发布的\t"/item/ECMAScript%206/_blank"JavaScript语言的标准，正式名为ECMAScript2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

3设计思路及需求分析3.1设计思路前端部分使用HTML5、CSS3、JavaScript、element-ui、vue.js来完成每个前端页面的搭建，使用vuex来进行数据管理，使用vue-router来实现页面的切换，使用axios来进行于后端数据的请求。后端部分使用Express框架搭建，通过node.js来操作MySQL数据库。数据库使用MySQL数据库，sql语句可以操作数据库的增删改查，其强大的联合查找语句可以帮助开发者快速找到需要的信息。3.2需求分析本系统预期实现一个高校社团管理系统系统，现列出如下需求：用户注册：用户可以在此界面进行简单注册，注册时有教师和学生两个角色，用户可以根据自己的身份进行选择。不同的身份对应不同的系统界面。该页面要求用户输入一些基本信息，如工号/学号、姓名、手机号、个人简介等。用户登陆：用户登陆成功后，判断登陆的用户的角色，系统根据用户角色的不同来选择跳转到不同的页面组，再根据不同的角色渲染功能按钮。社团管理：该功能为超级管理员即老师身份的用户所有，可以查看目前系统内的所有社团，包括查看社团的详细信息，例如：社团名字、社长名字、社长学号、社长电话、社团简介等，在此页面页可以删除某个社团。老师也有新增社团的权限，可以在填写了社团的基本信息后新增一个社团，值得一提的是，在新增社团时要求填入社团社长，对于该选项进行了约束。只有在系统内拥有账户的学生角色，才可以被检索到，该功能保证了信息的正确率。活动审核：该功能为超级管理员所有，可以通过或拒绝社团申请的活动，在此之前可以详细查看关于活动的内容，包括活动承办的社团、活动负责人、负责人电话、活动场地等等。5.活动申请：该功能为社团管理员所有，在填写了活动基本信息后，可以向校方申请社团活动，该条信息会出显示在超级管理员界面的活动审核中。6.社团成员：该功能为社团管理员及社员共有，但是在渲染页面的时候对于身份进行了验证，却别渲染界面效果。社员只具备查看社团成员的权限，不能看到对于社员编辑和删除的操作按钮。该按钮的设置，主要为了方便社团管理员对于社员进行日常管理，可以编辑社员的基本信息，以及删除社员。7.社团活动：该功能为社团管理员及社员共有，对进行的活动展示，社员只能只具备查看活动的权限。8.社团财务：该功能为社团管理员及社员共有，只拥有查看明细权限，可以查看社团的财务状况，但是没有修改权限，只有申请活动通过后，活动产生的经费明细才会显示在界面上。9.社团展示：该功能为社团管理员及社员共有，展示系统内所有社团的详细信息，如社团名字，社长名字，社长联系方式，用户可以根据自己的兴趣申请加入新社团。执行该操作后，该用户的信息将会展示在社团管理员的社员申请界面。10.修改个人信息：该功能为超级管理员、社团管理员及社员共有，可在此页面修改自己的基本信息，但是这些修改不包括账号id及学号/工号的修改，这个细节可以保证账号的唯一性。11.换届管理：该功能为社团管理员所有，可在此页面进行换届操作，换届操作的可选名单做了约束，保证可选名字都是该社团内的成员。

4系统设计4.1系统功能模块设计本系统有三个大模块，其中所有用户都可以访问登陆注册模块，超级管理员、社团管理员和老师登陆后访问后访问不同系统模块，下面将详细介绍这三大模块：用户登陆注册模块该模块主要是实现用户登陆和注册的功能：具体流程如图4.1所示：图4.1用户登陆和注册功能模块流程图4.1.2超级管理员模块该模块主要是实现超级管理员对社团的活动，社团进行一些操作，超级管理员对应的功能板块如图4.2所示：图4.2超级管理员角色登陆后功能模块图社团管理员模块该模块主要是实现社长对社团的操作，功能图如图4.3所示：图4.3社团管理员模块社员管理模块该模块主要是实现社员对社团的操作，功能图如图4.4所示：图4.4社员模块4.2数据库设计4.2.1数据库概念结构设计得到上面的功能模块图后，就可以设计出满足用户需求的各类实体，以及它们所包含的具体信息，每个实体之间的数据通过逻辑关联形成数据绑定，实现各表间的数据流动。用户的实体E-R图如图4.5所示：用户用户编号用户姓名密码用户身份联系方式用户简介用户性别图4.5用户实体E-R图社团活动的实体E-R图如图4.6所示：活动活动编号所属社团活动名称活动领导人活动地点活动经费活动时间活动描述活动状态图4.6活动实体E-R图社团信息的实体E-R图如图4.7所示：社团信息社团信息编号习题名称社长编号社团简介图4.7社团信息实体E-R图社团成员的实体E-R图如图4.8所示：社团成员社团成员编号社长编号社团编号社团职务状态图4.8社团成员实体E-R图社团财务的实体E-R图如图4.9所示：社团财务社团财务编号社团编号经费数额活动编号图4.9社团财务实体E-R图4.2.2数据库表结构设计在后端使用了node.js来操作MySQL数据库，其中各张表的详细设计如下：用户信息表（accountinformation）表结构如表4.1所示：表4.1用户信息表（accountinfromation）字段类型字段说明userint用户id（主键）passwordint用户密码userStatustext用户身份userNametext用户姓名sextext用户性别telNumbervarchar用户联系方式userDesctext用户简介活动表（activeinformation）表结构如表4.2所示：表4.2活动表（activeinformation）字段类型字段说明activeIdint活动id（主键）clubsIdint活动承办社团idactiveNmaevarchar活动名称userIdint活动承办人idactiveFinancevarchar活动经费activePlacevarchar活动地点activeStartTimetext活动开始时间activeEndTimetext活动结束时间activeDescvarchar活动描述activeStatusvarchar活动状态社团信息表（clubsinformation），如表4.3所示：表4.3社团信息表（clubsinformation）字段类型字段说明clubsIdint社团id（主键）clubsNmaechar社团名称userIdint社长idclubsdesctext社团描述由于用户和社团之间是多对多的关系，所以我设计了一张桥表，以便于查询数据，社团成员表（clubsmember）表结构如表4.4所示：表4.4社团成员表（clubsmember）字段类型字段说明idint数据库自增加（主键）userIdint用户idclubsIdint社团idclubsMemberJobchar社团内职务clubsMemberStatuschar社团成员状态社团财务表（financialinformation）表结构如表4.5所示：表4.5社团财务表（financialinformation）字段类型字段说明moneyIdint数据库自增加（主键）clubsIdint社团idmoneyNumberfloat财务idactiveIdint活动id

5详细设计5.1系统登陆注册模块该模块是实现用户登陆注册的功能，以下将分别介绍登陆和注册的功能：用户可以在登陆界面输入用户名和密码进行登陆，用户点击登陆按钮后，前端向后端发送请求，将用户输入的用户名和密码传到后端，后端先根据用户的id找到accountinformation表中的用户id，如果找不到用户，则回返回提示信息，为“用户不存在”，如果能找到用户的话，接着判断用户的密码是否一致，如果不一致，返回错误信息为“账号或密码错误”，如果一致，返回信息登录成功，进入系统home页面，同时查找用户角色返回到前端，前端根据拿到的用户身份，渲染不同的导航菜单和界面。与此同时，保存用户信息，方便之后查询其他信息，这样就完成了用户的登陆功能，登录页面如图5.1。图5.1用户登陆页面用户点击注册按钮后，会弹出注册信息框，这个版块有两个身份的注册，分别为教师注册和学生注册，选择不同的注册，将会给用户赋值给不同的权限。此页面需要用户输入账号，名字，联系方式，性别，个人简介，密码几个数据，这几个数据都为必填项，在输入组中添加表单验证，当用户点击注册按钮时会验证用户的数据是否输入完整，如果不完整则会显示出不完整的选项，如果已经输入完整，则会将数据通过请求发送给后端，后端拿到数据后先查找accountinfromation表中的数据是否有相同用户id的用户，如果有则会提示错误信息为“用户名已存在，请选择其他用户名”。如果没有相同的用户名存在，就会在accountinfromation表中创建一个用户。之后返回成功信息，信息为“注册成功”，此时用户只再点击返回登陆即可，这样本系统的注册功能就完成了，注册界面如图5.2所示。图5.2用户注册页面以下是后端用户登陆和用户注册的相关代码：//点击登录时执行的操作

loginUser(context,form){

return

axios.get("/api/getLoginAccountInformation",

{

params:

{id:

form.id}

})

.then((result)=>{

if(result.data.length

==

0){

var

title

=

"登录失败,您输入的账号不存在";

var

type

=

"warning"

mit("resetTitle",title);

mit("resetType",type);

}else{

if(result.data[0].password

==

form.password){

var

title

=

"登录成功";

var

type

=

"success";

mit("resetTitle",title);

mit("resetType",type);

//长时间保存登录人的id

mit("resetUserId",form.id);

//长时间保存登录人的身份,登录人的身份是老师还是学生，相应的显示导航栏

mit("resetUserStatus",result.data[0].userStatus);

mit("resetShow",false);

//如果登录的是学生，那么，查找他有几个社团，分别是什么身份

context.dispatch("selectMyclubs",form.id);

}else{

var

title

=

"登录失败,您输入的账号或密码错误";

var

type

=

"warning"

mit("resetTitle",title);

mit("resetType",type);

}

}

}).catch((result)=>{

var

title

=

"登录失败，操作错误";

var

type

=

"warning";

mit("resetTitle",title);

mit("resetType",type);

});

},

saveUser(context,form){

//点击注册按钮第一件事应该是先检查账号是否已存在

return

axios.get("/api/getLoginAccountInformation",

{

params:

{id:

form.userId}

})

.then((result)=>{

console.log(result.data);

if(result.data.length

!=

0){

var

title

=

"申请账号已存在，请登录";

var

type

=

"warning"

mit("resetTitle",title);

mit("resetType",type);

}else{

//如果账号不存在，注册，向数据库插入数据

return

axios.post("/api/newLoginAccountInformation",{

userId:form.userId,

password:form.password,

userStatus:form.userStatus,

useName:form.useName,

sex:form.sex,

telNumber:form.telNumber,

userDesc:form.userDesc

})

.then((result)=>{

console.log(result);

var

title

=

"注册成功";

var

type

=

"success";

mit("resetTitle",title);

mit("resetType",type);

});

}

})5.2高校社团管理系统超级管理员模块5.2.1首页模块该页面主要是用于优化操作，登陆之后选择一种更平缓的方式加载所需的侧边导航栏，不至于突然地跳转让用户产生不好的体验，首页如图5.3所示。图5.3系统首页5.2.2社团管理模块该页面主用来详细展示系统内所存有的全部社团信息，并且教师身份拥有对社团信息修改，删除社团和新增一个社团的权限。图5.4是社团展示界面图5.4社团展示其中的修改社团功能中，老师不能对社长的学号进行修改，从业务逻辑和后期系统扩展来看，用户的学号/工号/账号通常为一个且是固定不能变动的，这个编号是数据库用来识别一个人唯一性的唯一标识，为确保系统的正确性，前端页面是不允许更改一个用户的学号/工号的。图5.5为修改社团功能图5.5修改社团

教师具有添加一个社团的权限，只需要简单填入社团基本信息，在点击确认，前端就会将数据带到后台数据库中进行一个插入工作，新增社团的编号是自动生成的，它作为识别一个社团的唯一标识，为确保唯一性，前端不允许设置社团编号。图5.6为新增社团功能。图5.6修改社团以下为该界面主要代码：//修改社团信息

saveOrUpdateClubs(context,form){

console.log(form,"++++++++++++++");

return

axios.post("/api/setClubsInformation",{

siclubsName:form.clubsName,

aiuseName:form.useName,

aitelNumber:form.telNumber,

siclubsdesc:form.clubsdesc,

clubsId:form.clubsId

})

.then((result)=>{

context.dispatch("findAll");

});

},

//获取新增社团模态框中的下拉列表数据

getOptions(context,newform){

axios.get("/api/getNewClubsOptions")

.then((result)=>{

//

console.log(result.data);

result.data.forEach((item,index)=>{

context.state.options.push({

value

:

item.userId,

label

:

"学号："+

item.userId

+"

姓名:"+

item.useName

})

})

});

},

//新增一个社团

saveNewClubs(context,newform){

return

axios.post("/api/saveNewClubs",{

clubsName:newform.clubsName,

userId:newform.userId,

clubsdesc:newform.clubsdesc

})

.then((result)=>{

axios.post("/api/updateClubsMember",{

userId:newform.userId,

})

.then((result)=>{

axios.post("/api/updateAllClubsMember")

console.log(result,"==========");

})

context.dispatch("findAll");

});

},

deleteClubs(context,row){

return

axios.get("/api/deleteClubs",{

params:

{id:

row.clubsId}

})

.then(()=>{

context.dispatch("findAll");

});

}5.2.3活动管理模块该模块分为已有活动和申请中活动两个部分：已有活动：对系统中已经存在的活动进行详细展示，为了确保查看方便，在活动时间一栏可以设置升序或降序排列。图5.7为已有活动界面。图5.7已有活动申请中活动：该界面为各个社团社长在社团活动界面提交的活动申请，可以在该界面详细看到申请的活动内容，可以对活动选择通过或拒绝。选择通过活动，前端页面会将申请活动的编号返回后台数据库中，在数据库中将该条活动的状态由“申请”改为“通过”，同时已有活动界面就可以检索到这条数据了。拒绝活动则会将该活动编号返回，将数据库中的此条数据删除。图5.8为申请活动界面。图5.8申请活动界面以下为该界面核心代码：

//通过活动申请

saveOrUpdateActions(context,row){

console.log(row.activeId);

return

axios.get("/api/updateClubsInformation",{

params:

{id:

row.activeId}

})

.then((result)=>{

context.dispatch("findAll");

});

},

deleteActions(context,row){

return

axios.get("/api/deleteClubsInformation",{

params:

{id:

row.activeId}

})

.then(()=>{

context.dispatch("findAll");

});

}5.2.4修改信息模块该模块在登录时已经记录下所登录用户的id，在点击侧边导航栏的该模块时，前端才会将这个id待会后台数据库中检索需要的信息。这个设定可以避免数据的过度加载所导致的页面反应慢的弊端，也不需要重复访问数据库。此界面上同样不允许修改学号/工号，只用来做信息展示。图5.9为修改信息界面。图5.9修改信息页面5.3高校社团管理系统社团管理员模块5.3.1首页模块这个部分和教师首页相同，只起过渡作用，也体现了代码的复用。这里不做重复介绍。5.3.2换届管理模块该模块只有社团管理员可见，首先展示现任社长的基本信息，随后是换届功能，在换届功能的下拉框中，下一任社长的备选人选只能是该社团的成员。这保证了社团日常处理事务的逻辑，也避免了在众多数据中寻找自己需要的数据，操作更加简便。这个部分同样是在登录的时候保存了登录用户的id，在随后加载相应侧边栏的时候，在桥表中检索登录用户所加入的社团信息。然后根据检索到的社团编号去查找该社团下拥有的全部社员。同样适用数据的懒加载，只有在点击相关模块后，该页面的数据才会加载，并不是在登陆时就检索好所有的信息。图5.10为换届管理页面。图5.10换届管理页面项这个部分的核心代码如下：findAll(context,id){

axios.get("/api/getLoginAccountInformation",{

params:{id:id}

})

.then((result)=>{

console.log(result.data[0]);

mit("resetTable",result.data);

//

mit("resetOptions");

});

},

//获取换届操作的下拉列表数据

getOptions(context,id){

axios.get("/api/selectClubMember",{

params:{id:id}

})

.then((result)=>{

result.data.forEach((item,index)=>{

context.state.options.push({

value

:

item.userId,

label

:

"学号："+

item.userId

+"

姓名:"+

item.useName

})

})

});

},

updateGeneralManagement(context,form,clubsId){

console.log(form.value,"========");

axios.post("/api/updateGeneralManagement",{

newId:form.value,

clubsId:clubsId,

oldId:clubsId,

})

.then((result)=>{

console.log(result);

context.dispatch("findAll");

});

}5.3.3社团活动界面该界面与教师模块的社团活动不同，教师模块的社团活动可以看到全部社团下拥有的活动，而社长模块的社团活动只能显示对应社团的活动。在用户登陆时被记录下的用户Id，前端传递到后台数据库中检索用户对应的社团id，再利用社团id查找该社团下对应的活动。这个时候会过滤掉活动状态为“申请”的活动，即教师模块中没有通过申请的活动，是不会被用户看到的。社长拥有申请活动的权限，所以在左上角显示的展示了一个申请活动按钮，点击该按钮填写相关活动信息后，前端会将表格信息带回后台数据库中，插入相关数据，并将新添加的活动状态设置为“申请”。图5.11为社团活动界面。图5.12为申请活动功能。图5.11社团活动图5.12申请社团活动以下是该部分的核心代码：findAll(context,id){

axios.get("/api/getMyClubsInformation",{

params:{id:id}

})

.then((result)=>{

console.log(result);

mit("resetTbale",result.data);

});

},

saveOrUpdateActive(context,form,id){

axios.post("/api/saveActive",{

clubsId

:

id,

activeName:form.activeName,

clubsName:form.clubsName,

userName:form.userName,

userTelephone:form.userTelephone,

activeFinance:form.activeFinance,

activePlace:form.activePlace,

activeTime:form.activeTime,

activeDesc:form.activeDesc,

})

.then((result)=>{

});5.3.4社团模块这个模块分为两个部分，一个是全部社员，一个是申请中社员。全部社员模块展示了该社团下所有的社员，并展示出详细信息。社长拥有对社团成员信息修改的权限。这个功能下同样不允许修改社员的学号。另一个功能点为删除社员，这个功能用作社员退社，为保证该操作的严谨性，在一开始分析业务逻辑时，就没有将这个功能划分到普通社员的权限中。图5.13为全部社员界面。图5.13全部社员界面核心代码如下：findAll(context,id){

axios.get("/api/selectClubMember",{

params:{id:id}

})

.then((result)=>{

//

console.log("response",response);

//将查询到的数据通过mutations设置到state中

mit("resetTable",result.data);

});

},deleteById(context,row,clubsId){

var

id

=

row.userId;

return

axios.get("/api/dleteClubsMember",{

params:{id:id,

clubsId:clubsId}

})

.then((result)=>{

context.dispatch("findAll");

});在申请中社员界面，社长可以查看用户对加入社团的申请，拥有通过申请或拒绝申请两个功能，通过申请，前端页面会带着申请者的id返回后台数据库，将该用户的id以及社团的id关联，存入桥表中，将状态由“申请”改为“通过”，此时，就可以在全部社员界面检索到该社员的信息。拒绝申请时，前端页面会带着申请者Id，将后台数据库中该条数据直接删除。图5.14为申请中社员界面图5.14申请中社员界面下面是核心代码：findAll(context,id){

axios.get("/api/selectApplicationClubMember",{

params:{id:id}

})

.then((result)=>{

console.log(result);

//将查询到的数据通过mutations设置到state中

mit("resetTable",result.data);

});

},

saveOrUpdate(context,id,clubsId){

return

axios.get("/api/updateApplicationClubMember",{

id:id,

clubsId:clubsId

})

.then((result)=>{

console.log(result);

context.dispatch("findAll")

});

},

deleteById({dispatch,commit},id,clubsId){

return

axios.get("/api/deleteApplicationClubMember",{

id:id,

clubsId:clubsId

})

.then((result)=>{

dispatch("findAll");

});

}5.3.5社团财务模块该模块主要展示社团活动所用的经费，对于经费细节进行展示，在用户登陆时记录用户编号，带到后台检索社团Id后再寻找对应的财务信息，后台数据库中的财务表中保存了活动Id再通过查询到的活动id找到花费经费对应的活动。图5.15位社团财务页面图5.15社团财务界面核心代码如下：findAll(context,id){

axios.get("api/getClubsFinancial",{

params:{clubsId:id}

})

.then((result)=>{

console.log(result);

mit("resetTable",result.data);

});

},

saveOrUpdateActive(context,form){

return

http.post("",form)

.then((result)=>{

context.dispatch("findAll");

});

}5.3.6社团展示模块该模块主要展示系统内所有的社团信息，方便学生用户加入新的社团，点击右上角的加入社团字样后，前端页面会将保存到的用户id和所点击的社团Id一起传递到后台，在桥表中插入一个新的数据，并将该条数据的状态更改为“申请”，之后这条数据就会从社长模块的申请中社员页面被检索到。图5.16为社团展示界面。图5.16社团展示界面核心代码如下：findAll(context){

http.get("/api/getClubsInformation")

.then((result)=>{

console.log(result);

mit("resetTable",result.data);

});

},

saveOrUpdateClubs(context,form){

return

http.post("",form)

.then((result)=>{

context.dispatch("findAll");

});

},

addOneNewClub(context,clubId){

return

http.post("",clubId)