朱君 趙梓同

（渤海大學(xué) 遼寧省錦州市 121000）

近年來，受疫情的影響，人們無法像以往般大規(guī)模的實(shí)地旅游，致使線下旅游業(yè)大受打擊并尚未完全恢復(fù)。在此背景下，線下旅游業(yè)與“線上結(jié)合”的大趨勢逐步成為主流，“線上旅游”必然成為人們在旅游時的首要選擇。與傳統(tǒng)旅游相比，“線上旅游”代表著用戶可以通過旅游資源可視化的方式隨時隨刻的觀覽景區(qū)，同時用戶能在任意時間點(diǎn)去選擇“旅游”，不拘泥于時間與空間的限制，可以將旅游作為一項(xiàng)休息時的閑暇活動。與此同時，“線上旅游”可以在旅游的前、中、后三階段提供不同服務(wù),不僅僅提供更便捷旅游信息資源展示，做到實(shí)時全景預(yù)覽景區(qū)，還在一定意義上打破空間與時間的限制，提升景區(qū)及周邊商家的知名度，方便管理者對景區(qū)的監(jiān)控與管理。本平臺充分應(yīng)用Node.js 獨(dú)有的技術(shù)，用JavaScript 最終在網(wǎng)頁端展現(xiàn)可視化界面。

1 總體分析

1.1 市場行情

隨著信息時代的到來，人們逐漸將智能手機(jī)與移動網(wǎng)絡(luò)當(dāng)作日常生活的一部分，兩者在人們生活中占比與日俱增，無論是在大街上，還是地鐵里，都可以看到人們拿著智能手機(jī)刷微博、發(fā)微信、看新聞、拍照片、打游戲。而旅游代表著發(fā)現(xiàn)新穎事物，并記載和分享不同于平常的生活，這也意味著為旅游業(yè)帶來極大的市場需求。據(jù)不完全統(tǒng)計(jì)，在目前被使用的所有生活類平臺中，下載率最高的是實(shí)用工具類，例如天氣、日歷等，下載率高達(dá)96%。其次是娛樂類，比如音樂播放軟件、視頻瀏覽軟件等，下載率高達(dá)94%。排名最低的是旅游類，下載率僅為40%。盡管當(dāng)下研發(fā)出的旅游平臺并沒有那么完善，但也已經(jīng)積累起了數(shù)量龐大的一批用戶，其市場規(guī)模可見一斑。

生活類APP 使用情況如圖1 所示。

圖1

1.2 總體結(jié)構(gòu)

本旅游資源可視化構(gòu)建平臺總體采用的是瀏覽器和服務(wù)器的結(jié)構(gòu)（簡稱B/S 結(jié)構(gòu)）。B/S 結(jié)構(gòu)，更多是依賴于客戶端服務(wù)器，將系統(tǒng)的開發(fā)、運(yùn)營、維護(hù)等工作都在Web 瀏覽器上進(jìn)行，用戶使用時也不需要強(qiáng)大的軟件和環(huán)境支持，只需要瀏覽器即可。這使得本平臺的開發(fā)和運(yùn)行在技術(shù)和環(huán)境上得到極大的解放。前端主要處理瀏覽器對數(shù)據(jù)進(jìn)行頁面可視化的問題，包括呈現(xiàn)旅游景區(qū)的相關(guān)數(shù)據(jù)如客流量、客源等問題，還包含游客旅游期間需要的信息如天氣、車流量、住宿分類等問題。而后端則是完成對前端運(yùn)行的支撐，包括用戶信息的存儲提取，和數(shù)據(jù)的實(shí)時更新等問題。

1.3 技術(shù)需求

