高校社团管理信息系统的设计与实现

任鑫梅 刘小英

摘要：为丰富校园生活，各大高校均开设了各种社团，传统社团活动的举办需教师审批、学生现场报名，报名的信息都是由纸质保存，不仅浪费纸张且易丢失，因此，有必要开发一个社团信息管理系统。采用了JavaScript开发语言，结合当下比较流行的Vue框架和MySQL数据库，设计开发了高校社团管理信息系统。实现了用户的注册、个人信息修改、用户信息管理、社团信息管理、社团活动管理、社团新闻管理、新闻留言管理等功能。经过测试表明，该系统能满足社团建设和管理需求，能有效保存信息和提高工作效率。

关键词：社团;信息管理;JavaScript;Vue;MySQL

中图分类号：TP311.52        文献标识码：A

文章编号：1009-3044（2021）11-0031-02

Design and Implementation of the Management Information System of University Associations

REN Xin-mei， LIU Xiao-ying

（Panzhihua University， Panzhihua 617000， China）

Abstract： In order to enrich campus life， all the universities have set up various associations. Traditional association activities need teachers' approval and students' on-site registration， and all registration information is saved in paper， which wastes paper and is easy to be lost. Therefore， it is necessary to develop association information management system. Using JavaScript language， and combined with the popular VUE framework and MySQL database， the university association management information system was designed and developed. It realized the function of user registration， personal information modification， user information management， association information management， association activities management， association news management， news message management and other functions. Through the system test， the system can meet the needs of community construction and management， and can effectively preserve information and improve work efficiency.

Key words： association; information management; JavaScript; Vue; MySQL

高校社团是学生自发创建的拥有相同兴趣爱好的活动组织，通过组织各式各样的活动丰富学生的校园生活。每年9月，新生到校后，各种社团在校园中进行宣传，招募新成员，新成员通过填写报名表参加对应社团，之后社团组织活动时需要经过教师审批，学生报名等过程，周期较长，所有过程材料通过纸质保存，不仅浪费纸张，而且容易丢失，整个组织过程也比较低效，因此，有必要开发一个社团信息管理系统，简化报名，组织活动流程，提高效率[1]。

目前，许多学者开始尝试开发高校社团管理系统，例如滁州职业技术学院的钮永莉开发了基于VC框架的高校社团管理系统，大简化了社团的日常管理工作[2];西北民族大学的曹光辉设计开发了基于Web的高校社团管理系统，使事务管理工作变得更加方便科学[3];电子科技大学的杨友国利用数据库技术开发了大学生社团信息管理系统，主要针对社团信息和社团会员的信息的数据进行管理[4]，还有很多学者利用各种技术开发了适合本校的社团管理系统，大大提高了办事效率[5-8]。本文基于JavaScript开发了适合高校学生使用的社团信息管理系统。

1需求分析

系统具有四个不同角色：游客、会员、社团负责人、管理员。主要包含个人信息管理、用户信息管理、社团管理、社团活动管理、社团新闻管理、新闻留言管理等功能。

1）个人信息管理：用户可修改自己的个人信息，当修改电话号码或密码等重要信息时会要求用户进行重新登录。

2）用户信息管理：管理員、社团负责人对会员用户进行信息的增删查改。

3）社团管理：对社团的创建、删除、修改信息、查看社团信息。

4）社团活动管理：负责人对活动的创建、会员参与活动、管理员修改活动信息、删除活动。

5）社团新闻管理：会员查看新闻、负责人发布新闻、管理员修改和删除新闻。

6）新闻留言管理：会员对新闻发表留言、负责人和管理员查看删除留言。

2 系统功能设计与实现

2.1 系统功能设计

系统功能结构如图1所示，包含了注册登录、个人信息管理、用户信息管理、社团信息管理、社团活动管理、社团新闻管理及社团新闻留言管理功能。

2.2系统实现

2.2.1 登录及注册模块

系统设定了一个默认的管理员的账号，其他的账号信息由用户注册得到。

用户的注册：用户需要使用自己的电话号码作为账号进行注册，若当前号码已被注册需要联系管理员进行密码的重新修改，用户的账号和密码都需要填写符合规范的内容。

登录功能就是将用户输入的密码与当前账号进行匹配，如果账号存在但密码错误，就提醒用户密码输入错误，若账号不存在就提醒用户进行注册，如果成功就登录成功并根据当前账号的身份状态做不同的页面跳转。

2.2.2个人信息模块

用户可以对自己的个人信息和密码进行修改的，修改信息后要求用户重新登录该系统。

