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

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

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

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

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

面對這些現(xiàn)存的問題，市場上也涌現(xiàn)出了大量的高校社團(tuán)相關(guān)軟件，比如“奇集APP”[1]，“找社團(tuán)APP”[2]，但是將社團(tuán)活動宣傳和社團(tuán)管理結(jié)合的確比較少；項目基于HTML5技術(shù)，對高校社團(tuán)管理流程及網(wǎng)站進(jìn)行設(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的擴(kuò)展，完整支持HTML，CSS，Javascript，SQL，同時支持快速添加技術(shù)功能到Web項目中，使用可視化編輯器以便編碼和配置，并且還可以在多種應(yīng)用服務(wù)器上測試任務(wù)[4]。

Eclipse 是一個開放源代碼的、基于Java的可擴(kuò)展開發(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） 社團(tuán)活動消息要求精簡集聚，將校內(nèi)所有社團(tuán)發(fā)布的活動信息分類顯示，用戶只需要選擇需要查看的活動分類即可；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

指導(dǎo)老師用戶登錄成功后進(jìn)入到其管理主頁，選擇交流互動功能進(jìn)入信息交流區(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)頁進(jìn)行打包，借助瀏覽器核心組件Web View對遠(yuǎn)程Web服務(wù)器的網(wǎng)頁進(jìn)行加載，其中在APP外殼下還得設(shè)置網(wǎng)絡(luò)權(quán)限和在不毀滅當(dāng)前窗口下橫豎屏切換的效果，實現(xiàn)APP本地與遠(yuǎn)程JS交互、APP頁面內(nèi)容加載可回溯以及APP加載的頁面自適應(yīng)屏幕和縮放，APP實現(xiàn)效果如圖6所示。

4 結(jié)束語

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

參考文獻(xiàn)：

[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.