針對線下旅游的一到假期就造成熱門景點(diǎn)人流量激增甚至于進(jìn)不去景區(qū)的現(xiàn)狀，國家疫情防控的要求，出市道路擁堵，出行不便等一系列問題，基于Node.js 開發(fā)出來的旅游資源可視化構(gòu)建平臺造就的“線上旅游”就可以極大程度地解決這一問題，不僅大幅度避免了人與人之間的接觸，還可以實(shí)時上傳數(shù)據(jù)，幫助出行者對比選擇最佳的出行方式和路線。Node.js 技術(shù)是基于JavaScript 這一環(huán)境，使用Chrome V8 引擎來解釋代碼，不僅具有輕量、可伸縮性強(qiáng)的特點(diǎn)，而且可以幫助所有使用者實(shí)時觀察和應(yīng)用數(shù)據(jù)。其中單進(jìn)程、單線程是Node.js 和其他環(huán)境運(yùn)行情況最大的區(qū)分。這使得它處理性能更好，處理速度更快，減少線程切換浪費(fèi)的資源。前端使用UI 構(gòu)建前端和Web 前端相結(jié)合的方式，不僅可以輕松構(gòu)建交互式界面，還可以展現(xiàn)炫酷的動態(tài)網(wǎng)頁設(shè)計(jì)，更能達(dá)到設(shè)計(jì)的預(yù)期效果。本平臺后端利用MySQL 數(shù)據(jù)庫存用戶數(shù)據(jù)。

旅游資源可視化構(gòu)建平臺的總體結(jié)構(gòu)的圖表形式如圖2所示。

圖2

2 前端開發(fā)

本平臺的前端界面主要是通過Web 頁面的形式實(shí)現(xiàn)。頁面進(jìn)行數(shù)據(jù)可視化時使用的是商業(yè)級數(shù)據(jù)圖表——ECharts（一個運(yùn)行在JavaScript 環(huán)境下的圖表庫），只需要在html中進(jìn)行嵌入。Echarts 支持柱形圖、折線圖、餅圖（環(huán)形圖）、散點(diǎn)圖、地圖等圖表類型，同時，它提供了七個交互式組件，如細(xì)節(jié)氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時間線和工具包，以支持多個圖表和組件的鏈接和混合匹配顯示。[1]ECharts 的功能囊括了本平臺所需要的所有功能，使得開發(fā)技術(shù)不會過分復(fù)雜。前端還使用UI 技術(shù)來繪制天氣等圖標(biāo)，使頁面呈現(xiàn)效果更生動貼切。

2.1 前端設(shè)計(jì)

前端所呈現(xiàn)的頁面邏輯為：前端頁面根據(jù)不同類別使用者（游客或管理者）做出的選擇，游客在前端頁面可實(shí)時預(yù)覽景區(qū)的可視化模型、查看前往景區(qū)的最優(yōu)路線等功能；管理者在前端頁面可進(jìn)行值班人員的排班變動，監(jiān)控景區(qū)實(shí)時客流量等功能。使用后端傳送展示出正確的實(shí)時數(shù)據(jù)。旅游資源可視化構(gòu)建平臺是為旅游者及全區(qū)管理者共同設(shè)計(jì)的，因此所有使用者（游客或管理者）可以查看頁面上所有的可供查看的圖表信息，如出行方式、住宿占比等。與此同時，管理者還能夠在前端查看數(shù)據(jù)的變更。

2.2 前端主頁面代碼實(shí)現(xiàn)

Web 前端主要目的通過UI 設(shè)計(jì)頁面來構(gòu)建網(wǎng)頁，需要用到的技術(shù)例如HTML5、CSS3、jQuery 和Ajax 等。在此過程中，由繁至簡、由大拆小，每個獨(dú)立的小組件均由大的UI 組件拆分而成且可重復(fù)使用，不但可以減少開發(fā)成本，更重要的是提高工作效率，而且使用組件只需在HTML 文件中引入組件的JS 文件即可，使得開發(fā)簡單高效。項(xiàng)目主要通過組件在后端設(shè)計(jì)的CSS 結(jié)構(gòu)，設(shè)計(jì)AJAX 向后端發(fā)起的HTTP 請求等操作，并在后端處理請求后，將結(jié)果反饋給前段中的數(shù)據(jù)，以達(dá)到實(shí)時視圖以及數(shù)據(jù)的更新。而像天氣，客流量，客源等需要實(shí)時交互的數(shù)據(jù)，為了保實(shí)時數(shù)據(jù)的實(shí)效性，需要持續(xù)地在規(guī)定時間內(nèi)向后端發(fā)起HTTP 請求，以便完成視圖組件實(shí)時更新。以下是對于住宿分布占比，各地旅游人次數(shù)，交通方式以及旅游收入統(tǒng)計(jì)四個組建的實(shí)現(xiàn)效果圖如圖3 所示。

