基于HTML5的移動校園資訊平臺的應(yīng)用研究

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

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

關(guān)鍵詞：HTML5、移動互聯(lián)、校園資訊

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1672-3791（2017）01（a）-0000-00

引言

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

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

校園本質(zhì)上是一種生活環(huán)境，且每個校園文化都是獨(dú)具一格的，從移動互聯(lián)技術(shù)的角度來研究建設(shè)“定制化”的校園服務(wù)平臺是非常有意義和必要的。本文研究主要面對棗莊學(xué)院內(nèi)部師生，基于高校現(xiàn)有的寬帶無線網(wǎng)絡(luò)及云服務(wù)平臺等硬件基礎(chǔ)，致力于為師生的學(xué)習(xí)、生活、社交等方面提供專業(yè)的校園資訊服務(wù)。

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

（1） 校園資訊要聞。發(fā)布學(xué)校發(fā)生的最新要聞和重要通知。

（2） 社團(tuán)活動。校級、院級社團(tuán)工作及相關(guān)活動安排。

（3） 生活服務(wù)。為學(xué)生提供學(xué)校周邊餐飲、購物及校內(nèi)二手商品信息發(fā)布平臺[1]。

（4） 學(xué)習(xí)交流。四六級、考研、專業(yè)資格認(rèn)證考試學(xué)習(xí)經(jīng)驗交流平臺。

（5） 勤工儉學(xué)。校內(nèi)外兼職、求職信息發(fā)布平臺。

（6） 創(chuàng)新創(chuàng)業(yè)平臺。為學(xué)生提供一個進(jìn)行產(chǎn)品宣傳、推廣服務(wù)的小型創(chuàng)業(yè)平臺。

（7） 信息查詢。提供與互聯(lián)網(wǎng)上學(xué)校選課管理、圖書館借書管理、宿舍管理等系統(tǒng)的對接功能。

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

系統(tǒng)在體系結(jié)構(gòu)上分為三層：前端表示層使用戶在移動設(shè)備上通過瀏覽器來訪問應(yīng)用系統(tǒng)；邏輯處理層包含各種業(yè)務(wù)邏輯規(guī)則，主要指服務(wù)上的功能模塊處理用戶發(fā)送來的各種服務(wù)請求。數(shù)據(jù)層主要給系統(tǒng)提供用于顯示系統(tǒng)主界面的各類數(shù)據(jù)支持。系統(tǒng)體系結(jié)構(gòu)如圖1所示。

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

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

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

4.1 表示層功能模塊實(shí)現(xiàn)

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

4.2 后臺管理功能實(shí)現(xiàn)

后臺服務(wù)端技術(shù)主要采用PHP與MySQL搭配使用，由于PHP和Java Script都對JSON具有良好的支持，因此服務(wù)器端與客戶端之間接口采用JSON作為數(shù)據(jù)交換格式[5]，PHP可以通過使用json_encode（）函數(shù)直接編碼PHP對象而獲得json數(shù)據(jù)，從而免去使用XML繁瑣的轉(zhuǎn)換和解析過程。開發(fā)平臺使用一款開源的CMS系統(tǒng)PHPCMS，PHPCMS基于PHP+MySql數(shù)據(jù)庫，采用 MVC三層架構(gòu)和OOP面向?qū)ο罄砟睿c數(shù)據(jù)庫的交互采用 Hibernate 框架。

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

5結(jié)語

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

參考文獻(xiàn)

[1]茅志剛.基于移動互聯(lián)網(wǎng)的智慧校園服務(wù)平臺[D].杭州：杭州電子科技大學(xué)，2013.

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

[3] 陳楠楠.基于HTML5的移動學(xué)習(xí)資源設(shè)計及應(yīng)用研究[D].西安：西安電子科技大學(xué)，2013

[4] 董志宇.基于HTML5的移動應(yīng)用自動生成系統(tǒng)[D].長春：吉林大學(xué)，2015