梁 弼,張紫桂,熊 倫
(1.四川文理學院 智能制造學院,四川 達州 635000; 2.紹興文理學院 土木工程學院,浙江 紹興 312000)
近來,隨著智能手機、平板電腦、無線通信、物聯網以及移動互聯網等技術的快速發展,移動設備的使用量已趕超PC設備,并成為用戶訪問Web頁面的常用終端。傳統的只能支持PC端的旅游服務系統已滿足不了現代游客的需求,如何在不同大小的設備、不同類型的瀏覽器上呈現相同的景點效果,已成為當前旅游服務系統研究的熱點問題之一。據查閱,目前大部分研發人員采用的方法是為不同設備提供對應的網頁,譬如專門提供一個PC版,一個Mobile版或者iPhone/iPad版[1]。這樣固然保證了旅游服務系統前端頁面一致性效果,但后期維護和擴展比較麻煩。為了有效解決該問題,該文采用“一次設計,普遍適用”的自適應旅游景點頁面設計思想,即讓同一張旅游景點網頁能自動適應不同尺寸的屏幕和不同類型的瀏覽器。
并且,隨著人們生活品質的提升,旅游愛好者對旅游系統所提供的服務要求越來越高,他們不但希望通過多種不同終端設備提前欣賞到想去旅游的景點,而且希望系統能提供吃、住、行、游、購、娛等項目于一體的線上線下服務,但目前市場上暫未提供一體化服務的旅游系統[2]。因此,為了滿足現代游客的需求,進一步提高旅游系統服務的質量,研發一套融合PC端和移動端于一體的旅游景點多功能服務平臺是必要的。為了實現該目標,該文采用多層架構模式,并恰當結合目前主流的Bootstrap、Spring MVC、Spring、MyBatis(即BSSM)等技術,設計和實現了一套自適應的旅游景點一體化服務平臺。其中,前端頁面主要使用Bootstrap(即B)技術來設計,使其能自適應目前移動設備和PC上常用的瀏覽器;后臺功能則使用Spring MVC、Spring、MyBatis技術(即SSM)來實現,使其具有良好的可擴展性和可維護性。
Bootstrap是目前備受前端開發人員歡迎的Html、CSS和JS框架,用于開發響應式布局、移動設備優先的Web系統頁面,其目標是使頁面能在主流的PC和移動瀏覽器上有最佳表現。Bootstrap完全開源,其源碼是基于CSS預處理腳本——Less和Sass開發的,研發人員可以采用預編譯的CSS文件快速設計,也可以從源碼定制自己需要的樣式。它最重要的特點是提供一個非常先進且方便的網格布局系統(柵格系統),即把Html頁面總寬度平分為12份,每一份按照不同設備的不同分辨率進行百分比劃分,研發人員可以自由按份組合設計出自己想要的布局,只需通過定義容器大小、平分12份,再調整內外邊距,最后結合Media Query就能制作出強大的響應式柵格系統[3]。該文充分利用Bootstrap美觀的界面和良好的自適應能力來開發旅游景點一體化服務平臺的前端,同時結合CSS的Media Query使其能通過同一份代碼來快速、有效地適配手機、平板和PC設備。
SSM技術由Spring、Spring MVC和MyBatis三種框架技術組成,是目前Web系統后臺主流開發框架[4]。其中,Spring是一個分層的JavaEE一站式輕量級開源框架,其目的是為了解決企業級Web系統開發復雜性問題而創建。控制反轉(IoC)是Spring的核心技術,它實現Spring重要的“解耦”思想,并通過依賴注入(DI)使得類與類之間不再由硬性編碼方式發生關聯,而是通過XML配置來實現這一過程。Spring MVC是一個基于DispatcherServlet的MVC框架,它主要由DispatchServlet、HandlerMapping、Controller、ModelAndView和ViewResolver等組件組成。Spring MVC屬于請求驅動的Web框架,負責接收和轉發用戶提交的Http請求。MyBatis是一款優秀的持久層框架,它能夠實現高級映射、存儲過程以及定制化SQL,可以使用簡單的XML或注解來配置和映射原生信息,將接口和Java的POJOs映射成數據庫中的記錄。該文恰當使用SSM組合框架優點來研發旅游景點一體化服務系統的后臺,有效縮減了系統開發時間,并增強了系統性能。
該自適應的旅游景點一體化服務平臺構建主要包括架構設計、前端設計和后臺設計。其中,架構設計是從系統性能角度來進行考慮的,系統采用分層架構思想來進行設計,使其具有良好的可擴展性;前端面向普通用戶設計,既支持PC端又支持移動端,能恰當滿足當代游客吃、住、行、游、購、娛等的線上線下服務需求;后臺面向管理人員設計,實現對旅游景點相關信息的管理操作以及為游客推薦感興趣的景點和最優的旅游路線等,其最終目標是提高景點管理員的工作效率和服務質量。
為了有效提高旅游景點一體化服務平臺的可擴展性、可維護性等性能,該文有機結合經典MVC(模型-視圖-控制)思想及傳統三層架構(界面層、業務邏輯層、數據訪問層)設計模式,提出了該服務平臺的多層架構設計體系,即表示層、控制層、業務層、持久層和數據層,各層間的相互關系如圖1所示[5-7]。
其中,表示層是用戶與該旅游景點服務平臺直接交互的頁面Page,它負責接收/響應用戶請求,并實現對數據的動態顯示,主要通過Bootstrap、Html5、Ajax等前端技術來實現這些頁面[8];控制層位于表示層和業務層之間,負責將來自表示層的用戶請求準確地轉發到業務層中對應的Bean進行處理,并將業務層處理后的結果返回給表示層,這主要使用Spring MVC技術編寫相應的Controller來完成[9];業務層實現該旅游景點服務平臺具體的業務邏輯功能,如景點推薦、路線優化、門票預訂、擁擠提示等,該任務主要使用Spring相關技術編寫具體業務Bean來完成[10];而持久層則完成數據的O-R映射功能,負責對后臺旅游景點數據的訪問操作,該平臺主要通過MyBatis技術來完成這些任務[11];最后的數據層負責管理該平臺的相關數據,并通過MySQL數據庫工具來執行。這樣,該旅游景點服務平臺的各層任務便分別通過相應的技術來完成,并彼此相互協作一同實現整個服務平臺的所有功能。

