任鑫梅 劉小英
摘要:為豐富校園生活,各大高校均開設(shè)了各種社團(tuán),傳統(tǒng)社團(tuán)活動的舉辦需教師審批、學(xué)生現(xiàn)場報名,報名的信息都是由紙質(zhì)保存,不僅浪費紙張且易丟失,因此,有必要開發(fā)一個社團(tuán)信息管理系統(tǒng)。采用了JavaScript開發(fā)語言,結(jié)合當(dāng)下比較流行的Vue框架和MySQL數(shù)據(jù)庫,設(shè)計開發(fā)了高校社團(tuán)管理信息系統(tǒng)。實現(xiàn)了用戶的注冊、個人信息修改、用戶信息管理、社團(tuán)信息管理、社團(tuán)活動管理、社團(tuán)新聞管理、新聞留言管理等功能。經(jīng)過測試表明,該系統(tǒng)能滿足社團(tuán)建設(shè)和管理需求,能有效保存信息和提高工作效率。
關(guān)鍵詞:社團(tuán);信息管理;JavaScript;Vue;MySQL
中圖分類號:TP311.52? ? ? ? 文獻(xiàn)標(biāo)識碼: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
高校社團(tuán)是學(xué)生自發(fā)創(chuàng)建的擁有相同興趣愛好的活動組織,通過組織各式各樣的活動豐富學(xué)生的校園生活。每年9月,新生到校后,各種社團(tuán)在校園中進(jìn)行宣傳,招募新成員,新成員通過填寫報名表參加對應(yīng)社團(tuán),之后社團(tuán)組織活動時需要經(jīng)過教師審批,學(xué)生報名等過程,周期較長,所有過程材料通過紙質(zhì)保存,不僅浪費紙張,而且容易丟失,整個組織過程也比較低效,因此,有必要開發(fā)一個社團(tuán)信息管理系統(tǒng),簡化報名,組織活動流程,提高效率[1]。
目前,許多學(xué)者開始嘗試開發(fā)高校社團(tuán)管理系統(tǒng),例如滁州職業(yè)技術(shù)學(xué)院的鈕永莉開發(fā)了基于VC框架的高校社團(tuán)管理系統(tǒng),大簡化了社團(tuán)的日常管理工作[2];西北民族大學(xué)的曹光輝設(shè)計開發(fā)了基于Web的高校社團(tuán)管理系統(tǒng),使事務(wù)管理工作變得更加方便科學(xué)[3];電子科技大學(xué)的楊友國利用數(shù)據(jù)庫技術(shù)開發(fā)了大學(xué)生社團(tuán)信息管理系統(tǒng),主要針對社團(tuán)信息和社團(tuán)會員的信息的數(shù)據(jù)進(jìn)行管理[4],還有很多學(xué)者利用各種技術(shù)開發(fā)了適合本校的社團(tuán)管理系統(tǒng),大大提高了辦事效率[5-8]。本文基于JavaScript開發(fā)了適合高校學(xué)生使用的社團(tuán)信息管理系統(tǒng)。
1需求分析
系統(tǒng)具有四個不同角色:游客、會員、社團(tuán)負(fù)責(zé)人、管理員。主要包含個人信息管理、用戶信息管理、社團(tuán)管理、社團(tuán)活動管理、社團(tuán)新聞管理、新聞留言管理等功能。
1)個人信息管理:用戶可修改自己的個人信息,當(dāng)修改電話號碼或密碼等重要信息時會要求用戶進(jìn)行重新登錄。
2)用戶信息管理:管理員、社團(tuán)負(fù)責(zé)人對會員用戶進(jìn)行信息的增刪查改。
3)社團(tuán)管理:對社團(tuán)的創(chuàng)建、刪除、修改信息、查看社團(tuán)信息。
4)社團(tuán)活動管理:負(fù)責(zé)人對活動的創(chuàng)建、會員參與活動、管理員修改活動信息、刪除活動。
5)社團(tuán)新聞管理:會員查看新聞、負(fù)責(zé)人發(fā)布新聞、管理員修改和刪除新聞。
6)新聞留言管理:會員對新聞發(fā)表留言、負(fù)責(zé)人和管理員查看刪除留言。
2 系統(tǒng)功能設(shè)計與實現(xiàn)
2.1 系統(tǒng)功能設(shè)計
系統(tǒng)功能結(jié)構(gòu)如圖1所示,包含了注冊登錄、個人信息管理、用戶信息管理、社團(tuán)信息管理、社團(tuán)活動管理、社團(tuán)新聞管理及社團(tuán)新聞留言管理功能。
2.2系統(tǒng)實現(xiàn)
2.2.1 登錄及注冊模塊
系統(tǒng)設(shè)定了一個默認(rèn)的管理員的賬號,其他的賬號信息由用戶注冊得到。
用戶的注冊:用戶需要使用自己的電話號碼作為賬號進(jìn)行注冊,若當(dāng)前號碼已被注冊需要聯(lián)系管理員進(jìn)行密碼的重新修改,用戶的賬號和密碼都需要填寫符合規(guī)范的內(nèi)容。
登錄功能就是將用戶輸入的密碼與當(dāng)前賬號進(jìn)行匹配,如果賬號存在但密碼錯誤,就提醒用戶密碼輸入錯誤,若賬號不存在就提醒用戶進(jìn)行注冊,如果成功就登錄成功并根據(jù)當(dāng)前賬號的身份狀態(tài)做不同的頁面跳轉(zhuǎn)。
2.2.2個人信息模塊
用戶可以對自己的個人信息和密碼進(jìn)行修改的,修改信息后要求用戶重新登錄該系統(tǒng)。
2.2.3 用戶信息模塊
該部分操作只限于管理員使用,包含對用戶信息的修改和刪除。管理員可直接點擊編輯按鈕修改用戶信息,修改完成后保存即可。管理員也可通過搜索框?qū)τ脩粜畔⑦M(jìn)行查詢搜索。
2.2.4 社團(tuán)信息模塊
社團(tuán)的創(chuàng)建是由用戶提交申請后添加的,設(shè)置了一個社團(tuán)的狀態(tài)值,0是正在申請,1是申請通過,2是申請駁回。社團(tuán)信息的修改是由負(fù)責(zé)人和管理員操作,刪除功能只有管理員才有。
2.2.5 社團(tuán)活動模塊
社團(tuán)活動由負(fù)責(zé)人提交活動申請,待管理員審核通過后進(jìn)行發(fā)布,會員根據(jù)所展示的活動信息參與活動報名。管理員可對活動信息進(jìn)行所有操作。
2.2.6社團(tuán)新聞模塊
社團(tuán)新聞由負(fù)責(zé)人發(fā)布,由于不需要提交申請,一經(jīng)發(fā)布就會被展示,所以不允許負(fù)責(zé)人隨意更改新聞內(nèi)容。管理員則可進(jìn)行更改等一系列操作。
2.2.7 新聞留言模塊
會員針對發(fā)布出的新聞發(fā)表留言,負(fù)責(zé)人和管理員可以查看留言信息,或者選擇刪除某些言論,但不可更改用戶發(fā)表的留言。
3系統(tǒng)關(guān)鍵技術(shù)
在整個系統(tǒng)中,采用是JavaScript作為開發(fā)語言,Vue搭建整個系統(tǒng)。一些復(fù)合型組件都采用elementui的組件庫,所有的系統(tǒng)信息都采用MySQL數(shù)據(jù)庫進(jìn)行存儲。
3.1模糊查詢功能
用戶在輸入框中輸入模糊查詢的關(guān)鍵詞,在表格中進(jìn)行關(guān)鍵詞查詢篩選,關(guān)鍵代碼如下:
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 將表格信息導(dǎo)出成Excel
當(dāng)用戶進(jìn)行活動報名后,社團(tuán)負(fù)責(zé)人需要將報名信息導(dǎo)出以供其他用途,表格導(dǎo)出關(guān)鍵代碼如下:
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 獲取上傳圖片的路徑
用戶的頭像、新聞圖片需要上傳至服務(wù)器獲取由時間戳構(gòu)成的圖片路徑,關(guān)鍵代碼如下:
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 結(jié)束語
高校社團(tuán)管理信息系統(tǒng)采用Vue框架進(jìn)行搭建,實現(xiàn)了個人信息管理、用戶信息管理、社團(tuán)管理、社團(tuán)活動管理、社團(tuán)新聞管理、新聞留言管理功能,界面友好,操作簡單,能夠滿足高校社團(tuán)建設(shè)及管理需求,能有效提高工作效率。
參考文獻(xiàn):
[1] 惠苗,張曉冬.“互聯(lián)網(wǎng)+”高校社團(tuán)管理系統(tǒng)的設(shè)計與實現(xiàn)[J].萍鄉(xiāng)學(xué)院學(xué)報,2019,36(3):78-83.
[2] 鈕永莉,戴子?xùn)|.基于MVC框架的高校社團(tuán)管理系統(tǒng)研究與實現(xiàn)[J].西安文理學(xué)院學(xué)報(自然科學(xué)版),2018,21(4):84-87,112.
[3] 曹光輝.基于Web的高校社團(tuán)管理系統(tǒng)設(shè)計與實現(xiàn)[J].無線互聯(lián)科技,2020,17(8):38-40.
[4] 韓至.高校學(xué)生社團(tuán)管理系統(tǒng)設(shè)計與開發(fā)[J].軟件導(dǎo)刊,2016,15(7):79-81.
[5] 董彩華,梁敏健,郭振銘.高校社團(tuán)管理系統(tǒng)的設(shè)計與實現(xiàn)[J].電腦與電信,2017(Z1):28-30.
[6] 彭林,于國龍,宋敏,等.高校社團(tuán)管理系統(tǒng)設(shè)計與實現(xiàn)[J].物聯(lián)網(wǎng)技術(shù),2017,7(2):113-114.
[7] 韓璐. 高校學(xué)生社團(tuán)管理系統(tǒng)的設(shè)計與實現(xiàn)[D].電子科技大學(xué),2018.
[8] 劉歡,李功權(quán).基于WebGIS的校園社團(tuán)管理系統(tǒng)[J].地理空間信息,2018,16(3):68-70.
【通聯(lián)編輯:王力】