基于Node.js 的旅游資源可視化構建平臺設計與實現(xiàn)

朱君 趙梓同

（渤海大學 遼寧省錦州市 121000）

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

1 總體分析

1.1 市場行情

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

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

圖1

1.2 總體結構

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

1.3 技術需求

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

旅游資源可視化構建平臺的總體結構的圖表形式如圖2所示。

圖2

2 前端開發(fā)

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

2.1 前端設計

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

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

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

圖3

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

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

圖4

3 后端開發(fā)

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

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

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

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

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

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

4 整合

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

圖5

5 結束語

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