劉曼玉　李康文　張石　龐旭東　彭德民　曹衛(wèi)東

摘要：高校社團活動日益豐富，越來越多的同學(xué)希望加入社團，鑒于移動終端的廣泛使用，設(shè)計并實現(xiàn)了一種高校社團管理軟件，目的是為了進行便捷的社團管理，有效的活動宣傳以及方便的學(xué)生加入。項目基于HTML5技術(shù)跨平臺開發(fā)，將手機APP與傳統(tǒng)網(wǎng)頁制作相結(jié)合，實現(xiàn)IOS系統(tǒng)和Android系統(tǒng)均能兼容的APP，同時建立一個具有穩(wěn)定性和安全性的宣傳加功能類的網(wǎng)站；社團管理的權(quán)限分級清晰并向?qū)W生精簡集聚了各社團的信息，集管理、閱讀、報名、互動與一身。

關(guān)鍵詞：HTML5；跨平臺；社團管理；APP；網(wǎng)站

中圖分類號：TP311 文獻標(biāo)識碼：A 文章編號：1009-3044（2018）18-0060-03

目前，智能手機在大學(xué)生中的使用率已幾乎達到100%，同時高校的社團活動也日益豐富，而其宣傳方式除了線下的展臺外一般都采用微信公眾號推出的形式，學(xué)生一般需要關(guān)注多個公眾號才能獲取幾個不同社團的活動信息，并且不能僅通過搜索找到校內(nèi)自己想要的類型的活動，只能從大量的活動信息中手動去篩選排除，同時高校社團的管理工作也較為繁瑣，線下社團管理不同職位的辦公室往往相隔較遠，而社團管理工作常常需要多級負責(zé)人管理，這使得每次的審批等相關(guān)工作十分耗時費力。

面對這些現(xiàn)存的問題，市場上也涌現(xiàn)出了大量的高校社團相關(guān)軟件，比如“奇集APP”[1]，“找社團APP”[2]，但是將社團活動宣傳和社團管理結(jié)合的確比較少；項目基于HTML5技術(shù)，對高校社團管理流程及網(wǎng)站進行設(shè)計實現(xiàn)，旨在打造一款既能精簡顯示活動信息及報名互動，又能實現(xiàn)權(quán)限分級的清晰化管理的應(yīng)用軟件。

1 開發(fā)工具及技術(shù)

1.1 HTML5

HTML5技術(shù)是建立在HTML4.01技術(shù)基礎(chǔ)之上的互聯(lián)網(wǎng)應(yīng)用技術(shù)，它的應(yīng)用，能夠有效豐富Web網(wǎng)頁的呈現(xiàn)方式[3]，因而與傳統(tǒng)網(wǎng)頁的制作以及原生APP相比，采用HTML5技術(shù)，可用性和用戶體驗都較好。

1.2 Myeclipse及Eclipse

MyEclipse是對EclipseIDE的擴展，完整支持HTML，CSS，Javascript，SQL，同時支持快速添加技術(shù)功能到Web項目中，使用可視化編輯器以便編碼和配置，并且還可以在多種應(yīng)用服務(wù)器上測試任務(wù)[4]。

Eclipse 是一個開放源代碼的、基于Java的可擴展開發(fā)平臺。就其本身而言，它只是一個框架和一組服務(wù)，用于通過插件組件構(gòu)建開發(fā)環(huán)境，它給程序員提供了一個一流的集成開發(fā)環(huán)境[5]。

1.3 MySQL

MySQL是一個關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，體積小、速度快并且開放源碼，一般中小型網(wǎng)站的開發(fā)都選擇 MySQL，而且它可以工作在不同的平臺上，支持C，C++，JAVA等多種開發(fā)語言[6]

1.4 Tomcat

Tomcat是一個提供支持Servlet和JSP運行的容器，總能體現(xiàn)最新的Servlet 和JSP 規(guī)范，因而它根據(jù)Servlet和JSP所指定的來實時產(chǎn)生動態(tài)網(wǎng)頁的內(nèi)容，并且其為動態(tài)和靜態(tài)網(wǎng)頁都能提供支持[7]。