2.2.3 用户信息模块

该部分操作只限于管理员使用，包含对用户信息的修改和删除。管理员可直接点击编辑按钮修改用户信息，修改完成后保存即可。管理员也可通过搜索框对用户信息进行查询搜索。

2.2.4 社团信息模块

社团的创建是由用户提交申请后添加的，设置了一个社团的状态值，0是正在申请，1是申请通过，2是申请驳回。社团信息的修改是由负责人和管理员操作，删除功能只有管理员才有。

2.2.5 社团活动模块

社团活动由负责人提交活动申请，待管理员审核通过后进行发布，会员根据所展示的活动信息参与活动报名。管理员可对活动信息进行所有操作。

2.2.6社团新闻模块

社团新闻由负责人发布，由于不需要提交申请，一经发布就会被展示，所以不允许负责人随意更改新闻内容。管理员则可进行更改等一系列操作。

2.2.7 新闻留言模块

会员针对发布出的新闻发表留言，负责人和管理员可以查看留言信息，或者选择删除某些言论，但不可更改用户发表的留言。

3系统关键技术

在整个系统中，采用是JavaScript作为开发语言，Vue搭建整个系统。一些复合型组件都采用elementui的组件库，所有的系统信息都采用MySQL数据库进行存储。

3.1模糊查询功能

用户在输入框中输入模糊查询的关键词，在表格中进行关键词查询筛选，关键代码如下：

const search = this.search;

if （search） {

return this.r.filter（data => {

return Object.keys（data）.some（key => {

return （String（data[key]）.toLowerCase（）.indexOf（search） > -1）; }）;

}）;

}

3.2 将表格信息导出成Excel

当用户进行活动报名后，社团负责人需要将报名信息导出以供其他用途，表格导出关键代码如下：

var xlsxParam = { raw： true }

var wb = XLSX.utils.table_to_book（this.$refs.multipleTable.$el，xlsxParam）

var wbout = XLSX.write（wb， { bookType： 'xlsx'， bookSST： true， type： 'array' }）

try {

FileSaver.saveAs（new Blob（[wbout]， { type： 'application/octet-stream' }）， '报名表.xlsx'）

} catch （e） { if （typeof console ！== 'undefined'） console.log（e， wbout） }

return wbout

3.3 获取上传图片的路径

用户的头像、新闻图片需要上传至服务器获取由时间戳构成的图片路径，关键代码如下：

var date = new Date（）;

// var time = '_' + date.getFullYear（） + "_" + date.getMonth（） + "_" + date.getDay（） + "_" + date.getHours（） + "_" + date.getMinutes（）;

//var avatarName = '/' + name + '_' + date.getTime（） + '.' + type;

var avatarName = '/' + date.getTime（） + '.' + type;

var newPath = form.uploadDir + avatarName;

fs.renameSync（files.file.path， newPath）; //重命名

// res.send（{data："/upload/"+avatarName}）

let data = {};

data.name = avatarName;

data.url = "http：//localhost：81" + filedr + avatarName;

datas.data = data

res.send（datas）;

4 结束语

高校社团管理信息系统采用Vue框架进行搭建，实现了个人信息管理、用户信息管理、社团管理、社团活动管理、社团新闻管理、新闻留言管理功能，界面友好，操作简单，能够满足高校社团建设及管理需求，能有效提高工作效率。

参考文献：

[1] 惠苗，张晓冬.“互联网+”高校社团管理系统的设计与实现[J].萍乡学院学报，2019，36（3）：78-83.

[2] 钮永莉，戴子东.基于MVC框架的高校社团管理系统研究与实现[J].西安文理学院学报（自然科学版），2018，21（4）：84-87，112.

[3] 曹光辉.基于Web的高校社团管理系统设计与实现[J].无线互联科技，2020，17（8）：38-40.

[4] 韩至.高校学生社团管理系统设计与开发[J].软件导刊，2016，15（7）：79-81.

[5] 董彩华，梁敏健，郭振铭.高校社团管理系统的设计与实现[J].电脑与电信，2017（Z1）：28-30.

[6] 彭林，于国龙，宋敏，等.高校社团管理系统设计与实现[J].物联网技术，2017，7（2）：113-114.

[7] 韩璐. 高校学生社团管理系统的设计与实现[D].电子科技大学，2018.

[8] 刘欢，李功权.基于WebGIS的校园社团管理系统[J].地理空间信息，2018，16（3）：68-70.

【通聯编辑：王力】