基于Vue和SpringBoot的鄉村文旅平臺設計與實現

李晟曈，劉 哲，俞定國*，方申國，孫學敏

（1.浙江傳媒學院新聞與傳播學院，杭州 310018；2.浙江省影視媒體技術研究重點實驗室，杭州 310018；3.浙江傳媒學院媒體工程學院，杭州 310018；4.浙江省工業和信息化研究院，杭州 310012；5.浙江理工大學紡織科學與工程學院，杭州 310018）

0 引言

《“十四五”文化發展規劃》指出要堅持以文塑旅、以旅彰文，推動文化和旅游在更廣范圍、更深層次、更高水平上融合發展，打造獨具魅力的中華文化旅游體驗［1］。文旅融合發展成為未來文化產業、旅游產業的重要趨勢。鄉村文旅作為一種將中華民族的優秀傳統文化與旅游經濟結合起來的產業形態，是新時期我國落實文化強國戰略和鄉村振興戰略，縮小城鄉差距，助力共同富裕的重要抓手。然而新冠疫情爆發以來，我國旅游業受到極大沖擊，至今仍處于“休眠”狀態。同時，由于我國鄉村發展的不充分和不平衡特點，鄉村文旅面臨資源整合難、信息化水平低、管理措施落后等問題。在保障社會安全的前提下，如何提升鄉村文化旅游中的游客體驗，助力鄉村優秀傳統文化的傳播，并拉動旅游的經濟效益增長，成為當下亟需解決的問題。

基于上述背景，針對當代鄉村文化旅游發展的痛點和要點，本文設計并實現了一種基于Vue 和SpringBoot 的鄉村文旅平臺設計，旨在通過數字化平臺進行資源整合，集游客、商家、景區等多元主體協同管理為一體，實現掃碼進入、碼上導游、碼上惠客、碼上消費、碼上評價、碼上合作、碼上監管等應用，創新鄉村文化傳播、激發特色產業活力、優化文旅管理，促進鄉村振興和旅游業可持續發展。

1 平臺建設目標及功能設計

1.1 建設目標

本平臺立足鄉村文旅實際需求，依托支付寶平臺進行小程序的設計和開發。平臺采用Vue的漸進式框架進行“微前端”的開發、基于SpringBoot 微框架的后端開發以及數據庫管理系統，最終實現以二維碼（QR code, QRC）為標識的鄉村文旅融合功能，實現創新傳播優秀傳統文化，完整呈現鄉村旅游圖景，多方受益提升旅游體驗。

1.2 功能設計

1.2.1 用戶登錄

鄉村文旅平臺是依托于支付寶開發和搭建的小程序應用，也是以智能手機移動端為主的輕量化程序。利用支付寶、瀏覽器等“掃一掃”功能，掃描小程序二維碼進入程序主體。用戶在進行文旅信息的訂閱、平臺互動、地點打卡等操作時需要登陸個人賬號。個人賬號通過用戶手機號進行關聯性注冊，達到賬號個性化和實名認證的效果。用戶登錄界面如圖1（a）所示。

圖1 功能設計頁面

1.2.2 鄉村文旅信息推薦

平臺小程序首頁呈現鄉村文旅信息，實現自動拉取并推薦，包括鄉村景點名稱、鄉村景點略縮圖等。用戶可根據推送的信息點擊進入相應的景點詳情頁，也可以在首頁滑動瀏覽多個景點得到簡要信息。鄉村文旅平臺首頁如圖1（b）所示。

1.2.3 景點詳情頁面

景點詳情頁用以展示每個鄉村景點的詳細信息和具體介紹，包括景點簡介、文化元素、宣傳視頻、具體景色以及地圖導航功能。用戶可以通過主頁鄉村景點列表、搜索等方式進入頁面，并可以通過滑動瀏覽詳情頁面查看景點詳情信息。景點詳情頁面如圖1（c）所示。

1.2.4 精確搜索

平臺的精確搜索功能模塊主要用于提升用戶體驗，滿足用戶的個性化需求。平臺為每個景區、景點設置標簽，提供篩選和精確查找功能。用戶可以通過平臺內置的搜索功能精確查找相應的景區，通過篩選功能查找特定類別的景區。精確搜索頁面如圖1（d）所示。

1.2.5 用戶信息頁面

平臺按照用戶的個性化設置和旅游動態，搭建用戶個人信息頁面，如圖1（e）所示，包括用戶頭像、個性簽名、積分、隱私、收藏、設置等功能模塊，用以滿足用戶的個性化使用需求和個人使用痕跡記錄。

2 關鍵技術實現