2 系統(tǒng)設(shè)計

2.1 系統(tǒng)設(shè)計目標(biāo)

1） 基于HTML5技術(shù)實現(xiàn)跨平臺開發(fā)，實現(xiàn)軟件在IOS和安卓系統(tǒng)上的兼容；

2） 社團活動消息要求精簡集聚，將校內(nèi)所有社團發(fā)布的活動信息分類顯示，用戶只需要選擇需要查看的活動分類即可；

3） 實現(xiàn)學(xué)校、社團、學(xué)生之間的三級權(quán)限清晰化管理，學(xué)校用戶負責(zé)審批等，社團用戶負責(zé)申請活動舉辦權(quán)及其他相關(guān)所需物、發(fā)布已審批活動消息、上下級及同級之間的聯(lián)系等，學(xué)生用戶活動報名、加入社團申請、關(guān)注收藏評論等；

4） 用戶能夠瀏覽一般信息，也可選擇登錄身份以及正確的登錄用戶名及密碼信息進入該級用戶的個人獨有界面。

2.2 系統(tǒng)總體框架設(shè)計

根據(jù)高校社團管理的實際情況，系統(tǒng)總體框架圖如圖1所示，包括學(xué)校管理、社團管理、學(xué)生管理三部分，系統(tǒng)為不同用戶如行政管理處、學(xué)校信息管理員、團委、社團的指導(dǎo)老師、會長、部長、學(xué)生等分別設(shè)置不同的用戶組，分配不同權(quán)限，擁有不同的功能，用戶首先選擇登錄身份并以相應(yīng)的賬號和密碼進行安全性驗證登錄進入相應(yīng)的顯示界面。

系統(tǒng)實行三級權(quán)限分級管理，共分為三種用戶，分別是學(xué)校用戶、社團用戶和學(xué)生用戶；學(xué)校用戶包括行政管理處、學(xué)校信息管理員以及團委用戶，分別負責(zé)教室多媒體使用審核、學(xué)校信息編輯和社團成立或解散相關(guān)、活動舉辦審核；

社團用戶包括指導(dǎo)老師、會長以及部長用戶，依次為上下級關(guān)系，主要事務(wù)有人員及活動審核、上下級交流等；

學(xué)生用戶有普通學(xué)生和社團干事兩種，共有的事務(wù)是活動消息搜索、瀏覽、點贊、評論、收藏、報名等，干事所特有的事務(wù)是可以選擇自己所加入的社團，對社團工作進行處理以及與上級進行交流。

2.3 系統(tǒng)功能模塊設(shè)計

系統(tǒng)共分為6個模塊，登錄模塊、審核模塊、交流模塊、編輯模塊、顯示模塊、報名模塊，如圖2所示：

登錄模塊，根據(jù)用戶選擇的登錄身份及輸入的賬號判斷該用戶的具體身份，驗證后進入不同的工作界面，確定用戶的權(quán)限；

審核模塊，由下級對上級提出活動或人員審核申請，上級根據(jù)申請信息進行審核并向下級反饋，通過則提交給再上一級；

交流模塊，即實現(xiàn)各級成員之間的相互交流討論；

編輯模塊包括用戶對自己主頁上簡介等信息的編輯以及社團干事對社團活動信息的編輯與提交、發(fā)布；

顯示模塊即信息的顯示，主要是分類顯示活動信息以及對活動的評論、收藏、點贊；

報名模塊即學(xué)生登錄之后選擇社團活動網(wǎng)上報名參加該活動，保存學(xué)生報名信息并同時將學(xué)生的部分信息交由負責(zé)該活動的社團管理人員。

2.4 數(shù)據(jù)庫設(shè)計

選用MySql作為數(shù)據(jù)庫；系統(tǒng)數(shù)據(jù)庫中主要有信息管理員用戶表、指導(dǎo)老師用戶表、學(xué)生用戶表、社團信息表、活動消息表、評論信息表、各級用戶接收信息表等。數(shù)據(jù)庫搭建過程中所涉及的部分E-R圖如圖3所示。

3 系統(tǒng)實現(xiàn)

3.1網(wǎng)站的實現(xiàn)

