SpringBoot+Vue全栈旅游平台开发实战指南-平芜编程栈

1. 项目概述：SpringBoot+Vue全栈旅游平台开发实录

去年帮学弟调试毕业设计时，发现市面上很多所谓的"旅游管理系统"要么功能残缺，要么架构混乱。作为一个完整支持前后端分离的实战项目，这套基于SpringBoot+Vue的解决方案经过三次迭代，已经形成了包含用户端、管理端的完整业务闭环。特别适合需要快速构建可演示项目的计算机专业学生，或是想了解现代Web开发流程的入门开发者。

这个平台最核心的价值在于：

采用企业级技术栈（SpringBoot 2.7 + Vue 3.2）
实现高内聚低耦合的模块化设计
包含旅游行业典型业务场景（景点管理、订单处理、评论系统等）
提供可扩展的二次开发接口

提示：项目数据库使用MySQL 8.0，建议配合Redis缓存使用以提升性能，但基础功能不依赖Redis

2. 技术架构解析

2.1 后端SpringBoot设计要点

后端采用经典的三层架构，但针对旅游业务做了特殊优化：

com.tourism ├── config # 安全配置/跨域处理 ├── controller # 暴露API接口 │ ├── admin # 管理端接口 │ └── client # 用户端接口 ├── service # 业务逻辑层 │ ├── impl # 接口实现 │ └── cache # 缓存处理 ├── dao # 数据持久层 ├── entity # 数据库实体 └── util # 工具类包

关键配置示例（application.yml节选）：

spring: datasource: url: jdbc:mysql://localhost:3306/tourism?useSSL=false&serverTimezone=UTC username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver redis: host: 127.0.0.1 port: 6379

2.2 前端Vue工程结构

前端采用Vue CLI搭建的模块化工程：

src/ ├── api # 接口请求封装 ├── assets # 静态资源 ├── components # 公共组件 │ ├── Header.vue │ └── Sidebar.vue ├── router # 路由配置 ├── store # Vuex状态管理 ├── utils # 工具函数 └── views # 页面组件 ├── admin # 后台页面 └── client # 用户页面

典型接口调用示例（使用axios）：

export function getScenicList(params) { return request({ url: '/scenic/list', method: 'get', params }) }

3. 核心功能实现

3.1 旅游景点模块

数据库设计（MySQL）：

CREATE TABLE `scenic_spot` ( `id` int NOT NULL AUTO_INCREMENT, `name` varchar(50) NOT NULL COMMENT '景点名称', `location` varchar(100) NOT NULL COMMENT '地理位置', `description` text COMMENT '景点描述', `price` decimal(10,2) DEFAULT '0.00' COMMENT '门票价格', `open_time` varchar(50) DEFAULT NULL COMMENT '开放时间', `cover_img` varchar(255) DEFAULT NULL COMMENT '封面图URL', `status` tinyint DEFAULT '1' COMMENT '状态(0-下架 1-上架)', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

后端分页查询实现（Java）：

@GetMapping("/list") public Result list(@RequestParam Map<String,Object> params){ QueryWrapper<ScenicSpot> wrapper = new QueryWrapper<>(); if(params.containsKey("name")){ wrapper.like("name", params.get("name")); } IPage<ScenicSpot> page = scenicSpotService.page( new Page<>(Integer.parseInt(params.get("page").toString()), Integer.parseInt(params.get("limit").toString())), wrapper ); return Result.ok().data("data",page); }

3.2 订单支付系统

支付流程设计：

用户选择景点 -> 生成预订单
调用支付接口（模拟）-> 更新订单状态
发送电子票到用户邮箱

关键状态机设计：

public enum OrderStatus { UNPAID(0, "待支付"), PAID(1, "已支付"), USED(2, "已使用"), REFUNDING(3, "退款中"), REFUNDED(4, "已退款"), CANCELLED(5, "已取消"); }

4. 部署与调试技巧

4.1 开发环境搭建

推荐工具组合：

后端：IntelliJ IDEA + Lombok插件
前端：VS Code + Volar插件
数据库：Navicat Premium
接口测试：Postman

常见问题解决方案：

前端跨域问题：在SpringBoot配置类中添加：

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("*") .maxAge(3600); } }

MySQL连接失败检查：

确认服务是否启动：sudo systemctl status mysql
检查用户权限：GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'password'
验证端口是否开放：netstat -tulnp | grep 3306

4.2 生产环境部署

Docker Compose部署示例（docker-compose.yml）：

version: '3' services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: 123456 ports: - "3306:3306" volumes: - ./mysql/data:/var/lib/mysql backend: build: ./backend ports: - "8080:8080" depends_on: - mysql frontend: build: ./frontend ports: - "80:80"

5. 毕设优化建议

5.1 功能扩展方向

智能推荐系统：

基于用户浏览历史的协同过滤
使用SpringBoot整合Mahout实现

实时评论功能：

WebSocket实现即时消息推送
敏感词过滤算法集成

数据可视化：

ECharts展示旅游热力图
用户行为分析仪表盘

5.2 论文写作要点

技术章节建议结构：

系统需求分析（用例图+流程图）
数据库设计（ER图+表结构说明）
核心算法实现（如推荐算法）
系统测试方案（单元测试+压力测试）

性能优化指标示例：

// 使用Redis缓存景点数据 @Cacheable(value = "scenic", key = "#id") public ScenicSpot getById(Integer id) { return baseMapper.selectById(id); }

6. 避坑指南

版本兼容性问题：

SpringBoot 2.7.x需要JDK11+
Vue 3.x需要Node.js 14+

高频Bug解决方案：

前端路由刷新404：配置Nginx的try_files

location / { try_files $uri $uri/ /index.html; }

MyBatis Plus分页失效：添加配置类

@Configuration public class MyBatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor()); return interceptor; } }

性能优化技巧：

启用Gzip压缩（前端vue.config.js）

const CompressionPlugin = require('compression-webpack-plugin') configureWebpack: { plugins: [new CompressionPlugin()] }

数据库连接池配置（application.yml）

spring: datasource: hikari: maximum-pool-size: 20 connection-timeout: 30000

这个项目最让我惊喜的是Vue 3的Composition API带来的开发效率提升，配合SpringBoot的自动配置机制，从零搭建到基本功能可用只用了72小时。建议初学者先重点理解前后端数据交互流程（特别是axios拦截器的使用），再逐步深入各个业务模块的实现细节。

SpringBoot+Vue全栈旅游平台开发实战指南