基于SpringBoot+Vue的桂林龍勝各族自治縣的旅游信息系統設計

摘 要：在信息化時代，將旅游與信息化結合起來開發一個旅游信息系統有助于優化旅游服務、提高旅游效率和管理水平。在滿足桂林龍勝各族自治縣旅游業發展需求的基礎上，設計開發一套綜合化、信息化的旅游系統。該系統基于分層解耦的開發思想，采用前后端分離的架構，前端使用Vue.js漸進式框架，后端使用Spring Boot框架，并結合Spring MVC來處理Web請求。平臺的全文搜索引擎采用Elasticsearch，建立一個高效便捷的智能化旅游信息平臺。該平臺可提供可視化旅游數據、在線地圖、旅游攻略、旅游路線規劃和電子商務等功能。

關鍵詞：桂林龍勝各族自治縣；旅游業；前后端分離架構；SpringBoot；Vue

中圖分類號：TP311 文獻標識碼：A 文章編號：2096-4706（2024）16-0102-05

Design of Tourism Information System for Guilin Longsheng Autonomous Counties of All Ethnic Groups Based on SpringBoot+Vue

Abstract： In the era of informatization， combining tourism and informatization to develop a tourism information system can help optimize tourism services， improve tourism efficiency and management level. On the basis of meeting the development needs of the tourism industry in Longsheng Autonomous Counties of all ethnic groups， this paper designs and develops a comprehensive and information-based tourism system. The system is based on the development concept of hierarchical decoupling， and adopts a front-end and back-end separated architecture. The front-end uses the Vue.js progressive framework， and the back-end uses the Spring Boot framework， combined with Spring MVC to handle Web requests. The platform's full-text search engine uses Elasticsearch to establish an efficient and convenient intelligent tourism information platform. This platform can provide functions such as visualized tourism data， online maps， tourism strategies， tourism route planning， and E-commerce.

Keywords： Guilin Longsheng autonomous counties of all ethnic groups; tourism industry; front-end and back-end separated architecture; SpringBoot; Vue

0 引 言

在當今這個信息化時代，旅游業作為鄉村振興的重要組成部分，扮演著推動經濟發展和地區文化傳承的關鍵角440d67ddc11f3876d2f6dfc657322991色。然而，桂林龍勝等地的旅游業發展仍面臨諸多挑戰，例如存在管理不便、信息不對稱等問題，這些短板限制了其發展潛力的充分釋放。為了應對這些挑戰，借助現代信息技術來提升旅游業的服務質量和管理效率變得尤為重要[1]。一個旅游信息平臺能夠有效解決這些問題，通過旅游數據可視化可以直觀地展現出旅游數據的內在特點和發展趨勢，通過對海量數據的分析揭示出行業的發展特點和規律，為政府部門或旅游行業管理者提供全面科學的決策依據。平臺的地圖導航、旅游攻略論壇可以方便游客快速找到景區的旅游信息，而商品購物功能則有助于拉動當地經濟，促進了旅游業的進一步發展。游客數量增長的溢出效應也為鄰近地區旅游業的發展帶來了更多的可能性[2]。

1 系統整體設計介紹

1.1 關鍵技術

桂林龍勝各族自治縣的智慧旅游平臺采用B/S架構，前后端分離開發[3]。前端界面使用Vue框架，后端采用了Spring Boot框架，并使用Elasticsearch搜索引擎。所用關鍵技術如下：

1）Vue.js。Vue.js是一種較為流行的JavaScript前端框架，廣泛應用于用戶界面和單頁面應用程序（SPA）的構建。作為一款輕量級框架，Vue.js的文件體積小巧，易于學習和上手。它采用了響應式數據綁定機制，數據發生變化時相關視圖會自動更新，極大地簡化了開發流程，開發人員無須手動處理DOM。Vue.js將應用程序抽象為組件的集合，每個組件都封裝了HTML、CSS和JavaScript代碼，從而提高了代碼的可維護性和復用性。此外，Vue.js還可以與各種后端框架（如Spring Boot等）配合使用，實現了前后端分離的開發模式，可為開發人員提供更大的靈活性和便利性。與Apache ECharts這樣的數據可視化庫結合使用，可以輕松構建交互式數據圖表和可視化界面[4]。