圖3

2.3 登錄與注冊頁面代碼實(shí)現(xiàn)

本平臺為了使頁面不會過于復(fù)雜繁瑣，所以游客和景區(qū)管理者的登錄頁面使用的是同一頁面。管理者或游客輸入用戶名和密碼后，將兩個數(shù)值傳輸?shù)胶蠖?，通過對比，識別出用戶是游客還是管理者，對于用戶是游客還是管理者的區(qū)分，主要是在用戶注冊時就進(jìn)行區(qū)分，然后進(jìn)行分別存儲。而區(qū)分的方式就是通過郵箱的方式。對于景區(qū)管理者，注冊時要使用景區(qū)所屬公司的特有郵箱，這樣注冊的時候，后臺對比數(shù)據(jù)庫中已有景區(qū)的公共郵箱后，若注冊者使用的郵箱在已知數(shù)據(jù)之內(nèi)，則可以賦予用戶查看和修改權(quán)限，若是個人郵箱而并非景區(qū)工作人員所使用的郵箱，則只能賦予“只讀”權(quán)限。本平臺的登錄注冊頁面如圖4 所示。

圖4

3 后端開發(fā)

本平臺的后端的開發(fā)工具使用的是基于Node.js 環(huán)境下的簡潔而靈活的web 應(yīng)用開源框架Express，Express 框架最突出的特點(diǎn)便是可以達(dá)到簡略高效的目標(biāo)。簡而言之，Express 是一個封裝了很多函數(shù)包，只需要用簡單的Express的專屬的一些代碼便可解決本來正常較為復(fù)雜的代碼，方便使用。Express 可以設(shè)置中間件(middleware)用來響應(yīng) HTTP請求，這一特點(diǎn)，非常合適于本平臺的開發(fā)。中間件有三種，本平臺均有不同程度的使用，包括內(nèi)置中間件express.json()、express.urlencoded()用于完成將指定public 目錄中所有內(nèi)容為靜態(tài)資源、處理post 請求中的json 數(shù)據(jù)和第三方中間件multer 用于上傳文件。本平臺對中間件的調(diào)用部分如下所示：

3.1 后端框架實(shí)現(xiàn)

后端響應(yīng)與前端頁面的匹配是通過響應(yīng)前端頁面的HTTP 請求，以實(shí)現(xiàn)相應(yīng)的數(shù)據(jù)處理。Express 的中間件通過使用use 方法來進(jìn)行路由配置，并調(diào)用next()函數(shù)（缺失會造成后續(xù)路由配置和代碼的無法匹配和執(zhí)行）。完整的中間件調(diào)用示例如下：

應(yīng)用到本平臺的具體配置是，首先通過 npm init 命令創(chuàng)建一個.json 的包文件。在包文件的基礎(chǔ)上，安裝完express之后，文件中引入var express=require()和var app=express()語句為后續(xù)進(jìn)行的針對性的函數(shù)調(diào)用和功能配置提供框架支持。將頁面部署在localhost:3000 端口，啟動系統(tǒng)工程并監(jiān)聽端口號。使用require 函數(shù)中的path 等模塊并調(diào)用routes文件夾中的索引文件index.js 和路由技術(shù)文件users.js 對系統(tǒng)進(jìn)行設(shè)計(jì)包裝。通過路由提取出請求的URL 以及get 或post 參數(shù)來響應(yīng)http 請求，導(dǎo)出路由并通過js 文件中app.use(‘/’, routes) 加載。這樣，當(dāng)訪問主頁時，處理器將主動運(yùn)用函數(shù)res.render()對views 或index.js 模版進(jìn)行渲染，并在瀏覽器中直接展示。并且通過設(shè)置，處理器可以做到檢測到在代碼編寫和測試中產(chǎn)生的錯誤，不會把錯誤數(shù)據(jù)傳送給使用者，而是幫助使用者直接得到正確數(shù)據(jù)。后端對Express 的設(shè)置部分代碼實(shí)現(xiàn)如下：