在網(wǎng)站首頁選擇用戶登錄身份，輸入登錄賬號及密碼，系統(tǒng)進行密碼驗證并根據(jù)所選的不同身份進入不同的界面；一共有三級用戶：學(xué)校用戶、社團用戶、學(xué)生用戶，在登錄時系統(tǒng)會對賬號進行分析，判斷該級用戶下的具體身份比如社團用戶下有指導(dǎo)老師用戶、會長用戶及部長用戶，然后進入不同的工作界面，分配不同的權(quán)限；若是初次登錄，則除學(xué)校用戶外都首先需要提交相關(guān)信息向上一級申請，通過后才能獲得賬號。

指導(dǎo)老師用戶登錄成功后進入到其管理主頁，選擇交流互動功能進入信息交流區(qū)；指導(dǎo)老師與會長交流頁面的加載及交流信息的顯示流程圖如圖4所示，交流頁面的信息加載結(jié)果如圖5所示：

3.2移動終端

移動終端所開發(fā)的并非為原生態(tài)APP[8]而是能跨平臺運行的Web APP[9]，即無需重新建立一個基于安卓（JAVA）和基于IOS（Object-C）的兩個工程，而是利用原有的HTML5代碼（網(wǎng)站）實現(xiàn)在APP端能瀏覽到網(wǎng)頁的內(nèi)容，不論是基于安卓還是基于IOS的APP。

具體實現(xiàn)操作為在已建立的APP外殼下對網(wǎng)頁進行打包，借助瀏覽器核心組件Web View對遠程Web服務(wù)器的網(wǎng)頁進行加載，其中在APP外殼下還得設(shè)置網(wǎng)絡(luò)權(quán)限和在不毀滅當(dāng)前窗口下橫豎屏切換的效果，實現(xiàn)APP本地與遠程JS交互、APP頁面內(nèi)容加載可回溯以及APP加載的頁面自適應(yīng)屏幕和縮放，APP實現(xiàn)效果如圖6所示。

4 結(jié)束語

基于HTML5技術(shù)的高校社團管理軟件及網(wǎng)站的設(shè)計與實現(xiàn)，將傳統(tǒng)網(wǎng)頁與手機APP的制作相配合，實現(xiàn)了跨平臺開發(fā)，精簡的活動信息以及學(xué)校、社團和學(xué)生之間權(quán)限分級的清晰化管理，提高了社團活動的易選性并清晰知道活動來源等信息，同時簡化社團管理工作，使其清晰明了易實現(xiàn)；功能測試表明，系統(tǒng)的使用效果良好，基本實現(xiàn)預(yù)期目標(biāo)。

參考文獻：

[1] 百度百科.奇集 [EB/OL].[2018-04-02].https：//baike.baidu.com/item/奇集 /19694206？fr=aladdin.

[2] 歷趣APP下載.APP介紹.[EB/OL].[2018-04-02].http：//www.liqucn.com/rj/423597.shtml.

[3] 溫苑花.基于HTML5技術(shù)在移動互聯(lián)網(wǎng)中的應(yīng)用研究[J].中國新通信，2017（23）.

[4] 肖海. 基于Android的教學(xué)管理系統(tǒng)的設(shè)計與實現(xiàn)[D].成都：西華大學(xué)，2015.

[5] 周瑩瑩. 基于Eclipse的圖書管理系統(tǒng)設(shè)計與實現(xiàn)[D]. 成都：電子科技大學(xué)，2013.

[6] 陳錦偉. 基于MySQL的空間數(shù)據(jù)庫關(guān)鍵技術(shù)研究[D]. 南京：南京郵電大學(xué)，2013.

[7] 周毅. 基于J2EE的網(wǎng)上商城的設(shè)計與實現(xiàn)[D]. 西安：西安電子科技大學(xué)，2014.

[8] 湯愷.原生APP和HTML5的混合開發(fā)模式 在“浙江新聞”客戶端中的實踐[J].傳媒評論，2015（3）：65-68.

[9] 黃悅深.基于HTML5的移動Web App開發(fā)[J].圖書館雜志，2014，33（7）：72-77.