2.1 前端設計

2.1.1 技術選取

前端設計選用Vue 3.0 作為開發工具，完成本平臺的輕量小程序的開發。作為一套構建用戶界面的漸進式框架，相比其他重量級框架（如angular），Vue 在設計上采用自底向上的增量開發設計［2］。這種框架采用響應式的方式對平臺內的鄉村文旅相關數據、用戶數據進行雙向綁定，使用虛擬DOM 執行異步更新，具有輕量、數據雙向綁定、指令簡單、插件豐富等特點［3］。虛擬DOM 的核心思想是只要頁面依賴數據有所修改，對應的視圖就會更新，其優勢在于能夠將多次操作保存起來，進行合并計算，減少真實DOM 的渲染計算次數，提升用戶體驗［4］。這樣一方面能夠實現鄉村文旅數據的實時更新和真實變化，另一方面通過隊列緩沖中去除重復數據的方式，避免了系統不必要的計算，符合本平臺“微前端”的思想，有利于輕量化程序的跨平臺應用。此外，Vue 使用門檻上的便利性，利于鄉村文旅平臺系統架構的迭代升級，便于后期修改和使用，符合鄉村文旅數字化的可持續發展理念。

2.1.2 項目結構

本平臺的項目結構主要分為三大模塊：狀態模塊的定義、Redux 模塊分層與Vue?cli 腳手架的搭建。本平臺將用戶登錄、鄉村文旅信息推薦、景點詳情、精確搜索、用戶信息定義為領域實體。領域實體是一系列具有相同目的與相同功能的資源的集合，如景點詳情中封裝了鄉村各種旅游景點相關的信息資源，它們共同構成一個整體，即領域實體。前端架構采用Redux模塊分層，平臺前端設計中的多個容器組件設為共享狀態，平臺內組件、頁面、領域的狀態能夠及時改變，鄉村文旅信息能夠實現及時的互聯共享。其工作原理如圖2所示，容器組件的信息變動能夠及時引起頁面狀態、通用前端狀態的變動，最后實現程序領域狀態的變化。

圖2 Redux模塊分層原理示意

平臺前端中Redux 模塊分層由中間件（middleware）和模塊（moudules）組成，redux通過api來加載middleware，每一個中間件middleware能夠處理一個相對獨立任務，經compose函數串聯不同的middleware，便于平臺內部復雜狀態的管理和處理。

項目需求與技術實現相輔相成，平臺項目樹中包含node、public、src 等模塊，展示了項目前端的架構與各模塊內部構造。其項目結構詳情如圖3 所示。其中，index.js 用于聚合所有的領域狀態和頁面UI狀態。

圖3 項目文件結構層級

項目結構采用Vue?cli 進行腳手架的搭建。首先使用npm install webpack?g 命令全局安裝webpack；其次創建腳手架工程，命令vue cre?ate mydemo 創建mydemo 作為項目名，如圖3 所示，表示Vue?cli腳手架搭建成功。

Vue?cli 具有相對成熟的Vue 項目架構設計，其本地測試服務器能夠滿足鄉村文旅平臺輕量化小程序的測試版運行、測試、改進需求。同時，其集成化的打包上線方案能夠實現平臺版本的快速更新，便于平臺的迭代升級。

項目前端設計采用Ddd（領域驅動設計），domain 域充分增強，多個模塊開發互相支持，使得平臺中的鄉村文旅信息、用戶互動模式能夠基于小程序的有機整體呈現快速響應、及時聯動、實時同步的模式，有利于鄉村文旅產業、鄉村文化信息的高效運行和傳播。

2.2 后端設計

2.2.1 技術選取

平臺后端技術選用SpringBoot 微框架和Docker 應用容器。SpringBoot 的約定大于配置的核心思想，默認幫用戶做了許多基礎設置，很多SpringBoot 應用只需要很少的Spring 配置就可以正常運行［5］。同時，SpringBoot 能夠集成大量的框架，解決了重要的項目之間包的版本依賴和穩定性問題［6］。這一特點能夠滿足本平臺微服務的核心數據開發。依托Java 平臺和Spring框架的可擴展性和可定制性，SpringBoot 支撐了本平臺的邊界工具應用，例如小程序中布局管理器BorderLayout 可以將容器的布局分為五個位置，經控件設置窗口大小和窗口顯示的位置。

