高校社團管理信息系統的設計與實現

任鑫梅 劉小英

摘要：為豐富校園生活，各大高校均開設了各種社團，傳統社團活動的舉辦需教師審批、學生現場報名，報名的信息都是由紙質保存，不僅浪費紙張且易丟失，因此，有必要開發一個社團信息管理系統。采用了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.

【通聯編輯：王力】