3.2 數(shù)據(jù)庫連接

數(shù)據(jù)庫的連接是通過Node.js 內(nèi)部的各類模塊實(shí)現(xiàn)的，通過這個模塊可以完成對MySQL 數(shù)據(jù)庫的增刪改查等操作。在數(shù)據(jù)模塊文件中使用require()方法引入mysql 模塊，然后賦值給變量mysql。然后通過對createConnection()方法的調(diào)用來設(shè)置主機(jī)（host）、用戶名（user）、密碼（password）、端口和數(shù)據(jù)庫（my_database）。然后調(diào)用mysql 模塊中的connect()方法函數(shù)來進(jìn)行連接mysql 這一數(shù)據(jù)庫。最后調(diào)用查詢方法，通過打印返回成功的值，來判斷是否成功。后端對數(shù)據(jù)庫配置的實(shí)現(xiàn)如下：

4 整合

旅游可視化資源是管理者通過將數(shù)據(jù)直接上傳到數(shù)據(jù)后臺或通過頁面增加、修改數(shù)據(jù)，將平臺服務(wù)器端與后端數(shù)據(jù)庫相連接這一方式，達(dá)到數(shù)據(jù)可視化的形式?；谌斯や浫?、主被動網(wǎng)絡(luò)探測生成實(shí)時數(shù)據(jù),實(shí)驗(yàn)表明基于旅游資源可視化技術(shù)可以提高網(wǎng)絡(luò)管理便利性。游客通過登錄頁面選擇游客身份進(jìn)入到旅游資源可視化查看頁面，游客只能查看部分?jǐn)?shù)據(jù)被選擇呈現(xiàn)給他們的數(shù)據(jù)，例如：景區(qū)周邊住宿選擇推薦、景區(qū)當(dāng)前天氣等。且游客沒有更改數(shù)據(jù)的權(quán)限。而當(dāng)用戶以管理者的身份進(jìn)入登陸頁面時，將自動跳轉(zhuǎn)到管理者頁面，同時，管理者可以查詢到每個類型實(shí)時更新的數(shù)據(jù)，例如：各個地區(qū)客流量及來源、往年季度的旅游收入與支出的歷史數(shù)據(jù)等，并可以隨時更改所有數(shù)據(jù)權(quán)限，例如：值班人員的信息變動等。旅游資源可視化構(gòu)建平臺的數(shù)據(jù)顯示界面如圖5 所示。

圖5

5 結(jié)束語

旅游資源可視化構(gòu)建平臺是基于數(shù)據(jù)可視化處理技術(shù)中最主流的Node.js 體系結(jié)構(gòu)和Express 框架結(jié)構(gòu)相結(jié)合的框架開發(fā)形式完成。旅游資源可視化平臺頁面模塊分明，條理清晰，外觀簡潔大氣，色彩鮮明。每個模塊有著自己不同的作用，均可以實(shí)時顯示變動的數(shù)據(jù)。根據(jù)不同的登陸身份，對游客而言，可以實(shí)時地顯示景區(qū)周邊天氣、住宿方式等變化的數(shù)據(jù)；對管理者而言，可以高效、實(shí)時地顯示該旅游景區(qū)客流量、值班人員變動等變化的數(shù)據(jù)。旅游可視化構(gòu)建平臺不僅能夠讓旅游資源可視化得以實(shí)現(xiàn)，實(shí)現(xiàn)“線上旅游”這一現(xiàn)象，而且在方便景區(qū)監(jiān)管者的實(shí)時監(jiān)控景區(qū)，完成線上值班人員排班變動的同時，還可以為游客提供便捷清晰的出行方案、旅游日記等旅游數(shù)據(jù)，幫助游客達(dá)到最便捷、最有效的旅行體驗(yàn)。