基于HTML5技術(shù)的高校社團(tuán)管理軟件及網(wǎng)站的實(shí)現(xiàn)

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

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

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

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

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

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

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

1.1 HTML5

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

1.2 Myeclipse及Eclipse

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

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

1.3 MySQL

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

1.4 Tomcat

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

編輯模塊包括用戶(hù)對(duì)自己主頁(yè)上簡(jiǎn)介等信息的編輯以及社團(tuán)干事對(duì)社團(tuán)活動(dòng)信息的編輯與提交、發(fā)布；

顯示模塊即信息的顯示，主要是分類(lèi)顯示活動(dòng)信息以及對(duì)活動(dòng)的評(píng)論、收藏、點(diǎn)贊；

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

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

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

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

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

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

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

3.2移動(dòng)終端

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

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

4 結(jié)束語(yǔ)

基于HTML5技術(shù)的高校社團(tuán)管理軟件及網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)，將傳統(tǒng)網(wǎng)頁(yè)與手機(jī)APP的制作相配合，實(shí)現(xiàn)了跨平臺(tái)開(kāi)發(fā)，精簡(jiǎn)的活動(dòng)信息以及學(xué)校、社團(tuán)和學(xué)生之間權(quán)限分級(jí)的清晰化管理，提高了社團(tuán)活動(dòng)的易選性并清晰知道活動(dòng)來(lái)源等信息，同時(shí)簡(jiǎn)化社團(tuán)管理工作，使其清晰明了易實(shí)現(xiàn)；功能測(cè)試表明，系統(tǒng)的使用效果良好，基本實(shí)現(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ù)在移動(dòng)互聯(lián)網(wǎng)中的應(yīng)用研究[J].中國(guó)新通信，2017（23）.

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

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

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

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

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

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