房洪瑞+姜振鳳+韓春潤(rùn)+張勝龍+李桂玲

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

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

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

引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5結(jié)語(yǔ)

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

參考文獻(xiàn)

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

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

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

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