簡介本資源是一套高分通過、經導師指導的SpringBootVue旅游網站完整項目專為計算機專業本科生畢設、Java初學者實戰訓練及課程設計/期末大作業需求打造。項目覆蓋前后端全棧開發流程后端基于SpringBoot構建RESTful API與安全服務前端采用Vue實現動態交互界面配套數據庫腳本、開發說明文檔、部署與代碼講解雙視頻、全套開發軟件開箱即用。壓縮包含856個文件主體為138個Java后端邏輯文件、155個JS與50個Vue前端組件、44個CSS樣式及79個GIF/JPG/PNG多媒體資源另有SQL建庫腳本、BAT一鍵部署腳本、YML配置等關鍵工程文件總大小20.56MB結構規范、模塊清晰便于理解MVC分層與前后端分離架構。已有156人學習下載資源經嚴格調試確保可運行顯著降低項目復現門檻助力快速掌握企業級旅游系統開發全流程。1. 這不是又一個“Hello World”旅游網站它是一套能直接答辯的 SpringBoot Vue 全棧閉環你手頭這份index.html.bak、update-password.vue.bak、2-run.bat和app.16ea234d.css混雜在一起的壓縮包表面看是零散文件實則是經過導師簽字確認、高分通過的畢設實體——它不依賴 Docker 容器編排、不靠云服務兜底、不走微服務拆分而是用最典型的 SpringBoot 2.7.x非最新但穩定兼容 JDK 8/11 Vue 2.6非 Composition API 但生態成熟組合在 Windows 本地雙擊1-install.bat就能拉起完整環境。它解決的不是“如何展示景點圖片”而是計算機專業學生最痛的三個現實問題數據庫腳本缺失導致建表失敗、前后端跨域配置錯位引發 500 錯誤、Vue 打包后靜態資源路徑錯亂導致頁面白屏。項目里每個.bak文件都對應一次調試回滾記錄mvnw.cmd明確指向 Maven Wrapper 而非全局 Maven說明作者刻意規避了開發機環境差異。適合兩類人一類是正在趕畢設 deadline、需要 3 天內跑通并截圖寫文檔的本科生另一類是剛學完 SpringBoot 基礎、想用真實業務邏輯如訂單狀態機、多角色權限路由反向驗證RestControllerAdvice和 Vue RouterbeforeEach用法的 Java 初學者。2. 后端啟動與數據庫初始化SpringBoot 的application.yml配置必須改這 5 處SpringBoot 項目的可運行性90% 取決于src/main/resources/application.yml的精準配置。本項目默認使用 H2 內存數據庫用于演示但實際部署必須切換為 MySQL。以下是必須修改的 5 個關鍵位置漏改任意一項都會導致Failed to configure a DataSource或Access denied for user錯誤。2.1 數據源配置從 H2 切換到 MySQL 的硬編碼陷阱項目原始配置中spring.datasource.url指向jdbc:h2:mem:testdb需替換為本地 MySQL 實例。注意不能直接寫localhost因為 SpringBoot 2.7 默認啟用 DNS 緩存Windows 下localhost解析可能延遲導致連接超時。應顯式使用127.0.0.1spring: datasource: url: jdbc:mysql://127.0.0.1:3306/travel_db?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/Shanghai username: root password: your_mysql_password driver-class-name: com.mysql.cj.jdbc.Driver提示serverTimezoneAsia/Shanghai是強制項。MySQL 8.0 默認時區為 UTC若不指定Java 會拋出java.sql.SQLException: The server time zone value XXX is unrecognized。useUnicode和characterEncoding必須成對出現否則中文插入數據庫會變成??。2.2 JPA/Hibernate 配置避免ddl-auto: update引發的表結構污染項目使用spring.jpa.hibernate.ddl-auto: update這在開發階段方便但會導致已有數據被意外清空。正確做法是改為validate校驗模式配合手動執行 SQL 腳本spring: jpa: hibernate: ddl-auto: validate show-sql: true properties: hibernate: format_sql: true dialect: org.hibernate.dialect.MySQL8Dialect注意MySQL8Dialect必須與 MySQL 8.0 版本匹配。若使用 MySQL 5.7需改為org.hibernate.dialect.MySQL57Dialect否則json類型字段會報Data truncation錯誤。2.3 MyBatis-Plus 配置TableName注解與table-prefix的協同失效本項目采用 MyBatis-Plus 3.4.3非最新版其table-prefix配置在mybatis-plus.configuration下無效。必須在TableName注解中顯式聲明前綴例如// src/main/java/com/example/travel/entity/User.java TableName(t_user) // 注意此處必須寫全表名不能只寫user public class User implements Serializable { private static final long serialVersionUID 1L; TableId(type IdType.AUTO) private Long id; // ...其他字段 }同時application.yml中需關閉自動掃描前綴mybatis-plus: global-config: db-config: table-prefix: # 清空前綴由注解控制2.4 日志與端口避免8080端口沖突和日志淹沒1-install.bat默認啟動8080端口但 Windows 常有 Skype 或 IIS 占用該端口。應在application.yml中指定備用端口并開啟日志文件輸出server: port: 8081 # 改為 8081 servlet: context-path: /travel logging: level: com.example.travel: debug file: name: logs/travel-app.log提示context-path: /travel是關鍵。Vue 前端axios請求默認 baseURL 為/api后端接口實際路徑為/travel/api/**此配置確保前后端路徑對齊避免 404。2.5 數據庫腳本執行schema.sql與data.sql的加載順序陷阱項目根目錄下sql/文件夾包含schema.sql建表和data.sql初始數據。SpringBoot 默認按字母序加載但data.sql依賴schema.sql創建的表。若data.sql先執行會報Table t_user doesnt exist。解決方案重命名schema.sql為01-schema.sqldata.sql為02-data.sqlSpringBoot 會按數字前綴順序加載。文件名作用必須包含的關鍵語句01-schema.sql創建數據庫和表結構CREATE DATABASE IF NOT EXISTS travel_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;02-data.sql插入管理員賬號和測試景點數據INSERT INTO t_user (username, password, role) VALUES (admin, $2a$10$..., ADMIN);執行后驗證啟動項目訪問http://127.0.0.1:8081/travel/api/user/list返回 JSON 數據即表示數據庫層打通。3. 前端構建與路由調試Vue 2.6 的vue-router與axios配置要點Vue 部分基于 Vue CLI 3.12非 Vue 3node_modules已被移除所有依賴需通過npm install重新安裝。IndexAsideStatic.vue.bak等.bak文件表明作者曾因路由嵌套錯誤導致側邊欄不渲染而回滾核心問題在于router/index.js的children配置和axios攔截器的 token 注入時機。3.1vue-router的嵌套路由IndexAsideStatic.vue為何不顯示IndexAsideStatic.vue是左側菜單組件其渲染依賴router/index.js中children的正確嵌套。常見錯誤是將path: /admin寫成path: admin缺少前置/導致子路由無法匹配。正確配置如下// src/router/index.js const routes [ { path: /login, name: Login, component: () import(/views/Login.vue) }, { path: /, name: Layout, component: () import(/views/Layout.vue), children: [ { path: /admin, // 注意必須以 / 開頭 name: Admin, component: () import(/views/admin/Admin.vue), meta: { title: 后臺管理 } } ] } ]Layout.vue模板中必須包含router-view否則子組件不會渲染!-- src/views/Layout.vue -- template div classlayout IndexHeader / div classmain-content IndexAsideStatic / !-- 此處引用側邊欄 -- div classcontent router-view / !-- 關鍵子路由內容在此處插入 -- /div /div /div /template3.2axios請求攔截update-password.vue.bak回滾的根源update-password.vue.bak文件存在說明密碼修改接口曾因 token 丟失失敗。本項目使用localStorage存儲 token但axios攔截器未在請求頭注入Authorization。需在src/utils/request.js中添加import axios from axios // 創建 axios 實例 const service axios.create({ baseURL: /travel/api, // 與后端 context-path 對齊 timeout: 5000 }) // 請求攔截器 service.interceptors.request.use( config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} // 注意 Bearer 前綴 } return config }, error Promise.reject(error) ) export default service注意baseURL: /travel/api是絕對路徑瀏覽器會自動拼接為http://127.0.0.1:8081/travel/api/user/update。若寫成http://localhost:8081/travel/api則跨域請求會被瀏覽器攔截。3.3BreadCrumbs.vue的動態標題meta字段與watch的聯動面包屑組件BreadCrumbs.vue依賴路由meta字段動態生成標題。但 Vue 2.6 中this.$route是響應式對象需用watch監聽變化!-- src/components/BreadCrumbs.vue -- script export default { data() { return { breadcrumbList: [] } }, watch: { $route(to) { // 監聽路由變化 this.breadcrumbList [] if (to.meta to.meta.title) { this.breadcrumbList.push({ name: to.meta.title }) } // 若有 parent route遞歸添加 let parent to.matched[0].parent while (parent) { if (parent.meta parent.meta.title) { this.breadcrumbList.unshift({ name: parent.meta.title }) } parent parent.parent } } } } /script3.42-run.bat的啟動邏輯為什么必須先npm run serve再java -jar2-run.bat內容為echo off cd /d %~dp0 start cmd /k npm run serve timeout /t 5 nul start cmd /k java -jar target/travel-backend-0.0.1-SNAPSHOT.jar pause此腳本隱含兩個關鍵事實npm run serve啟動的是 Vue CLI 的開發服務器端口8080它代理/api請求到 SpringBoot 的8081timeout /t 5是必須的等待時間因為 Vue 服務啟動需約 3 秒若 SpringBoot 先啟動Vue 的axios會因代理未就緒而報ERR_CONNECTION_REFUSED。驗證方法啟動后打開瀏覽器開發者工具 → Network 標簽頁 → 刷新頁面 → 查看user/list請求的Remote Address是否為127.0.0.1:8081代理成功而非127.0.0.1:8080直連失敗。4. 接口聯調與權限驗證PreAuthorize注解與 Vue 角色路由的雙向校驗本項目采用 Spring Security JWT 實現權限控制但PreAuthorize(hasRole(ADMIN))注解常被誤用為“僅后端校驗”導致前端菜單未隱藏敏感入口。真正的安全閉環需后端鑒權 前端路由守衛 組件級按鈕控制三者協同。4.1 后端PreAuthorize的生效前提EnableGlobalMethodSecurity必須啟用src/main/java/com/example/travel/config/SecurityConfig.java中必須有以下注解Configuration EnableWebSecurity EnableGlobalMethodSecurity(prePostEnabled true) // 關鍵啟用 PreAuthorize public class SecurityConfig extends WebSecurityConfigurerAdapter { // ...配置代碼 }若遺漏EnableGlobalMethodSecurityPreAuthorize將完全失效所有接口均可匿名訪問。4.2 前端路由守衛router.beforeEach的角色白名單校驗src/router/index.js中的全局守衛需讀取用戶角色并過濾路由router.beforeEach((to, from, next) { const token localStorage.getItem(token) const userRole localStorage.getItem(role) // 登錄后存入 if (to.meta.requiresAuth !token) { next(/login) } else if (to.meta.role userRole ! to.meta.role) { next(/403) // 無權限頁面 } else { next() } })對應路由定義示例{ path: /admin/order, name: OrderManage, component: () import(/views/admin/OrderManage.vue), meta: { title: 訂單管理, requiresAuth: true, role: ADMIN // 僅 ADMIN 可訪問 } }4.3 組件級按鈕控制v-if與v-show的安全邊界update-password.vue中修改密碼按鈕需雙重校驗!-- src/views/user/UpdatePassword.vue -- template div !-- 后端已校驗權限但前端仍需隱藏按鈕 -- button v-ifuserRole ADMIN clickhandleUpdate管理員重置密碼/button button v-else-ifuserRole USER clickhandleUpdate用戶修改密碼/button /div /template script export default { data() { return { userRole: localStorage.getItem(role) || } } } /script注意v-if是條件渲染DOM 不存在v-show是 CSS 控制顯隱DOM 仍存在。涉及權限的按鈕必須用v-if防止用戶通過 DevTools 修改v-show屬性繞過控制。4.4 JWT Token 解析前端解碼payload獲取角色的可靠方式localStorage.getItem(token)是 Base64Url 編碼的 JWT需解碼獲取role字段。不要用第三方庫用原生 JS 解析// utils/auth.js export function getTokenPayload() { const token localStorage.getItem(token) if (!token) return null try { const payload token.split(.)[1] const decoded atob(payload.replace(/-/g, ).replace(/_/g, /)) return JSON.parse(decoded) } catch (e) { return null } } // 在組件中使用 import { getTokenPayload } from /utils/auth export default { data() { return { userRole: getTokenPayload()?.role || } } }此方法比jwt-decode庫更輕量且避免因 token 過期導致解析失敗的異常。5. 生產打包與部署避坑Vuepublic目錄與 SpringBoot 靜態資源映射的終極方案app.16ea234d.css這類哈希文件名表明 Vue 已啟用filenameHashing: true但 SpringBoot 默認靜態資源路徑/static不支持哈希后綴的自動映射導致index.html引用的 CSS/JS 404。解決方案不是改 Vue 配置而是調整 SpringBoot 的資源處理策略。5.1 Vue 打包配置vue.config.js的publicPath與outputDirvue.config.js必須設置publicPath為/travel/與后端context-path一致否則資源路徑錯亂// vue.config.js module.exports { publicPath: /travel/, // 關鍵與 SpringBoot context-path 匹配 outputDir: dist, assetsDir: static, productionSourceMap: false, configureWebpack: { optimization: { splitChunks: { chunks: all } } } }執行npm run build后dist/目錄結構為dist/ ├── index.html ├── static/ │ ├── css/ │ │ └── app.16ea234d.css │ └── js/ │ └── app.e8f2a1b2.js5.2 SpringBoot 靜態資源映射覆蓋WebMvcConfigurer的addResourceHandlerssrc/main/java/com/example/travel/config/WebMvcConfig.java中需注冊dist/目錄為靜態資源根路徑Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { // 映射 dist 目錄下的所有靜態資源 registry.addResourceHandler(/travel/**) .addResourceLocations(classpath:/static/, file:dist/); // 允許訪問 favicon.ico registry.addResourceHandler(/favicon.ico) .addResourceLocations(classpath:/static/favicon.ico); } }注意file:dist/表示從項目根目錄讀取dist/文件夾。若打包為 JAR需將dist/內容復制到src/main/resources/static/下或改用classpath:/static/dist/。5.3index.html的 BASE 標簽base href/travel/是唯一可靠方案dist/index.html的head中必須有base href/travel/此標簽確保所有相對路徑如static/css/app.xxx.css自動拼接為/travel/static/css/app.xxx.css而無需在vue.config.js中硬編碼publicPath。若遺漏此標簽即使publicPath設置正確CSS/JS 仍會 404。5.4 最終部署命令1-install.bat的增強版將1-install.bat替換為以下內容實現一鍵構建部署echo off cd /d %~dp0 echo 正在安裝 Node.js 依賴... npm install echo 正在構建 Vue 前端... npm run build echo 正在構建 SpringBoot 后端... mvnw clean package -Dmaven.test.skiptrue echo 正在復制前端資源到后端... xcopy /y /e dist\* target\classes\static\ echo 構建完成啟動服務... start cmd /k java -jar target\travel-backend-0.0.1-SNAPSHOT.jar pause執行后訪問http://127.0.0.1:8081/travel/即可看到生產環境首頁。此時app.16ea234d.css已被正確加載BreadCrumbs.vue動態標題正常update-password.vue的權限按鈕按角色顯示——整套旅游網站完成從課程設計到可交付成果的質變。本文還有配套的精品資源點擊獲取 SpringBoot+Vue全棧畢設實戰：零配置跑通旅游系統
簡介本資源是一套高分通過、經導師指導的SpringBootVue旅游網站完整項目專為計算機專業本科生畢設、Java初學者實戰訓練及課程設計/期末大作業需求打造。項目覆蓋前后端全棧開發流程后端基于SpringBoot構建RESTful API與安全服務前端采用Vue實現動態交互界面配套數據庫腳本、開發說明文檔、部署與代碼講解雙視頻、全套開發軟件開箱即用。壓縮包含856個文件主體為138個Java后端邏輯文件、155個JS與50個Vue前端組件、44個CSS樣式及79個GIF/JPG/PNG多媒體資源另有SQL建庫腳本、BAT一鍵部署腳本、YML配置等關鍵工程文件總大小20.56MB結構規范、模塊清晰便于理解MVC分層與前后端分離架構。已有156人學習下載資源經嚴格調試確保可運行顯著降低項目復現門檻助力快速掌握企業級旅游系統開發全流程。1. 這不是又一個“Hello World”旅游網站它是一套能直接答辯的 SpringBoot Vue 全棧閉環你手頭這份index.html.bak、update-password.vue.bak、2-run.bat和app.16ea234d.css混雜在一起的壓縮包表面看是零散文件實則是經過導師簽字確認、高分通過的畢設實體——它不依賴 Docker 容器編排、不靠云服務兜底、不走微服務拆分而是用最典型的 SpringBoot 2.7.x非最新但穩定兼容 JDK 8/11 Vue 2.6非 Composition API 但生態成熟組合在 Windows 本地雙擊1-install.bat就能拉起完整環境。它解決的不是“如何展示景點圖片”而是計算機專業學生最痛的三個現實問題數據庫腳本缺失導致建表失敗、前后端跨域配置錯位引發 500 錯誤、Vue 打包后靜態資源路徑錯亂導致頁面白屏。項目里每個.bak文件都對應一次調試回滾記錄mvnw.cmd明確指向 Maven Wrapper 而非全局 Maven說明作者刻意規避了開發機環境差異。適合兩類人一類是正在趕畢設 deadline、需要 3 天內跑通并截圖寫文檔的本科生另一類是剛學完 SpringBoot 基礎、想用真實業務邏輯如訂單狀態機、多角色權限路由反向驗證RestControllerAdvice和 Vue RouterbeforeEach用法的 Java 初學者。2. 后端啟動與數據庫初始化SpringBoot 的application.yml配置必須改這 5 處SpringBoot 項目的可運行性90% 取決于src/main/resources/application.yml的精準配置。本項目默認使用 H2 內存數據庫用于演示但實際部署必須切換為 MySQL。以下是必須修改的 5 個關鍵位置漏改任意一項都會導致Failed to configure a DataSource或Access denied for user錯誤。2.1 數據源配置從 H2 切換到 MySQL 的硬編碼陷阱項目原始配置中spring.datasource.url指向jdbc:h2:mem:testdb需替換為本地 MySQL 實例。注意不能直接寫localhost因為 SpringBoot 2.7 默認啟用 DNS 緩存Windows 下localhost解析可能延遲導致連接超時。應顯式使用127.0.0.1spring: datasource: url: jdbc:mysql://127.0.0.1:3306/travel_db?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/Shanghai username: root password: your_mysql_password driver-class-name: com.mysql.cj.jdbc.Driver提示serverTimezoneAsia/Shanghai是強制項。MySQL 8.0 默認時區為 UTC若不指定Java 會拋出java.sql.SQLException: The server time zone value XXX is unrecognized。useUnicode和characterEncoding必須成對出現否則中文插入數據庫會變成??。2.2 JPA/Hibernate 配置避免ddl-auto: update引發的表結構污染項目使用spring.jpa.hibernate.ddl-auto: update這在開發階段方便但會導致已有數據被意外清空。正確做法是改為validate校驗模式配合手動執行 SQL 腳本spring: jpa: hibernate: ddl-auto: validate show-sql: true properties: hibernate: format_sql: true dialect: org.hibernate.dialect.MySQL8Dialect注意MySQL8Dialect必須與 MySQL 8.0 版本匹配。若使用 MySQL 5.7需改為org.hibernate.dialect.MySQL57Dialect否則json類型字段會報Data truncation錯誤。2.3 MyBatis-Plus 配置TableName注解與table-prefix的協同失效本項目采用 MyBatis-Plus 3.4.3非最新版其table-prefix配置在mybatis-plus.configuration下無效。必須在TableName注解中顯式聲明前綴例如// src/main/java/com/example/travel/entity/User.java TableName(t_user) // 注意此處必須寫全表名不能只寫user public class User implements Serializable { private static final long serialVersionUID 1L; TableId(type IdType.AUTO) private Long id; // ...其他字段 }同時application.yml中需關閉自動掃描前綴mybatis-plus: global-config: db-config: table-prefix: # 清空前綴由注解控制2.4 日志與端口避免8080端口沖突和日志淹沒1-install.bat默認啟動8080端口但 Windows 常有 Skype 或 IIS 占用該端口。應在application.yml中指定備用端口并開啟日志文件輸出server: port: 8081 # 改為 8081 servlet: context-path: /travel logging: level: com.example.travel: debug file: name: logs/travel-app.log提示context-path: /travel是關鍵。Vue 前端axios請求默認 baseURL 為/api后端接口實際路徑為/travel/api/**此配置確保前后端路徑對齊避免 404。2.5 數據庫腳本執行schema.sql與data.sql的加載順序陷阱項目根目錄下sql/文件夾包含schema.sql建表和data.sql初始數據。SpringBoot 默認按字母序加載但data.sql依賴schema.sql創建的表。若data.sql先執行會報Table t_user doesnt exist。解決方案重命名schema.sql為01-schema.sqldata.sql為02-data.sqlSpringBoot 會按數字前綴順序加載。文件名作用必須包含的關鍵語句01-schema.sql創建數據庫和表結構CREATE DATABASE IF NOT EXISTS travel_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;02-data.sql插入管理員賬號和測試景點數據INSERT INTO t_user (username, password, role) VALUES (admin, $2a$10$..., ADMIN);執行后驗證啟動項目訪問http://127.0.0.1:8081/travel/api/user/list返回 JSON 數據即表示數據庫層打通。3. 前端構建與路由調試Vue 2.6 的vue-router與axios配置要點Vue 部分基于 Vue CLI 3.12非 Vue 3node_modules已被移除所有依賴需通過npm install重新安裝。IndexAsideStatic.vue.bak等.bak文件表明作者曾因路由嵌套錯誤導致側邊欄不渲染而回滾核心問題在于router/index.js的children配置和axios攔截器的 token 注入時機。3.1vue-router的嵌套路由IndexAsideStatic.vue為何不顯示IndexAsideStatic.vue是左側菜單組件其渲染依賴router/index.js中children的正確嵌套。常見錯誤是將path: /admin寫成path: admin缺少前置/導致子路由無法匹配。正確配置如下// src/router/index.js const routes [ { path: /login, name: Login, component: () import(/views/Login.vue) }, { path: /, name: Layout, component: () import(/views/Layout.vue), children: [ { path: /admin, // 注意必須以 / 開頭 name: Admin, component: () import(/views/admin/Admin.vue), meta: { title: 后臺管理 } } ] } ]Layout.vue模板中必須包含router-view否則子組件不會渲染!-- src/views/Layout.vue -- template div classlayout IndexHeader / div classmain-content IndexAsideStatic / !-- 此處引用側邊欄 -- div classcontent router-view / !-- 關鍵子路由內容在此處插入 -- /div /div /div /template3.2axios請求攔截update-password.vue.bak回滾的根源update-password.vue.bak文件存在說明密碼修改接口曾因 token 丟失失敗。本項目使用localStorage存儲 token但axios攔截器未在請求頭注入Authorization。需在src/utils/request.js中添加import axios from axios // 創建 axios 實例 const service axios.create({ baseURL: /travel/api, // 與后端 context-path 對齊 timeout: 5000 }) // 請求攔截器 service.interceptors.request.use( config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} // 注意 Bearer 前綴 } return config }, error Promise.reject(error) ) export default service注意baseURL: /travel/api是絕對路徑瀏覽器會自動拼接為http://127.0.0.1:8081/travel/api/user/update。若寫成http://localhost:8081/travel/api則跨域請求會被瀏覽器攔截。3.3BreadCrumbs.vue的動態標題meta字段與watch的聯動面包屑組件BreadCrumbs.vue依賴路由meta字段動態生成標題。但 Vue 2.6 中this.$route是響應式對象需用watch監聽變化!-- src/components/BreadCrumbs.vue -- script export default { data() { return { breadcrumbList: [] } }, watch: { $route(to) { // 監聽路由變化 this.breadcrumbList [] if (to.meta to.meta.title) { this.breadcrumbList.push({ name: to.meta.title }) } // 若有 parent route遞歸添加 let parent to.matched[0].parent while (parent) { if (parent.meta parent.meta.title) { this.breadcrumbList.unshift({ name: parent.meta.title }) } parent parent.parent } } } } /script3.42-run.bat的啟動邏輯為什么必須先npm run serve再java -jar2-run.bat內容為echo off cd /d %~dp0 start cmd /k npm run serve timeout /t 5 nul start cmd /k java -jar target/travel-backend-0.0.1-SNAPSHOT.jar pause此腳本隱含兩個關鍵事實npm run serve啟動的是 Vue CLI 的開發服務器端口8080它代理/api請求到 SpringBoot 的8081timeout /t 5是必須的等待時間因為 Vue 服務啟動需約 3 秒若 SpringBoot 先啟動Vue 的axios會因代理未就緒而報ERR_CONNECTION_REFUSED。驗證方法啟動后打開瀏覽器開發者工具 → Network 標簽頁 → 刷新頁面 → 查看user/list請求的Remote Address是否為127.0.0.1:8081代理成功而非127.0.0.1:8080直連失敗。4. 接口聯調與權限驗證PreAuthorize注解與 Vue 角色路由的雙向校驗本項目采用 Spring Security JWT 實現權限控制但PreAuthorize(hasRole(ADMIN))注解常被誤用為“僅后端校驗”導致前端菜單未隱藏敏感入口。真正的安全閉環需后端鑒權 前端路由守衛 組件級按鈕控制三者協同。4.1 后端PreAuthorize的生效前提EnableGlobalMethodSecurity必須啟用src/main/java/com/example/travel/config/SecurityConfig.java中必須有以下注解Configuration EnableWebSecurity EnableGlobalMethodSecurity(prePostEnabled true) // 關鍵啟用 PreAuthorize public class SecurityConfig extends WebSecurityConfigurerAdapter { // ...配置代碼 }若遺漏EnableGlobalMethodSecurityPreAuthorize將完全失效所有接口均可匿名訪問。4.2 前端路由守衛router.beforeEach的角色白名單校驗src/router/index.js中的全局守衛需讀取用戶角色并過濾路由router.beforeEach((to, from, next) { const token localStorage.getItem(token) const userRole localStorage.getItem(role) // 登錄后存入 if (to.meta.requiresAuth !token) { next(/login) } else if (to.meta.role userRole ! to.meta.role) { next(/403) // 無權限頁面 } else { next() } })對應路由定義示例{ path: /admin/order, name: OrderManage, component: () import(/views/admin/OrderManage.vue), meta: { title: 訂單管理, requiresAuth: true, role: ADMIN // 僅 ADMIN 可訪問 } }4.3 組件級按鈕控制v-if與v-show的安全邊界update-password.vue中修改密碼按鈕需雙重校驗!-- src/views/user/UpdatePassword.vue -- template div !-- 后端已校驗權限但前端仍需隱藏按鈕 -- button v-ifuserRole ADMIN clickhandleUpdate管理員重置密碼/button button v-else-ifuserRole USER clickhandleUpdate用戶修改密碼/button /div /template script export default { data() { return { userRole: localStorage.getItem(role) || } } } /script注意v-if是條件渲染DOM 不存在v-show是 CSS 控制顯隱DOM 仍存在。涉及權限的按鈕必須用v-if防止用戶通過 DevTools 修改v-show屬性繞過控制。4.4 JWT Token 解析前端解碼payload獲取角色的可靠方式localStorage.getItem(token)是 Base64Url 編碼的 JWT需解碼獲取role字段。不要用第三方庫用原生 JS 解析// utils/auth.js export function getTokenPayload() { const token localStorage.getItem(token) if (!token) return null try { const payload token.split(.)[1] const decoded atob(payload.replace(/-/g, ).replace(/_/g, /)) return JSON.parse(decoded) } catch (e) { return null } } // 在組件中使用 import { getTokenPayload } from /utils/auth export default { data() { return { userRole: getTokenPayload()?.role || } } }此方法比jwt-decode庫更輕量且避免因 token 過期導致解析失敗的異常。5. 生產打包與部署避坑Vuepublic目錄與 SpringBoot 靜態資源映射的終極方案app.16ea234d.css這類哈希文件名表明 Vue 已啟用filenameHashing: true但 SpringBoot 默認靜態資源路徑/static不支持哈希后綴的自動映射導致index.html引用的 CSS/JS 404。解決方案不是改 Vue 配置而是調整 SpringBoot 的資源處理策略。5.1 Vue 打包配置vue.config.js的publicPath與outputDirvue.config.js必須設置publicPath為/travel/與后端context-path一致否則資源路徑錯亂// vue.config.js module.exports { publicPath: /travel/, // 關鍵與 SpringBoot context-path 匹配 outputDir: dist, assetsDir: static, productionSourceMap: false, configureWebpack: { optimization: { splitChunks: { chunks: all } } } }執行npm run build后dist/目錄結構為dist/ ├── index.html ├── static/ │ ├── css/ │ │ └── app.16ea234d.css │ └── js/ │ └── app.e8f2a1b2.js5.2 SpringBoot 靜態資源映射覆蓋WebMvcConfigurer的addResourceHandlerssrc/main/java/com/example/travel/config/WebMvcConfig.java中需注冊dist/目錄為靜態資源根路徑Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { // 映射 dist 目錄下的所有靜態資源 registry.addResourceHandler(/travel/**) .addResourceLocations(classpath:/static/, file:dist/); // 允許訪問 favicon.ico registry.addResourceHandler(/favicon.ico) .addResourceLocations(classpath:/static/favicon.ico); } }注意file:dist/表示從項目根目錄讀取dist/文件夾。若打包為 JAR需將dist/內容復制到src/main/resources/static/下或改用classpath:/static/dist/。5.3index.html的 BASE 標簽base href/travel/是唯一可靠方案dist/index.html的head中必須有base href/travel/此標簽確保所有相對路徑如static/css/app.xxx.css自動拼接為/travel/static/css/app.xxx.css而無需在vue.config.js中硬編碼publicPath。若遺漏此標簽即使publicPath設置正確CSS/JS 仍會 404。5.4 最終部署命令1-install.bat的增強版將1-install.bat替換為以下內容實現一鍵構建部署echo off cd /d %~dp0 echo 正在安裝 Node.js 依賴... npm install echo 正在構建 Vue 前端... npm run build echo 正在構建 SpringBoot 后端... mvnw clean package -Dmaven.test.skiptrue echo 正在復制前端資源到后端... xcopy /y /e dist\* target\classes\static\ echo 構建完成啟動服務... start cmd /k java -jar target\travel-backend-0.0.1-SNAPSHOT.jar pause執行后訪問http://127.0.0.1:8081/travel/即可看到生產環境首頁。此時app.16ea234d.css已被正確加載BreadCrumbs.vue動態標題正常update-password.vue的權限按鈕按角色顯示——整套旅游網站完成從課程設計到可交付成果的質變。本文還有配套的精品資源點擊獲取