基于HTML5的移動校園服務平臺研究與實現

卞晨晨 王鷹漢

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

關鍵詞：HTML5；移動校園服務平臺；WeX5； JSON

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

1 系統需求分析

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

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

2 系統體系結構設計

本平臺的體系結構分為3層，分別為界面表示層、業務邏輯處理層以及數據訪問層。用戶可通過打開瀏覽器輸入網址進入界面表示層訪問移動校園服務平臺，通過業務邏輯處理層處理用戶發送的各種服務請求，通過數據訪問層提供平臺業務邏輯處理以及顯示到界面表示層的各種數據支持[2]。系統體系結構如圖1所示。

3 數據庫設計

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

4 系統設計與實現

4.1 前端設計與實現

前端頁面使用HTML5進行頁面結構化設計，通過CSS3對HTML元素進行格式化表現，再通過JS進行交互行為的編寫。本系統包括八大功能模塊：學院信息模塊、實時導航模塊、移動教務模塊、云端學習模塊、互動社區模塊、校園卡服務模塊、數字圖書館模塊、校園導航模塊[4]，其中每個模塊都包括多個功能小模塊，比如移動教務模塊包括課表查詢、成績查詢及學期行事歷查詢子模塊等，客戶端模塊結構如圖2所示。

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

4.2 后端的設計與實現

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

5 結語

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

[參考文獻]

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

[2]郭玉江.基于HTML5的跨平臺移動內容管理系統的設計與實現[D].杭州：杭州電子科技大學，2015.

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

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

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