2）Spring Boot框架。Spring Boot是一個基于Spring框架的快速開發框架，它的出現簡化了Spring應用的初始搭建和開發過程。Spring Boot提供大量的默認配置，大多數情況下無須用戶手動配置即可使用。可以根據類路徑、JAR包和其他屬性進行自動配置，使得開發人員可以更加專注于業務邏輯的實現。使用Spring Boot，開發人員可以快速構建應用程序原型，在較短時間內即可開發出生產就緒的應用程序。它提供一系列起步依賴和簡化的開發流程，顯著提高了開發效率。同時，Spring Boot與其他Spring生態系統項目（如Spring Data、Spring Security和Spring Cloud等）無縫集成，可以輕而易舉地集成各種功能和服務。Spring Boot默認使用嵌入式Web服務器（如Tomcat），無須額外配置即可啟動應用程序。這樣可以簡化部署和運行時的配置，提供更簡潔的開發體驗[5]。

3）Elasticsearch搜索引擎。Elasticsearch是一個開源的分布式搜索和分析引擎，構建在Apache Lucene之上，提供實時搜索和分析功能，能夠快速存儲、搜索和分析大規模的數據。它支持全文搜索、結構化搜索、地理空間搜索等多種搜索方式，并提供豐富的API和工具，用于處理各種類型的數據（包括文本、數字、地理位置等），是構建復雜搜索應用和實時數據分析平臺的理想選擇[6]。

1.2 系統架構設計

進行程序設計時，盡可能讓每一個接口、類、方法的職責更單一，將Spring MVC[7]與分層解耦的思想結合起來，將系統分為四層，分別為用戶展示層、響應數據層、邏輯處理層和數據訪問層。系統架構如圖1所示。

1）用戶展示層。負責界面的展示以及與后端通信獲取原始數據。Vue用于構建用戶界面和單頁面應用程序，VueZA9Y0kzypVJJQLO5bETb9bShS/Km83hr9DHCpbZHbhE= Router用于實現單頁面應用的導航和路由控制，Vuex用于管理Vue應用中的狀態（數據），Axios用于在瀏覽器中發送HTTP請求與后端服務進行通信和交互。

2）響應數據層。負責接收頁面的請求，對請求進行處理，響應數據層調用邏輯處理層來進行邏輯處理，邏輯處理層處理完后，把處理結果返回給響應數據層，最后響應數據層向用戶展示層發送響應數據。

3）邏輯處理層。負責業務邏輯代碼的處理，邏輯處理過程中需要用到的一些數據通過數據訪問層獲取，通過解耦將邏輯處理分離出來，對業務邏輯進行變更不會對響應數據層和數據訪問層產生影響，程序具有良好的可拓展性。

4）數據訪問層。負責與數據庫和Elasticsearch進行交互，執行數據的持久化操作，并將查找到的數據交給邏輯處理層。

2 數據庫設計

使用MySQL作為主要的關系型數據庫管理系統。在數據庫設計方面，需要為不同類型的數據設計相應的表結構，以滿足系統對于旅游景點數據、多媒體數據、客流量數據、基礎地理數據、用戶信息數據等數據的存儲需求[8]：

1）針對旅游景點數據設計一個景點信息表，其中包含景點名稱、介紹、位置等字段，以便系統對景點信息進行很好的管理和展示。

2）由于MySQL不適合直接存儲大型多媒體文件，可以選擇使用阿里云的對象存儲服務（如OSS）來存儲此類文件，并在數據庫中存儲相應的URL地址，以便系統在需要時獲取多媒體文件的訪問路徑。

3）針對客流量數據的存儲可以設計一個客流量統計表，其中包含時間、地點、客流量等字段，用于記錄和分析不同景點的客流量情況，為系統提供數據支持。

4）針對用戶信息數據的存儲可以設計一個用戶信息表，其中包含用戶ID、用戶名、密碼等字段，用于存儲用戶的注冊信息和登錄憑證，實現用戶管理功能。

