基于HTML5的移動校園服務(wù)平臺研究與實現(xiàn)

卞晨晨 王鷹漢

摘要：文章針對上饒職業(yè)技術(shù)學(xué)院校情及校園文化特點，設(shè)計并實現(xiàn)了基于HTML5的移動校園服務(wù)平臺。它主要是為該院師生提供工作和學(xué)習(xí)上的服務(wù)，為實現(xiàn)數(shù)字化校園建設(shè)提供有力保障。相比原生APP，基于HTML5開發(fā)的系統(tǒng)具有良好的跨平臺性、開發(fā)成本低、維護(hù)方便等特點，且極大地提高了用戶體檢。

關(guān)鍵詞：HTML5；移動校園服務(wù)平臺；WeX5； JSON

根據(jù)教育部關(guān)于《教育信息化十年發(fā)展規(guī)劃（2011—2020年）》的要求，各高校都在積極地以協(xié)同方法對現(xiàn)有的校園網(wǎng)絡(luò)資源進(jìn)行整合與規(guī)劃，利用最新的互聯(lián)網(wǎng)技術(shù)和科技成果建設(shè)與完善信息化校園。目前，智能移動設(shè)備因其相對廉價的硬件成本和使用的便捷性在校園得到廣泛的應(yīng)用，為了方便廣大師生工作與學(xué)習(xí)，開發(fā)一款適合上饒職業(yè)技術(shù)學(xué)院校情的移動服務(wù)平臺勢在必行。本文以開發(fā)一款基于HTML5的Web APP系統(tǒng)為基礎(chǔ)，從系統(tǒng)的需求分析、系統(tǒng)體系結(jié)構(gòu)設(shè)計、數(shù)據(jù)庫設(shè)計、系統(tǒng)設(shè)計與實現(xiàn)等方面進(jìn)行詳細(xì)闡述。

1 系統(tǒng)需求分析

校園從本質(zhì)上講是融學(xué)習(xí)與生活等于一體的場所，且每所學(xué)校因其校情、學(xué)情等不一樣而具有獨特性。在互聯(lián)網(wǎng)時代，開發(fā)一款符合上饒職業(yè)技術(shù)學(xué)院師生需求的“定制化”移動服務(wù)平臺，將對數(shù)字化校園建設(shè)非常有幫助。該平臺服務(wù)的對象是上饒職業(yè)技術(shù)學(xué)院校內(nèi)師生，利用學(xué)院現(xiàn)有的網(wǎng)絡(luò)環(huán)境和云服務(wù)平臺等硬件設(shè)施，致力于為師生的生活、學(xué)習(xí)、社交、娛樂等方面提供專業(yè)的服務(wù)。

隨著時代的發(fā)展，智能手機的配置也在逐步提高，但相比個人計算機而言，其帶寬、顯示屏幕還是存在一定的局限性。為了能讓用戶不需要下載移動端安裝的APP（Application），而能享受到同樣優(yōu)質(zhì)的上網(wǎng)服務(wù)體驗，獲取相同的生活、工作、學(xué)習(xí)資源等，只需打開網(wǎng)址進(jìn)行鏈接，就能在移動端快速、安全地享受到軟件的服務(wù)。本系將利用開源免費的開發(fā)工具WeX5，使用HTML5+CSS3+JavaScript進(jìn)行Web前端設(shè)計，使用超文本預(yù)處理器（Hypertext Preprocessor，PHP）進(jìn)行后端程序設(shè)計，利用MySQL進(jìn)行數(shù)據(jù)庫存儲。通過使用HTML5新的元素進(jìn)行頁面設(shè)計，實現(xiàn)用戶在移動端訪問時不需要下載第三方組件，就能隨時隨地享受到相同的校園文化服務(wù)需求[1]。

2 系統(tǒng)體系結(jié)構(gòu)設(shè)計

本平臺的體系結(jié)構(gòu)分為3層，分別為界面表示層、業(yè)務(wù)邏輯處理層以及數(shù)據(jù)訪問層。用戶可通過打開瀏覽器輸入網(wǎng)址進(jìn)入界面表示層訪問移動校園服務(wù)平臺，通過業(yè)務(wù)邏輯處理層處理用戶發(fā)送的各種服務(wù)請求，通過數(shù)據(jù)訪問層提供平臺業(yè)務(wù)邏輯處理以及顯示到界面表示層的各種數(shù)據(jù)支持[2]。系統(tǒng)體系結(jié)構(gòu)如圖1所示。

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