Docker 是PaaS 提供商dotCloud 開源的一個基于LXC（Linux container）的應用容器引擎［7］，其滿足了開發者開發應用過程中的應用主體和依賴包的移植鏡像需求。平臺基于Docker 的沙箱機制進行后臺開發，能夠將相關應用信息的前端+后端+自動化部署的代碼全部放入docker并打造鏡像，后續可以在服務器中通過docer?ps和docker?run 命令直接啟動服務，簡單便捷，也有較好的封閉性，保障了鄉村文旅業態中商家、游客、景區之間多個主體數據和程序移植的安全性。

2.2.2 數據庫設計

鄉村文旅平臺的程序中包含了數以萬計的景點信息、用戶信息以及周邊自定義標簽（tag）和復雜的關系（connection，con），因此，數據庫的設計和管理不便采用單獨的MySQL，而采用關系型數據庫MySQL+和key?value 型數據庫MongoDB。在較為簡單的信息存儲時使用MySQL，在相對復雜的信息存儲時使用MongoDB，即雙數據源的數據流管理。這有利于文旅信息能夠實現高效的儲存、提取、修改、更新，從數據儲存層面保障了輕量化小程序使用過程中維護成本的節省和用戶體驗的提升。目前數據庫中已收錄浙江省內500 個鄉村小鎮詳細數據，部分數據內容如表1所示。

表1 500個鄉村小鎮數據部分內容

2.2.3 自動化運行及部署

鄉村文旅平臺的自動化運行和部署基于Docker 容器進行設計，使用虛擬機的托管環境，相對簡化了程序運行和部署的資源，同時也便于后期程序的維護和使用。首先構建應用環境，封裝Docker 容器的添加、刪除等修改操作；其次創建具有集群唯一虛擬IP 的Docker 容器，實現集群管理；最后構建應用功能劃分，運行Docker注冊表，實現自動化運行、部署及IT運維。

3 應用前景分析

3.1 以文化為驅動力：具有特色文化的鄉村景點

鄉村文旅平臺構建了一個共享、開放的數字化平臺，以數字呈現的方式賦能優秀文化傳播，增強特色文化的知名度和影響力。這種面向大眾的傳播方式為具有一定文化特色的鄉村提供了新的平臺和機會。這類鄉村即使知名度相對欠缺，也能夠依托平臺實現特色文化元素宣傳資料的投放，如宣傳片、文物展示等，從而突出自身別具一格的文化內容。例如主打歷史名人文化鄉村，可以借助平臺突出歷史名人的介紹以吸引游客；主打特色建筑文化的鄉村，可以借助平臺生成VR 建筑、全景地圖等，使游客能夠遠程體驗鄉村文化，推動當地優秀文化的傳播。

3.2 以產業為紐帶：具有特色產業的鄉村景點

數字化是鄉村經濟發展的新階段與新方向，可以加快鄉村經濟信息化轉型，催生新興的鄉村產業形態［8］。鄉村文旅平臺能夠通過數字化方式賦能鄉村景點產業發展，尤其是具有特色的產業。平臺一方面能夠為鄉村特色產業的產品開拓新的銷售、變現渠道；另一方面能夠通過引流的方式，將游客的目光聚焦于某一產業領域，促進產業的進一步發展或催生產業的新型業態。例如以林業、果業為特色產業的鄉村，能夠借助平臺推廣林、果產品，并發展農家樂、果園采摘等體驗經濟，以此為紐帶促進鄉村經濟、文化、基礎設施建設的多維發展。

3.3 以優化管理為方式：具有多主體統籌管理需求的鄉村景區

疫情常態化背景下，如何使原本數字化、信息化水平相對落后的鄉村景區實現多主體協同管理的優化，成為亟需解決的難點。鄉村文旅平臺基于QRC 的數據信息集成方式，打破各主體、各地區之間標準不對接、接口不統一、設施不共用、信息不互通、資源不共享的問題，能夠將游客、商家、景區等多元主體的信息集于一體、實時共享，實現行業監管、流量控制、旅游攻略、特色產品銷售等多方面的功能應用，助力具有規模化、規范化的多主體統籌管理需求的鄉村景區資源整合、管理優化。

4 結語

基于Vue 和SpringBoot 框架的鄉村文旅平臺，能夠實現用戶登錄、鄉村文旅信息推薦、景點詳情頁面、精確搜索等功能。平臺采用Redux 模塊分層結構，以Vue?cli 進行腳手架搭建，運用SpringBoot 微框架和Docker 應用容器，通過二維碼的標識實現了鄉村文化旅游過程中的游客、商家、景區等多元主體的信息集成。平臺以開放、共享的發展理念，面向文旅行業監管、景區運營、游客服務等應用場景為突破口。未來，平臺在鄉村文旅的文化傳播、產業賦能、旅游管理方面具有應用前景。