基于HTML5的移動校園資訊平臺的應用研究

房洪瑞+姜振鳳+韓春潤+張勝龍+李桂玲

摘要：移動終端技術以及智能手機應用的飛速發展給各行各業的工作提供了便利。圍繞高校師生生活和學習服務需求，本文研究的基于HTML5的移動網站架構系統具有良好的跨平臺性，能適用于當前主流的各種手機操作系統。項目應用于棗莊學院校園內，為師生學習生活提供了一個集個性化新聞資訊、信息推送、應用無縫集成的移動校園資訊服務平臺。

關鍵詞：HTML5、移動互聯、校園資訊

中圖分類號：TP393 文獻標識碼：A 文章編號：1672-3791（2017）01（a）-0000-00

引言

高校信息化建設的蓬勃發展推動了高校數字化校園平臺的建設和應用?；趥鹘y計算機應用架構的高校信息平臺在一定程度上方便了師生，但也存在諸多顯而易見的問題：如通過單一的Web訪問方式難以及時、便利地獲取各種資訊和服務[1]。隨著智能手機的普及以及3G/4G無線網絡的覆蓋，智能手機已成為人們獲取資訊、學習閱讀、交友娛樂的重要工具。特別是作為容易接受新事物、引領信息消費的大學生群體，更多地希望能夠通過移動終端隨時、隨地獲取信息。因此，基于移動互聯的校園資訊服務平臺的研究成為當前校園信息化探討的一個熱點。

1系統需求分析

校園本質上是一種生活環境，且每個校園文化都是獨具一格的，從移動互聯技術的角度來研究建設“定制化”的校園服務平臺是非常有意義和必要的。本文研究主要面對棗莊學院內部師生，基于高?，F有的寬帶無線網絡及云服務平臺等硬件基礎，致力于為師生的學習、生活、社交等方面提供專業的校園資訊服務。

由于智能手機帶寬較窄、顯示屏幕較小以及系統開發代碼不同等特點，使得相關移動資源存在形式單一、可移植性差等問題[2]。因此在技術層面上，為了實現智能手機用戶能在移動終端快速、安全的使用軟件應用，本文將HTML5+CSS3+JavaScript技術作為系統實施的解決方案。通過使用HTML5新特性，包括新的結構化元素、智能表單控件和API應用程序接口等，實現用戶不需要第三方插件在各種移動終端平臺上對資訊隨時、隨地訪問，并力爭通過感知、挖掘用戶的愛好和興趣為其提供個性化資訊服務。針對以上需求，系統包括下功能。

（1） 校園資訊要聞。發布學校發生的最新要聞和重要通知。

（2） 社團活動。校級、院級社團工作及相關活動安排。

（3） 生活服務。為學生提供學校周邊餐飲、購物及校內二手商品信息發布平臺[1]。

（4） 學習交流。四六級、考研、專業資格認證考試學習經驗交流平臺。

（5） 勤工儉學。校內外兼職、求職信息發布平臺。

（6） 創新創業平臺。為學生提供一個進行產品宣傳、推廣服務的小型創業平臺。

（7） 信息查詢。提供與互聯網上學校選課管理、圖書館借書管理、宿舍管理等系統的對接功能。

2系統體系結構設計

系統在體系結構上分為三層：前端表示層使用戶在移動設備上通過瀏覽器來訪問應用系統；邏輯處理層包含各種業務邏輯規則，主要指服務上的功能模塊處理用戶發送來的各種服務請求。數據層主要給系統提供用于顯示系統主界面的各類數據支持。系統體系結構如圖1所示。

3數據庫設計

數據庫采用MySQL，涉及到11張表：管理員信息表，注冊用戶信息表，新聞信息表、新聞類別表，通知信息表，評論信息表，文章信息表，商品信息表，社團信息表，社團活動報名表、招聘信息表。通過服務器端PHP代碼獲取數據庫中的數據，并以API接口形式將轉換后的JSON格式數據返回給調用的HTML前端，頁面接收傳回的JSON數據，按格式進行組織并顯示在頁面中。

4系統實現

4.1 表示層功能模塊實現

前臺頁面采用HTML5標準，在程序建設中整體使用jQuery Mobile開發工具。jQuery Mobile框架基于jQuery、HTML5和CSS3，包括構建完整移動APP和網站所需的所有UI組件，能夠提供一個交互性強的接口來兼容不同的移動平臺[3]。使用jQuery Mobile，頁面必須聲明DOC?TYPE為HTML5，并在網頁頁眉中引入jQuery Mobile CSS、jQuery Mobile庫、jQuery庫。因在不同尺寸的移動終端設備訪問，在head里需加入一個viewport，使頁面的寬度與設備的寬度保持一致。在交互頁面的設計上通過JSP和jQuery Mobile實現接收用戶輸入的數據并經系統后臺程序處理將結果數據輸出。此外，采用HTML5和CSS3特效，加上其他的優化措施，可以減小頁面渲染的運算量[4]，提升整個平臺的運行效率。

4.2 后臺管理功能實現

后臺服務端技術主要采用PHP與MySQL搭配使用，由于PHP和Java Script都對JSON具有良好的支持，因此服務器端與客戶端之間接口采用JSON作為數據交換格式[5]，PHP可以通過使用json_encode（）函數直接編碼PHP對象而獲得json數據，從而免去使用XML繁瑣的轉換和解析過程。開發平臺使用一款開源的CMS系統PHPCMS，PHPCMS基于PHP+MySql數據庫，采用 MVC三層架構和OOP面向對象理念，與數據庫的交互采用 Hibernate 框架。

在PHPCMS中使用cURL工具來傳輸文件和數據，通過初始化curl_init（），設置curl_setopt（）變量指定URL請求的各個細節，執行并獲取結果curl_exec（），釋放cURL句柄curl_close（）等基本步驟建立cURL請求。此外，資訊平臺中部分“信息在線實時采集”功能主要通過HTML5的Websocket函數，建立一個與服務器直接進行通訊的Socket，從而使瀏覽器端能夠與網頁服務器實現雙向通訊，有效減輕數據包負擔。

5結語

針對棗莊學院校園文化特點，本文研究的移動校園資訊平臺有效地將設備環境、時空環境、人文信息環境融合在一起，為教師、學生提供了一個通過智能手機、平板電腦等移動終端設備接收、查詢到所需的各類校園資訊信息，提高師生的工作學習效率。

參考文獻

[1]茅志剛.基于移動互聯網的智慧校園服務平臺[D].杭州：杭州電子科技大學，2013.

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

[3] 陳楠楠.基于HTML5的移動學習資源設計及應用研究[D].西安：西安電子科技大學，2013

[4] 董志宇.基于HTML5的移動應用自動生成系統[D].長春：吉林大學，2015