除了基本的數據存儲外，還需要考慮數據的格式化處理，例如對數據進行清洗、轉換和驗證，以確保數據的準確性和一致性。此外，數據庫設計還需考慮到安全性、性能優化等方面。在安全性方面，可以采用加密算法對敏感數據進行加密存儲，并設置合適的訪問權限。在性能優化方面，可以考慮使用索引等技術來提高數據庫查詢和操作的效率，同時選擇合適的硬件配置和數據庫引擎，以更好地滿足系統的性能需求。數據建庫過程如圖2所示。以系統景點信息為例，表結構如表1所示。

3 系統功能設計與實現

根據實際調研和需求分析，結合桂林龍勝各族自治縣的豐富旅游資源，設計了前端網頁、地圖向導、旅游攻略查詢、旅游路線規劃、購物商店等模塊[9]。總體設計如圖3所示。

3.1 前端網頁

系統部署在阿里云的云服務器平臺上，用戶可通過公網IP輕松訪問部署在與Nginx上的前端界面。前端展示桂林龍勝自治縣的特色文化和相關旅游信息。除此之外，為了將旅游數據直觀地展示出來，前端界面采用Apache ECharts作為大數據可視化的技術工具。Apache ECharts是一款功能強大的開源可視化庫，能夠創建交互式、可定制的圖表。通過在<head>頭部標簽中引入<script>標簽，并在其中的src屬性中引入Apache ECharts的庫文件https：//cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js，頁面就可以使用ECharts的功能了。以最簡單的柱狀圖為例，在<body>頁面主體部分定義一個<div>元素作為圖表的容器，設置展示圖表的寬度和高度，然后通過編寫JavaScript代碼來創建和配置圖表，可以根據業務需求選擇合適的可視化圖表。這里以柱狀圖為例，首先初始化一個ECharts圖表實例并使用document.getElementById（'div的id'）和初始化的<div>元素綁定；然后采用Object.keys（）和Object.values（）方法將景點名稱和游客數量分別存儲在數組中，以配置圖表的x軸和y軸數據；接著定義一個名為option的變量，用于配置圖表的選項，包括標題、x軸、y軸和數據系列；最后，通過調用setOption（）函數將配置好的選項應用到圖表實例中，并渲染出相應的圖表。同理，可以利用Apache ECharts對從后端API獲取的旅游數據進行數據清洗和格式化，根據業務需求選擇合適的可視化圖表進行展示。借助Apache ECharts提供的豐富圖表、地圖熱點和實時動態圖等功能，清晰展示不同景點的人氣指數以及游客的分布密度等關鍵信息，為游客提供更詳盡的信息，助其更智能地選擇景點，優化行程安排。同時，Apache ECharts的數據可視化功能還為旅游管理部門提供了有力的決策支持和運營指導，有利于相關人員更好地管理和規劃旅游資源。景區數據分析中心如圖4所示。

3.2 在線地圖

地圖向導模塊充分利用了百度地圖的強大接口，結合地理信息系統（GIS）和前端開發技術，為用戶提供一個功能強大的桂林龍勝各族自治縣地理信息和店鋪導航平臺[10]。通過與百度地圖接口的集成，用戶可以實時獲取目的地的地理位置、周邊景點和交通路線等重要信息。借助前端開發技術JavaScript和AJAX，地圖內容得以動態呈現，使用戶能夠通過網頁直觀地了解目的地的地理環境。同時，利用GIS技術，在地圖上標注店鋪和景點的位置，并提供相關信息的彈出式窗口。地理信息數據的處理和地圖標記的定位，則依托SpringBoot框架來處理數據和與前端的交互。此外，通過百度地圖的檢索服務API，用戶可直接搜索目的地附近的店鋪信息，如餐廳、住宿等。在線地圖如圖5所示。

3.3 旅游攻略

旅游攻略模塊充分融合了社區分享特性，用戶可以通過發表游記、上傳照片等方式分享自己的旅行經歷和見解，也可以通過檢索瀏覽他人分享的旅游信息。為了使游客可以便捷高效地通過檢索獲取所需的旅游信息，基于搜索引擎Elasticsearch的功能，使用IK分詞器對帖子的關鍵性數據進行分詞，創建索引庫以及構建倒排索引，從而實現快速檢索和精確匹配。使用Elasticsearch進行搜索，游客可以輕松獲得想要的評論、游記或帖子，其中包含各種目的地的真實體驗和建議。全文搜索功能優化了查詢速度和信息檢索的準確性，使游客快速找到所需信息。旅游攻略界面如圖6所示。

3.4 旅游路線規劃

旅游路線規劃模塊為游客提供了高效的路線規劃建議，有短期旅游路線、中期旅游路線、長期旅游路線、特色文化旅游路線等，每條路線都有詳細的路線規劃和景點推薦，一步步引導游客盡享完美的旅行時光。特色文化旅游路線是根據當地特色制定的，讓游客充分感受和體驗當地的歷史文化、風土人情等。這些旅游路線的優先推薦源自游客分享的真實經驗，也結合了當地向導的專業見解，確保了路線的實用性和可行性，用戶可以選擇最適合自己的旅游路線。旅游路線推薦圖如圖7所示。

3.5 電子商務

桂林龍勝各族自治縣是眾多民族的聚居地，該縣的土特產和手工藝品種類繁多、品質優良。將這些商品信息上傳至旅游信息平臺用于存儲商品的數據庫中，游客就可以在電子商務模塊中輕松瀏覽到當地獨具特色的農產品（如特色水果、綠色蔬菜等），以及各式各樣的手工藝品。該模塊不僅提供豐富的商品供用戶選擇，用戶可在其上獲得便捷的購物體驗，平臺可通過用戶在個人信息中登記的地址信息將商品快遞給用戶，讓他們輕松購買到地道純正的桂林龍勝特色商品。商品展示界面如圖8所示。

4 結 論

本文針對桂林龍勝各族自治縣旅游業發展的現狀和需求，設計并實現一套旅游信息平臺，綜合運用Vue、SpringBoot、Elasticsearch、百度地圖API、數據可視化等技術，搭建了桂林龍勝的旅游信息系統。系統通過對地理信息數據、多媒體數據、人流量數據、旅游討論區數據以及商品數據的整合，為游客提供旅游信息服務。系統部署在阿里云，通過前端網頁、在線地圖、旅游攻略、旅游路線規劃、購物商店等功能模塊實現了對桂林龍勝各族自治縣旅游信息的集成化管理、可視化展示、信息檢索和動態更新等，為游客了解桂林龍勝各族自治縣的特色文化和優美風景以及全面的旅游信息，同時方便當地旅游管理部門對相關信息的管理，推動旅游業高質量發展。

參考文獻：

[1] 徐小輝，劉江濤，高涵，等.基于SpringBoot+Vue框架的采氣方案系統開發 [J].計算機仿真，2021，38（6）：248-250+382.

[2] 雷振仙，王坤.城市旅游景區游客流動時空動態與溢出效應——以貴陽市為例 [J/OL].旅游科學：1-16[2024-GRMSHmxbYxJqJCyIFMtBow==02-18].https：//doi.org/10.16323/j.cnki.lykx.20240417.001.

[3] 王偉，丁佳浩，葉紅陽，等.基于前后端分離架構的某企業檔案管理系統設計與實現 [J].現代信息科技，2024，8（6）：11-14.

[4] 范路橋，高潔，段班祥.基于Python+Flask+ECharts的國內熱門旅游景點數據可視化系統 [J].現代電子技術，2023，46（9）：126-130.

[5] 李晟曈，劉哲，俞定國，等.基于Vue和SpringBoot的鄉村文旅平臺設計與實現 [J].現代計算機，2023，29（8）：98-103.

[6] 董元和，賈炎，朱勇，等.基于ElasticSearch分布式搜索引擎的信息檢索方法研究 [J].湖北師范大學學報：自然科學版，2023，43（4）：56-61.

[7] 羅輝瓊，賀超波，李姣姣，等.基于SpringMVC及MyBatis的高校學術成果庫設計與實現 [J].現代信息科技，2024，8（4）：25-29+35.

[8] 和嫻，杜臣昌，鄭英，等.旅游景區游客信息系統設計與實現 [J].綠色科技，2024，26（2）：244-248+265.

[9] 江永池.基于百度地圖API的主動定位研究與實現 [J].韓山師范學院學報，2021，42（3）：66-72.

[10] 趙強，沈正平，史春云，等.利用Floyd算法優化設計旅游路線——以蘇州市為例 [J].地理空間信息，2024，22（3）：95-98.