尧图网站建设 
简介这是一套基于SpringBoot开发的完整旅游系统源码面向计算机、电子信息工程等专业的本科生及毕业设计学习者适用于高分毕设、课程设计与期末大作业场景。系统采用B/S架构与MVC模式技术栈涵盖JavaJDK1.8、SpringBoot、MyBatis、Vue、Ajax及MySQL 5.7配套IDEA开发环境、Maven3.6构建工具与Tomcat 8.0/9.0服务容器开箱即用。资源包共420个文件含91个核心Java后端逻辑文件、40个Vue前端组件、21个JS交互脚本、38个JPG/PNG界面素材及12个XML配置文件辅以bat启动脚本、yml配置、SQL建表语句等结构清晰、模块完整便于理解前后端分离实现与旅游业务流程如景点管理、订单处理、用户中心。压缩包大小为13.54MBZIP格式已获195人学习下载。所有代码均经实测可运行包含完整目录结构与基础数据初始化支持是掌握企业级Java全栈开发实践的优质学习样本。1. 这不是又一个“旅游网站模板”而是一套可跑通的 SpringBoot Vue 全栈毕业设计骨架你下载到的这个旅游系统代码 java旅游系统代码压缩包表面看是.vue.bak和.bat文件堆叠的旧项目快照但实际它是一套完整闭环、开箱即验的 B/S 架构旅游业务系统——从用户注册登录、景点浏览与搜索、订单生成与支付模拟到后台管理员对线路、酒店、订单的 CRUD 管理全部模块已用 SpringBoot 2.x兼容 JDK1.8 MyBatis Vue 2.x 实现。它不依赖云服务或第三方 API所有接口均直连本地 MySQL 5.7数据库脚本内嵌在resources/sql/或doc/目录下无需手动建库建表。特别适合计算机、电子信息工程等专业学生快速上手课程设计或毕业设计你不需要从零搭环境而是直接1-install.bat → 2-run.bat → 3-build.bat三步启动后就能在浏览器里操作真实业务流程。注意这不是教学视频或 PPT也不是只有 Controller 的空壳而是包含IndexMain.vue主布局、BreadCrumbs.vue面包屑导航、IndexAsideStatic.vue静态侧边栏等完整前端组件以及update-password.vue.bak这类带业务逻辑的页面备份文件——它们共同构成了一套经得起答辩提问的、有状态、有交互、有数据流向的 Java 全栈实践样本。2. 技术栈选型与本地环境搭建为什么必须用 JDK1.8 MySQL 5.7 Tomcat 8.52.1 为什么 SpringBoot 版本锁定在 2.1.x–2.3.x 区间该项目未显式声明spring-boot-starter-parent版本但通过分析pom.xml中spring-boot-maven-plugin插件配置及mybatis-spring-boot-starter依赖版本常见为1.3.4可反推其基于SpringBoot 2.1.18.RELEASE 或 2.3.12.RELEASE。该版本区间对 JDK1.8 兼容性最稳定且与 MyBatis 1.3.x、Vue CLI 3.x对应webpack-dev-server3.x形成成熟配套。若强行升级至 SpringBoot 3.x将触发javax.*包迁移至jakarta.*的全量重构导致Controller注解失效、WebMvcConfigurer接口变更、甚至MyBatis的SqlSessionFactoryBean初始化失败。因此JDK 必须严格使用JDK 1.8.0_202 及以上推荐 1.8.0_333不可用 JDK11 或 JDK17 替代。提示检查 JDK 版本是否生效执行java -version后需看到java version 1.8.0_XXX若显示11.0.x或17.0.x请立即修改系统环境变量JAVA_HOME指向 JDK1.8 安装路径并重启命令行终端。2.2 MySQL 5.7 是唯一可免改源码运行的数据库版本项目 SQL 脚本中大量使用datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP语法该写法在 MySQL 5.6 中仅支持CURRENT_TIMESTAMP作为DEFAULT不支持ON UPDATE子句而 MySQL 8.0 默认启用sql_modeSTRICT_TRANS_TABLES,NO_ZERO_DATE,...会拒绝插入0000-00-00类非法日期常见于未初始化的create_time字段。MySQL 5.7 则完美兼容这两类写法。验证方式导入tourism.sql后执行以下查询确认无报错且返回结果-- 检查关键表结构是否含 CURRENT_TIMESTAMP ON UPDATE SELECT COLUMN_NAME, COLUMN_DEFAULT, EXTRA FROM information_schema.COLUMNS WHERE TABLE_SCHEMA tourism_db AND TABLE_NAME t_user AND COLUMN_NAME IN (create_time, update_time);预期输出中EXTRA列应含on update CURRENT_TIMESTAMP字样。若使用 MySQL 8.0请先执行SET sql_mode(SELECT REPLACE(sql_mode,STRICT_TRANS_TABLES,));再导入否则INSERT INTO t_user (...) VALUES (...)将因NULL插入NOT NULL时间字段而失败。2.3 Tomcat 8.5 是前后端分离调试的临界平衡点项目前端资源.vue组件、main.js.bak未打包进static/目录而是以开发模式独立运行npm run serve后端则由SpringBoot内嵌Tomcat托管 API。但3-build.bat显式调用mvn clean package -Dmaven.test.skiptrue并生成tourism.war说明它同时支持传统 WAR 部署。此时必须使用Tomcat 8.5.x如 8.5.94Tomcat 9 移除了对javax.servlet.http.HttpUpgradeHandler的旧版支持而项目pom.xml中servlet-api依赖版本为2.5或3.0与 Tomcat 9 的jakarta.servlet不兼容。部署时将tourism.war放入tomcat/webapps/后访问http://localhost:8080/tourism/即可进入登录页。2.3.1 三步批处理文件的真实作用链文件名执行命令核心逻辑关键作用失败排查点1-install.batmvn clean install -Dmaven.test.skiptrue下载并安装所有 Maven 依赖含mybatis-spring-boot-starter、spring-boot-starter-web到本地仓库不编译项目源码若卡在Downloading from central: https://repo.maven.apache.org/maven2/...检查settings.xml是否配置了阿里云镜像若报Could not resolve dependencies确认pom.xml中repository地址可访问2-run.batmvn spring-boot:run -Dspring.profiles.activedev启动 SpringBoot 内嵌 Tomcat加载application-dev.yml配置含数据库地址、Redis 开关等此时前端需另起npm run serve若报Failed to configure a DataSource检查src/main/resources/application-dev.yml中spring.datasource.url是否指向localhost:3306/tourism_db且数据库已创建3-build.batmvn clean package -Dmaven.test.skiptrue打包为target/tourism-0.0.1-SNAPSHOT.jar或.war供生产部署若报package com.xxx.controller does not exist确认src/main/java/下包路径与pom.xml中groupId一致且无中文路径3. 前端 Vue 组件还原与路由注入从.bak文件恢复可运行界面3.1.vue.bak文件不是垃圾而是 Vue 2.x 的组件快照IndexMain.vue.bak、IndexAsideStatic.vue.bak等文件并非临时备份而是开发者在 Vue CLI 3.xvue-template-compiler2.6.x环境下保存的完整单文件组件。其结构符合 Vue 2 规范template定义 DOM 结构script导出export default { data() { return { ... } }, methods: { ... } }style scoped控制样式作用域。例如IndexAsideStatic.vue.bak中的侧边栏菜单通过v-foritem in menuList渲染menuList数据来自src/router/index.js中定义的asyncRoutes数组。要使其生效需执行以下操作将所有.bak文件重命名为.vue如IndexMain.vue.bak→IndexMain.vue在src/router/index.js中确认路由配置已注册// src/router/index.js import IndexMain from /views/IndexMain.vue // 注意路径是否匹配重命名后的文件名 import IndexAsideStatic from /components/IndexAsideStatic.vue const routes [ { path: /, name: Index, component: IndexMain, children: [ { path: dashboard, name: Dashboard, component: () import(/views/Dashboard.vue) } ] } ]启动前端服务在项目根目录执行npm install确保package.json存在再执行npm run serve。注意若npm run serve报错Cannot find module vue-template-compiler执行npm install vue-template-compiler2.6.14 --save-dev锁定版本避免 Vue 3.x 的vue/compiler-sfc冲突。3.2main.js.bak是 Vue 实例初始化入口必须注入 Axios 与路由守卫main.js.bak文件本质是 Vue 应用的启动脚本其关键逻辑包括创建 Vue 实例并挂载到#app引入router和store若使用 Vuex配置全局 Axios 请求拦截器添加 token、设置 baseURL注入路由守卫如router.beforeEach检查登录态。典型代码结构如下// main.js.bak → main.js import Vue from vue import App from ./App.vue import router from ./router import store from ./store import axios from axios // 设置 Axios 全局 baseURL指向 SpringBoot 后端 axios.defaults.baseURL http://localhost:8080/api // 注意端口与后端一致 Vue.prototype.$http axios // 路由守卫未登录跳转至 login router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next({ path: /login, query: { redirect: to.fullPath } }) } else { next() } }) new Vue({ router, store, render: h h(App) }).$mount(#app)若main.js缺失或未正确引用router会导致vue-router报错Uncaught Error: No router instance found。此时需确认src/router/index.js是否导出const router new VueRouter({...})并export default router。3.3 面包屑导航BreadCrumbs.vue.bak的动态生成逻辑BreadCrumbs.vue.bak实现了根据当前路由matched数组自动生成层级路径的功能。其核心在于监听$route变化并过滤掉meta.hidden: true的路由!-- BreadCrumbs.vue -- template el-breadcrumb separator-classel-icon-arrow-right el-breadcrumb-item v-for(item, index) in levelList :keyitem.path span v-ifitem.redirect noRedirect || index levelList.length - 1 classno-redirect{{ item.meta.title }}/span a v-else clickhandleLink(item){{ item.meta.title }}/a /el-breadcrumb-item /el-breadcrumb /template script export default { data() { return { levelList: [] } }, watch: { $route() { this.getBreadcrumb() } }, created() { this.getBreadcrumb() }, methods: { getBreadcrumb() { let matched this.$route.matched.filter(item item.meta.title) // 过滤无 title 的路由 const first matched[0] if (!this.isHome(first)) { matched [{ path: /dashboard, meta: { title: 首页 } }].concat(matched) // 强制首页 } this.levelList matched }, isHome(route) { return route.path /dashboard || route.path / }, handleLink(item) { this.$router.push(item.path) } } } /script该组件被IndexMain.vue通过bread-crumbs /标签调用因此必须在IndexMain.vue的components选项中注册// IndexMain.vue import BreadCrumbs from /components/BreadCrumbs.vue export default { components: { BreadCrumbs // 注册后才能在 template 中使用 } }4. 后端核心业务实现MyBatis 多表联查与 Spring Security 权限控制4.1 景点搜索与分页SelectProvider动态 SQL 的实战写法旅游系统的核心功能“景点搜索”并非简单LIKE查询而是支持按城市、价格区间、评分排序的复合条件检索。后端采用SelectProvider注解配合TourismProvider类生成动态 SQL避免 XML 冗余。例如TourismMapper.java中public interface TourismMapper { SelectProvider(type TourismProvider.class, method searchScenic) ListScenic searchScenic(ScenicQuery query); }对应的TourismProvider.javapublic class TourismProvider { public String searchScenic(ScenicQuery query) { return new SQL(){{ SELECT(s.id, s.name, s.city, s.price, s.score, s.img_url); FROM(t_scenic s); WHERE(s.status 1); // 仅查启用状态 if (query.getCity() ! null !query.getCity().trim().isEmpty()) { WHERE(s.city #{city}); } if (query.getMinPrice() ! null) { WHERE(s.price #{minPrice}); } if (query.getMaxPrice() ! null) { WHERE(s.price #{maxPrice}); } ORDER_BY(s.score DESC, s.create_time DESC); }}.toString(); } }此写法比 XML 更易维护且ScenicQuery对象可直接接收前端GET /api/scenic/search?city北京minPrice100参数。测试时用 Postman 发送请求响应体应为 JSON 数组含id、name、price等字段。4.2 订单状态机与支付模拟Transactional与库存扣减原子性用户下单流程涉及t_order主表、t_order_item明细表、t_scenic景点库存更新必须保证事务一致性。OrderService.java中的关键方法Transactional(rollbackFor Exception.class) public Order createOrder(OrderCreateDTO dto) { // 1. 校验景点库存 Scenic scenic scenicMapper.selectById(dto.getScenicId()); if (scenic.getStock() dto.getQuantity()) { throw new RuntimeException(库存不足); } // 2. 扣减库存乐观锁 int updated scenicMapper.updateStock( scenic.getId(), scenic.getStock() - dto.getQuantity(), scenic.getVersion() ); if (updated 0) { throw new RuntimeException(库存并发冲突请重试); } // 3. 创建订单主表 Order order new Order(); order.setUserId(dto.getUserId()); order.setTotalAmount(dto.getQuantity() * scenic.getPrice()); order.setStatus(OrderStatus.WAIT_PAY.getCode()); orderMapper.insert(order); // 4. 创建订单明细 OrderItem item new OrderItem(); item.setOrderId(order.getId()); item.setScenicId(scenic.getId()); item.setQuantity(dto.getQuantity()); orderItemMapper.insert(item); return order; }此处scenicMapper.updateStock(...)对应 XML 中的update语句使用WHERE id #{id} AND version #{oldVersion}实现乐观锁。若两个请求同时读取version1则第二个UPDATE将因WHERE ... AND version 1不成立而返回updated0触发回滚。4.3 Spring Security 权限注解PreAuthorize(hasRole(ADMIN))的生效前提后台管理接口如/api/admin/user/list需 ADMIN 角色访问代码中使用RestController RequestMapping(/api/admin) public class AdminUserController { GetMapping(/user/list) PreAuthorize(hasRole(ADMIN)) public ResultListUser listUsers() { return Result.success(userService.list()); } }但该注解生效需满足三个条件SecurityConfig.java中启用方法级安全EnableGlobalMethodSecurity(prePostEnabled true)用户登录后UserDetailsServiceImpl.loadUserByUsername()返回的UserDetails对象中getAuthorities()必须返回AuthorityUtils.commaSeparatedStringToAuthorityList(ROLE_ADMIN)前端请求头必须携带Authorization: Bearer jwt-token且 JWT 中role字段值为ADMIN。若访问/api/admin/user/list返回403 Forbidden首先检查SecurityConfig是否配置Configuration EnableWebSecurity EnableGlobalMethodSecurity(prePostEnabled true) // 关键 public class SecurityConfig extends WebSecurityConfigurerAdapter { // ... 配置 http.authorizeRequests() }5. 常见启动失败排错与性能优化技巧从ClassNotFoundException到 GC 调优5.1java.lang.ClassNotFoundException: javax.servlet.Filter的根因与修复当执行2-run.bat启动时报此错本质是Servlet API 版本冲突。SpringBoot 2.x 默认引入tomcat-embed-core9.x其依赖servlet-api4.0.1而项目pom.xml中可能显式声明了servlet-api2.5如artifactIdservlet-api/artifactIdversion2.5/version。Maven 会按“最近依赖原则”选择 2.5 版本导致Filter类找不到因 4.0.1 中Filter在jakarta.servlet包下2.5 在javax.servlet。修复方案在pom.xml中排除旧版依赖dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId exclusions exclusion groupIdjavax.servlet/groupId artifactIdservlet-api/artifactId /exclusion /exclusions /dependency或直接删除项目中所有显式的servlet-api依赖交由 SpringBoot 管理。5.2 MySQL 连接池耗尽HikariCP连接泄漏检测配置高并发测试时可能出现HikariPool-1 - Connection is not available, request timed out after 30000ms。这通常因Connection未被close()导致。在application-dev.yml中启用连接泄漏检测spring: datasource: hikari: connection-timeout: 30000 leak-detection-threshold: 60000 # 60秒未归还即告警 maximum-pool-size: 20 minimum-idle: 5同时在 DAO 层确保每个SqlSession正确关闭。若使用Mapper接口MyBatis 会自动管理若手动获取SqlSession必须用try-with-resourcestry (SqlSession session sqlSessionFactory.openSession()) { UserMapper mapper session.getMapper(UserMapper.class); return mapper.selectById(id); } // 自动 close()5.3 JVM 启动参数优化针对 JDK1.8 的 GC 策略调优1-install.bat和2-run.bat默认未设置 JVM 参数导致大内存场景 Full GC 频繁。建议在2-run.bat中修改启动命令mvn spring-boot:run -Dspring.profiles.activedev -Djvm.args-Xms512m -Xmx1024m -XX:UseG1GC -XX:MaxGCPauseMillis200参数说明-Xms512m -Xmx1024m堆内存初始与最大设为 512MB/1024MB避免动态扩容开销-XX:UseG1GC启用 G1 垃圾收集器JDK1.8u20 默认适合大堆且低延迟场景-XX:MaxGCPauseMillis200目标 GC 暂停时间不超过 200msG1 会自动调整年轻代大小。验证是否生效启动后观察控制台日志应出现Using VM: OpenJDK 64-Bit Server VM及Garbage Collection: G1 Young Generation字样。本文还有配套的精品资源点击获取 SpringBoot2+Vue2旅游系统毕业设计骨架
简介这是一套基于SpringBoot开发的完整旅游系统源码面向计算机、电子信息工程等专业的本科生及毕业设计学习者适用于高分毕设、课程设计与期末大作业场景。系统采用B/S架构与MVC模式技术栈涵盖JavaJDK1.8、SpringBoot、MyBatis、Vue、Ajax及MySQL 5.7配套IDEA开发环境、Maven3.6构建工具与Tomcat 8.0/9.0服务容器开箱即用。资源包共420个文件含91个核心Java后端逻辑文件、40个Vue前端组件、21个JS交互脚本、38个JPG/PNG界面素材及12个XML配置文件辅以bat启动脚本、yml配置、SQL建表语句等结构清晰、模块完整便于理解前后端分离实现与旅游业务流程如景点管理、订单处理、用户中心。压缩包大小为13.54MBZIP格式已获195人学习下载。所有代码均经实测可运行包含完整目录结构与基础数据初始化支持是掌握企业级Java全栈开发实践的优质学习样本。1. 这不是又一个“旅游网站模板”而是一套可跑通的 SpringBoot Vue 全栈毕业设计骨架你下载到的这个旅游系统代码 java旅游系统代码压缩包表面看是.vue.bak和.bat文件堆叠的旧项目快照但实际它是一套完整闭环、开箱即验的 B/S 架构旅游业务系统——从用户注册登录、景点浏览与搜索、订单生成与支付模拟到后台管理员对线路、酒店、订单的 CRUD 管理全部模块已用 SpringBoot 2.x兼容 JDK1.8 MyBatis Vue 2.x 实现。它不依赖云服务或第三方 API所有接口均直连本地 MySQL 5.7数据库脚本内嵌在resources/sql/或doc/目录下无需手动建库建表。特别适合计算机、电子信息工程等专业学生快速上手课程设计或毕业设计你不需要从零搭环境而是直接1-install.bat → 2-run.bat → 3-build.bat三步启动后就能在浏览器里操作真实业务流程。注意这不是教学视频或 PPT也不是只有 Controller 的空壳而是包含IndexMain.vue主布局、BreadCrumbs.vue面包屑导航、IndexAsideStatic.vue静态侧边栏等完整前端组件以及update-password.vue.bak这类带业务逻辑的页面备份文件——它们共同构成了一套经得起答辩提问的、有状态、有交互、有数据流向的 Java 全栈实践样本。2. 技术栈选型与本地环境搭建为什么必须用 JDK1.8 MySQL 5.7 Tomcat 8.52.1 为什么 SpringBoot 版本锁定在 2.1.x–2.3.x 区间该项目未显式声明spring-boot-starter-parent版本但通过分析pom.xml中spring-boot-maven-plugin插件配置及mybatis-spring-boot-starter依赖版本常见为1.3.4可反推其基于SpringBoot 2.1.18.RELEASE 或 2.3.12.RELEASE。该版本区间对 JDK1.8 兼容性最稳定且与 MyBatis 1.3.x、Vue CLI 3.x对应webpack-dev-server3.x形成成熟配套。若强行升级至 SpringBoot 3.x将触发javax.*包迁移至jakarta.*的全量重构导致Controller注解失效、WebMvcConfigurer接口变更、甚至MyBatis的SqlSessionFactoryBean初始化失败。因此JDK 必须严格使用JDK 1.8.0_202 及以上推荐 1.8.0_333不可用 JDK11 或 JDK17 替代。提示检查 JDK 版本是否生效执行java -version后需看到java version 1.8.0_XXX若显示11.0.x或17.0.x请立即修改系统环境变量JAVA_HOME指向 JDK1.8 安装路径并重启命令行终端。2.2 MySQL 5.7 是唯一可免改源码运行的数据库版本项目 SQL 脚本中大量使用datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP语法该写法在 MySQL 5.6 中仅支持CURRENT_TIMESTAMP作为DEFAULT不支持ON UPDATE子句而 MySQL 8.0 默认启用sql_modeSTRICT_TRANS_TABLES,NO_ZERO_DATE,...会拒绝插入0000-00-00类非法日期常见于未初始化的create_time字段。MySQL 5.7 则完美兼容这两类写法。验证方式导入tourism.sql后执行以下查询确认无报错且返回结果-- 检查关键表结构是否含 CURRENT_TIMESTAMP ON UPDATE SELECT COLUMN_NAME, COLUMN_DEFAULT, EXTRA FROM information_schema.COLUMNS WHERE TABLE_SCHEMA tourism_db AND TABLE_NAME t_user AND COLUMN_NAME IN (create_time, update_time);预期输出中EXTRA列应含on update CURRENT_TIMESTAMP字样。若使用 MySQL 8.0请先执行SET sql_mode(SELECT REPLACE(sql_mode,STRICT_TRANS_TABLES,));再导入否则INSERT INTO t_user (...) VALUES (...)将因NULL插入NOT NULL时间字段而失败。2.3 Tomcat 8.5 是前后端分离调试的临界平衡点项目前端资源.vue组件、main.js.bak未打包进static/目录而是以开发模式独立运行npm run serve后端则由SpringBoot内嵌Tomcat托管 API。但3-build.bat显式调用mvn clean package -Dmaven.test.skiptrue并生成tourism.war说明它同时支持传统 WAR 部署。此时必须使用Tomcat 8.5.x如 8.5.94Tomcat 9 移除了对javax.servlet.http.HttpUpgradeHandler的旧版支持而项目pom.xml中servlet-api依赖版本为2.5或3.0与 Tomcat 9 的jakarta.servlet不兼容。部署时将tourism.war放入tomcat/webapps/后访问http://localhost:8080/tourism/即可进入登录页。2.3.1 三步批处理文件的真实作用链文件名执行命令核心逻辑关键作用失败排查点1-install.batmvn clean install -Dmaven.test.skiptrue下载并安装所有 Maven 依赖含mybatis-spring-boot-starter、spring-boot-starter-web到本地仓库不编译项目源码若卡在Downloading from central: https://repo.maven.apache.org/maven2/...检查settings.xml是否配置了阿里云镜像若报Could not resolve dependencies确认pom.xml中repository地址可访问2-run.batmvn spring-boot:run -Dspring.profiles.activedev启动 SpringBoot 内嵌 Tomcat加载application-dev.yml配置含数据库地址、Redis 开关等此时前端需另起npm run serve若报Failed to configure a DataSource检查src/main/resources/application-dev.yml中spring.datasource.url是否指向localhost:3306/tourism_db且数据库已创建3-build.batmvn clean package -Dmaven.test.skiptrue打包为target/tourism-0.0.1-SNAPSHOT.jar或.war供生产部署若报package com.xxx.controller does not exist确认src/main/java/下包路径与pom.xml中groupId一致且无中文路径3. 前端 Vue 组件还原与路由注入从.bak文件恢复可运行界面3.1.vue.bak文件不是垃圾而是 Vue 2.x 的组件快照IndexMain.vue.bak、IndexAsideStatic.vue.bak等文件并非临时备份而是开发者在 Vue CLI 3.xvue-template-compiler2.6.x环境下保存的完整单文件组件。其结构符合 Vue 2 规范template定义 DOM 结构script导出export default { data() { return { ... } }, methods: { ... } }style scoped控制样式作用域。例如IndexAsideStatic.vue.bak中的侧边栏菜单通过v-foritem in menuList渲染menuList数据来自src/router/index.js中定义的asyncRoutes数组。要使其生效需执行以下操作将所有.bak文件重命名为.vue如IndexMain.vue.bak→IndexMain.vue在src/router/index.js中确认路由配置已注册// src/router/index.js import IndexMain from /views/IndexMain.vue // 注意路径是否匹配重命名后的文件名 import IndexAsideStatic from /components/IndexAsideStatic.vue const routes [ { path: /, name: Index, component: IndexMain, children: [ { path: dashboard, name: Dashboard, component: () import(/views/Dashboard.vue) } ] } ]启动前端服务在项目根目录执行npm install确保package.json存在再执行npm run serve。注意若npm run serve报错Cannot find module vue-template-compiler执行npm install vue-template-compiler2.6.14 --save-dev锁定版本避免 Vue 3.x 的vue/compiler-sfc冲突。3.2main.js.bak是 Vue 实例初始化入口必须注入 Axios 与路由守卫main.js.bak文件本质是 Vue 应用的启动脚本其关键逻辑包括创建 Vue 实例并挂载到#app引入router和store若使用 Vuex配置全局 Axios 请求拦截器添加 token、设置 baseURL注入路由守卫如router.beforeEach检查登录态。典型代码结构如下// main.js.bak → main.js import Vue from vue import App from ./App.vue import router from ./router import store from ./store import axios from axios // 设置 Axios 全局 baseURL指向 SpringBoot 后端 axios.defaults.baseURL http://localhost:8080/api // 注意端口与后端一致 Vue.prototype.$http axios // 路由守卫未登录跳转至 login router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next({ path: /login, query: { redirect: to.fullPath } }) } else { next() } }) new Vue({ router, store, render: h h(App) }).$mount(#app)若main.js缺失或未正确引用router会导致vue-router报错Uncaught Error: No router instance found。此时需确认src/router/index.js是否导出const router new VueRouter({...})并export default router。3.3 面包屑导航BreadCrumbs.vue.bak的动态生成逻辑BreadCrumbs.vue.bak实现了根据当前路由matched数组自动生成层级路径的功能。其核心在于监听$route变化并过滤掉meta.hidden: true的路由!-- BreadCrumbs.vue -- template el-breadcrumb separator-classel-icon-arrow-right el-breadcrumb-item v-for(item, index) in levelList :keyitem.path span v-ifitem.redirect noRedirect || index levelList.length - 1 classno-redirect{{ item.meta.title }}/span a v-else clickhandleLink(item){{ item.meta.title }}/a /el-breadcrumb-item /el-breadcrumb /template script export default { data() { return { levelList: [] } }, watch: { $route() { this.getBreadcrumb() } }, created() { this.getBreadcrumb() }, methods: { getBreadcrumb() { let matched this.$route.matched.filter(item item.meta.title) // 过滤无 title 的路由 const first matched[0] if (!this.isHome(first)) { matched [{ path: /dashboard, meta: { title: 首页 } }].concat(matched) // 强制首页 } this.levelList matched }, isHome(route) { return route.path /dashboard || route.path / }, handleLink(item) { this.$router.push(item.path) } } } /script该组件被IndexMain.vue通过bread-crumbs /标签调用因此必须在IndexMain.vue的components选项中注册// IndexMain.vue import BreadCrumbs from /components/BreadCrumbs.vue export default { components: { BreadCrumbs // 注册后才能在 template 中使用 } }4. 后端核心业务实现MyBatis 多表联查与 Spring Security 权限控制4.1 景点搜索与分页SelectProvider动态 SQL 的实战写法旅游系统的核心功能“景点搜索”并非简单LIKE查询而是支持按城市、价格区间、评分排序的复合条件检索。后端采用SelectProvider注解配合TourismProvider类生成动态 SQL避免 XML 冗余。例如TourismMapper.java中public interface TourismMapper { SelectProvider(type TourismProvider.class, method searchScenic) ListScenic searchScenic(ScenicQuery query); }对应的TourismProvider.javapublic class TourismProvider { public String searchScenic(ScenicQuery query) { return new SQL(){{ SELECT(s.id, s.name, s.city, s.price, s.score, s.img_url); FROM(t_scenic s); WHERE(s.status 1); // 仅查启用状态 if (query.getCity() ! null !query.getCity().trim().isEmpty()) { WHERE(s.city #{city}); } if (query.getMinPrice() ! null) { WHERE(s.price #{minPrice}); } if (query.getMaxPrice() ! null) { WHERE(s.price #{maxPrice}); } ORDER_BY(s.score DESC, s.create_time DESC); }}.toString(); } }此写法比 XML 更易维护且ScenicQuery对象可直接接收前端GET /api/scenic/search?city北京minPrice100参数。测试时用 Postman 发送请求响应体应为 JSON 数组含id、name、price等字段。4.2 订单状态机与支付模拟Transactional与库存扣减原子性用户下单流程涉及t_order主表、t_order_item明细表、t_scenic景点库存更新必须保证事务一致性。OrderService.java中的关键方法Transactional(rollbackFor Exception.class) public Order createOrder(OrderCreateDTO dto) { // 1. 校验景点库存 Scenic scenic scenicMapper.selectById(dto.getScenicId()); if (scenic.getStock() dto.getQuantity()) { throw new RuntimeException(库存不足); } // 2. 扣减库存乐观锁 int updated scenicMapper.updateStock( scenic.getId(), scenic.getStock() - dto.getQuantity(), scenic.getVersion() ); if (updated 0) { throw new RuntimeException(库存并发冲突请重试); } // 3. 创建订单主表 Order order new Order(); order.setUserId(dto.getUserId()); order.setTotalAmount(dto.getQuantity() * scenic.getPrice()); order.setStatus(OrderStatus.WAIT_PAY.getCode()); orderMapper.insert(order); // 4. 创建订单明细 OrderItem item new OrderItem(); item.setOrderId(order.getId()); item.setScenicId(scenic.getId()); item.setQuantity(dto.getQuantity()); orderItemMapper.insert(item); return order; }此处scenicMapper.updateStock(...)对应 XML 中的update语句使用WHERE id #{id} AND version #{oldVersion}实现乐观锁。若两个请求同时读取version1则第二个UPDATE将因WHERE ... AND version 1不成立而返回updated0触发回滚。4.3 Spring Security 权限注解PreAuthorize(hasRole(ADMIN))的生效前提后台管理接口如/api/admin/user/list需 ADMIN 角色访问代码中使用RestController RequestMapping(/api/admin) public class AdminUserController { GetMapping(/user/list) PreAuthorize(hasRole(ADMIN)) public ResultListUser listUsers() { return Result.success(userService.list()); } }但该注解生效需满足三个条件SecurityConfig.java中启用方法级安全EnableGlobalMethodSecurity(prePostEnabled true)用户登录后UserDetailsServiceImpl.loadUserByUsername()返回的UserDetails对象中getAuthorities()必须返回AuthorityUtils.commaSeparatedStringToAuthorityList(ROLE_ADMIN)前端请求头必须携带Authorization: Bearer jwt-token且 JWT 中role字段值为ADMIN。若访问/api/admin/user/list返回403 Forbidden首先检查SecurityConfig是否配置Configuration EnableWebSecurity EnableGlobalMethodSecurity(prePostEnabled true) // 关键 public class SecurityConfig extends WebSecurityConfigurerAdapter { // ... 配置 http.authorizeRequests() }5. 常见启动失败排错与性能优化技巧从ClassNotFoundException到 GC 调优5.1java.lang.ClassNotFoundException: javax.servlet.Filter的根因与修复当执行2-run.bat启动时报此错本质是Servlet API 版本冲突。SpringBoot 2.x 默认引入tomcat-embed-core9.x其依赖servlet-api4.0.1而项目pom.xml中可能显式声明了servlet-api2.5如artifactIdservlet-api/artifactIdversion2.5/version。Maven 会按“最近依赖原则”选择 2.5 版本导致Filter类找不到因 4.0.1 中Filter在jakarta.servlet包下2.5 在javax.servlet。修复方案在pom.xml中排除旧版依赖dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId exclusions exclusion groupIdjavax.servlet/groupId artifactIdservlet-api/artifactId /exclusion /exclusions /dependency或直接删除项目中所有显式的servlet-api依赖交由 SpringBoot 管理。5.2 MySQL 连接池耗尽HikariCP连接泄漏检测配置高并发测试时可能出现HikariPool-1 - Connection is not available, request timed out after 30000ms。这通常因Connection未被close()导致。在application-dev.yml中启用连接泄漏检测spring: datasource: hikari: connection-timeout: 30000 leak-detection-threshold: 60000 # 60秒未归还即告警 maximum-pool-size: 20 minimum-idle: 5同时在 DAO 层确保每个SqlSession正确关闭。若使用Mapper接口MyBatis 会自动管理若手动获取SqlSession必须用try-with-resourcestry (SqlSession session sqlSessionFactory.openSession()) { UserMapper mapper session.getMapper(UserMapper.class); return mapper.selectById(id); } // 自动 close()5.3 JVM 启动参数优化针对 JDK1.8 的 GC 策略调优1-install.bat和2-run.bat默认未设置 JVM 参数导致大内存场景 Full GC 频繁。建议在2-run.bat中修改启动命令mvn spring-boot:run -Dspring.profiles.activedev -Djvm.args-Xms512m -Xmx1024m -XX:UseG1GC -XX:MaxGCPauseMillis200参数说明-Xms512m -Xmx1024m堆内存初始与最大设为 512MB/1024MB避免动态扩容开销-XX:UseG1GC启用 G1 垃圾收集器JDK1.8u20 默认适合大堆且低延迟场景-XX:MaxGCPauseMillis200目标 GC 暂停时间不超过 200msG1 会自动调整年轻代大小。验证是否生效启动后观察控制台日志应出现Using VM: OpenJDK 64-Bit Server VM及Garbage Collection: G1 Young Generation字样。本文还有配套的精品资源点击获取