圖1 服務平臺的架構設計
根據實際調研,該文設計了合理的前端服務功能來恰當滿足當代游客的需求。前端除了向用戶提供必要的登錄注冊、個人中心服務外,還為用戶提供吃、住、行、游、購、娛等項目于一體的線上線下服務,如熱門景點展示、景點詳情介紹、景點3D效果展示、景點虛擬游、景點查詢、門票預訂、費用支付、景點推薦、旅游路線推薦、周邊美食推薦、周邊賓館推薦、附近娛樂推薦、導航服務、擁擠提示等,有效解決了目前旅游服務系統中景點展示單調、智能推薦服務少等問題,為游客出游帶來便利,并提高系統服務質量[12]。該平臺前端功能總體設計如圖2所示。

圖2 服務平臺的前端功能設計
在圖2中,美景圖片欣賞模塊通過多方式、多角度向用戶展示不同效果的旅游景點圖片;景點3D效果展示模塊向用戶展示旅游景點的三維特效;景點虛擬游模塊實現用戶網上虛擬漫游旅游景點,增強用戶體驗;景點推薦模塊可以根據用戶個性化特征向用戶智能推薦可能感興趣的旅游景點,減少用戶尋找感興趣景點的時間;路線推薦模塊可以根據用戶選擇的旅游景點,為他們智能推薦最優的旅游線路,進而為游客節約旅游的時間和費用;娛樂推薦模塊為游客智能推薦景點附近的特色文化娛樂,讓游客進一步了解本地特色文化娛樂活動;擁擠提示模塊實現實時為游客提示某些景點的擁擠程度,讓游客避免旅游景點的高峰期。
根據系統前端和系統性能要求,該自適應旅游景點一體化服務平臺的后臺功能除了常見的用戶信息管理外,還包括用戶個人中心信息管理、旅游景點信息管理、相關智能推薦信息管理以及其他服務信息管理等,其總體設計如圖3所示。
在圖3中,用戶信息管理模塊主要完成對用戶注冊信息和登錄信息的管理,保證用戶注冊信息的合法性,并確保注冊了用戶能方便、快速地登錄系統;個人中心管理模塊實現對用戶個人所完成的內容進行管理,譬如對用戶發布的游記進行審核,合法才能發布,不合法則刪除等;景點信息管理模塊是該平臺后臺管理的核心內容,實現對所有景點有關文字介紹、美景圖片、景點視頻、景點3D、虛擬場景等信息的增加、修改、刪除及查詢等操作;推薦信息管理模塊則通過使用相關的推薦算法實現面向游客個人或旅游團的智能路線推薦、智能美食推薦以及智能娛樂推薦等的管理,其關鍵在于智能推薦算法設計和路線優化算法設計;其他服務管理模塊主要包括導航服務和擁擠提示等相關信息的管理。

圖3 服務平臺的后臺功能設計
分層架構設計的優點是允許開發人員根據各層特征選擇合適的組件及技術來開發系統。該文主要采用BSSM等技術來實現旅游景點服務平臺各層功能。由于恰當的整合能有效實現系統高內聚、低耦合的目標,因此對BSSM整合研究是必要的。通過多次實踐,得出BSSM整合的思路為:首先引入相關的jar包,然后通過配置spring-mybatis.xml來實現Spring與MyBatis的整合,其主要涉及到自動掃描、自動注入、數據源以及事務管理等配置;接著通過配置spring-mvc完成Spring與SpringMVC的整合,其主要涉及到配置自動掃描控制器、視圖模式、啟動注解等;最后通過配置web.xml將SSM后臺技術與Bootstrap實現的頁面整合在一起。以下為web.xml關鍵配置內容[13]:
引入spring-mybatis.xml配置文件:
…
配置Spring監聽器:
…
配置Spring MVC Servlet:
…
引入spring-mvc.xml配置文件:
…
配置攔截的用戶請求模式:
…
引入相關頁面:
…
該旅游景點服務平臺前端主要使用Bootstrap、Html5、JS等技術來實現,即實現平臺的表示層功能。充分應用Bootstrap響應式設計能力,有效解決了該平臺網頁跨平臺跨瀏覽器的兼容性、自適應性等問題,使其能自動適應不同大小的終端屏幕,根據屏幕長、寬自動調整布局,從而實現“一次設計,普遍適用”的自適應目標。譬如采用Bootstrap集成好的導航條樣式來實現該旅游景點服務平臺導航條的自適應,該導航條能在PC端顯示出完整的導航,但在較小的移動端則會自動收縮起來,只有當用戶點擊時才會自動展開,這樣便能很好地兼容客戶端不同大小的屏幕設備及不同類型的瀏覽器。其核心代碼如下[14]: