卞晨晨 王鷹漢

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

關(guān)鍵詞：HTML5；移動(dòng)校園服務(wù)平臺(tái)；WeX5； JSON

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 結(jié)語(yǔ)

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

[參考文獻(xiàn)]

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

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

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

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

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