本平臺采用MySQL作為數(shù)據(jù)后臺信息存儲，總共包括7個表：分別是新聞信息表（YD_Article）、新聞類別表（YD_ArticleType）、用戶信息表（YD_Users）、互動討論信息表（YD_Ask）、移動學(xué)習(xí)信息表（YD_Study）、數(shù)字圖書信息表（YD_Library）、校園卡信息表（YD_Card）。利用服務(wù)器腳本語言PHP對數(shù)據(jù)進(jìn)行操作后，轉(zhuǎn)&成JS對象標(biāo)記（JavaScript Object Notation，JSON）格式的數(shù)據(jù)后再通過應(yīng)用程序編程接口（Application Programming Interface，API）接口發(fā)送到前端頁面，前端頁面接收到JSON格式的數(shù)據(jù)后再通過HTML5與CSS3有組織、有結(jié)構(gòu)地展現(xiàn)在前端頁面[3]。

4 系統(tǒng)設(shè)計與實現(xiàn)

4.1 前端設(shè)計與實現(xiàn)

前端頁面使用HTML5進(jìn)行頁面結(jié)構(gòu)化設(shè)計，通過CSS3對HTML元素進(jìn)行格式化表現(xiàn)，再通過JS進(jìn)行交互行為的編寫。本系統(tǒng)包括八大功能模塊：學(xué)院信息模塊、實時導(dǎo)航模塊、移動教務(wù)模塊、云端學(xué)習(xí)模塊、互動社區(qū)模塊、校園卡服務(wù)模塊、數(shù)字圖書館模塊、校園導(dǎo)航模塊[4]，其中每個模塊都包括多個功能小模塊，比如移動教務(wù)模塊包括課表查詢、成績查詢及學(xué)期行事歷查詢子模塊等，客戶端模塊結(jié)構(gòu)如圖2所示。

在移動端網(wǎng)絡(luò)連接正常的情況下，當(dāng)用戶打開移動校園服務(wù)平臺時，就進(jìn)入了移動平臺主頁面。當(dāng)用戶查看學(xué)院信息、實時導(dǎo)航和校園導(dǎo)航3個模塊時，是允許用戶處在游客狀態(tài)。而當(dāng)用戶想進(jìn)入其他模塊時需要權(quán)限才能訪問，在沒有登錄的情況下點擊其他模塊系統(tǒng)會自動跳轉(zhuǎn)到登錄界面供用戶登錄，登錄時只能憑教工號或?qū)W生號才能登錄，教工號或?qū)W生號管理員會通過后臺進(jìn)行導(dǎo)入到系統(tǒng)中，其沒有注冊功能。系統(tǒng)的其他應(yīng)用模塊在主界面中沒有顯示出來，如果用戶想繼續(xù)添加模塊，可以點擊主界面中的“+”號繼續(xù)添加。底部欄中的首頁和應(yīng)用按鈕可相互切換，平臺運行時客戶端主界面顯示效果如圖3所示。

4.2 后端的設(shè)計與實現(xiàn)

后端服務(wù)為前端頁面提供數(shù)據(jù)，后端對數(shù)據(jù)進(jìn)行處理操作后將結(jié)果返回到前端頁面，系統(tǒng)服務(wù)可通過PHP調(diào)用后端服務(wù)即可實現(xiàn)。本系統(tǒng)后臺采用PHP與MySQL結(jié)合進(jìn)行開發(fā)，由于PHP和JavaScript都對JSON具有良好的支持作用，所以采用JSON數(shù)據(jù)交換格式作為客戶端與服務(wù)器端的API接口。在PHP中使用內(nèi)置函數(shù)json-encode。將數(shù)值轉(zhuǎn)換成JSON數(shù)據(jù)存儲格式，從而避免了利用XML解析和轉(zhuǎn)換的諸多缺點[5]。

5 結(jié)語

針對上饒職業(yè)技術(shù)學(xué)院校園文化特點設(shè)計的移動校園服務(wù)平臺，為師生提供了一個無需下載并安裝的不同版本手機應(yīng)用程序，就可接收、查詢到所需的各類校園信息，為數(shù)字化校園建設(shè)奠定了基礎(chǔ)，大大提高了師生工作和學(xué)習(xí)效率。

[參考文獻(xiàn)]

[1]陸晨，馮向陽，蘇厚勤.HTML5WebSocket握手協(xié)議的研究與實現(xiàn)[J].計算機應(yīng)用與軟件，2015（1）：128-131.

[2]郭玉江.基于HTML5的跨平臺移動內(nèi)容管理系統(tǒng)的設(shè)計與實現(xiàn)[D].杭州：杭州電子科技大學(xué)，2015.

[3]羅輝瓊，梁卓明，何明發(fā).基于移動服務(wù)開放平臺構(gòu)建高校智慧校園生態(tài)[J].中國教育信息化，2014（13）：52-54.

[4]袁南星.基于HTML5+JavaScript的移動用戶環(huán)境自適應(yīng)[J].電腦與電信，2015（12）：44-46.

[5]王鷹漢，卞晨晨.基于云計算的移動校園服務(wù)平臺研究與實現(xiàn)[J].福建電腦，2017（6）：14-15.