SpringBoot3+Vue3全栈旅游推荐系统开发实践-开发者社区

1. 项目概述：SpringBoot3+Vue3全栈旅游推荐系统

这个毕业设计项目采用SpringBoot3和Vue3技术栈构建了一个完整的旅游景点推荐系统。作为全栈开发的教学案例，它不仅覆盖了前后端分离架构的核心技术点，还整合了旅游行业的业务场景需求。我在实际开发中发现，这类系统特别适合作为计算机相关专业的毕业设计选题——既有足够的技术深度展示能力，又具备清晰的业务逻辑。

系统采用经典的三层架构：Vue3前端负责用户交互界面，SpringBoot3后端处理业务逻辑和数据处理，MySQL数据库持久化存储。这种架构模式在当前企业级应用中非常普遍，学生通过这个项目可以掌握现代Web开发的标准工作流程。特别值得一提的是，我们使用了最新的技术版本（SpringBoot3和Vue3），确保学习者接触到最前沿的开发工具和理念。

2. 技术选型与架构设计

2.1 前端技术栈解析

Vue3作为前端框架的核心，带来了Composition API等重大改进。在这个项目中，我们主要使用了以下技术组合：

Vue3 + Vite：极速的开发体验和构建速度
Element Plus：UI组件库，快速搭建管理后台界面
Axios：处理HTTP请求，与后端API交互
Vue Router：实现前端路由管理
Pinia：状态管理库，替代传统的Vuex

// 典型API请求示例 import axios from 'axios'; const getScenicSpots = async (params) => { try { const response = await axios.get('/api/scenic-spots', { params }); return response.data; } catch (error) { console.error('获取景点数据失败:', error); throw error; } };

提示：Vue3的setup语法糖可以大幅减少样板代码，建议在项目中全面采用

2.2 后端技术栈详解

SpringBoot3后端采用了以下技术组合：

Spring Boot 3.x：基础框架
Spring Security：认证与授权
MyBatis-Plus：数据库操作
Redis：缓存热门景点数据
MinIO：图片等文件存储
Swagger：API文档生成

// 典型的Controller示例 @RestController @RequestMapping("/api/scenic-spots") public class ScenicSpotController { @Autowired private ScenicSpotService spotService; @GetMapping public Result<List<ScenicSpot>> listSpots( @RequestParam(required = false) String keyword, @RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size) { return Result.success(spotService.querySpots(keyword, page, size)); } }

2.3 数据库设计要点

数据库设计遵循了旅游行业的业务特点，主要包含以下核心表：

用户表(user)：存储用户基本信息
景点表(scenic_spot)：景点详细信息
评论表(comment)：用户评价
收藏表(favorite)：用户收藏记录
推荐表(recommendation)：个性化推荐数据

CREATE TABLE `scenic_spot` ( `id` bigint NOT NULL AUTO_INCREMENT, `name` varchar(100) NOT NULL COMMENT '景点名称', `location` varchar(255) NOT NULL COMMENT '地理位置', `description` text COMMENT '景点描述', `image_url` varchar(255) COMMENT '封面图片URL', `rating` decimal(3,1) DEFAULT 0.0 COMMENT '评分', `tags` varchar(255) COMMENT '标签，逗号分隔', `created_at` datetime DEFAULT CURRENT_TIMESTAMP, `updated_at` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`), FULLTEXT KEY `idx_search` (`name`,`description`,`tags`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

3. 核心功能实现细节

3.1 景点推荐算法实现

系统实现了基于协同过滤和内容推荐的混合推荐算法。对于登录用户，会根据其历史行为（浏览、收藏、评分）生成个性化推荐；对于未登录用户，则展示热门景点和随机推荐。

public List<ScenicSpot> recommendSpots(Long userId) { // 1. 获取用户偏好标签 Set<String> preferredTags = getUserPreferredTags(userId); // 2. 基于标签的内容推荐 List<ScenicSpot> contentBased = spotMapper.selectByTags(preferredTags, 10); // 3. 基于用户行为的协同过滤推荐 List<ScenicSpot> cfBased = cfRecommender.recommend(userId, 5); // 4. 热门景点补充 List<ScenicSpot> hotSpots = spotMapper.selectHotSpots(5); // 合并并去重 return mergeAndDeduplicate(contentBased, cfBased, hotSpots); }

3.2 前后端交互设计

API设计遵循RESTful规范，同时考虑了以下安全措施：

JWT认证
参数校验
防XSS攻击
接口限流
敏感数据脱敏

// 前端API封装示例 const api = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000, headers: { 'Content-Type': 'application/json' } }); // 请求拦截器 - 添加Token api.interceptors.request.use(config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); // 响应拦截器 - 统一错误处理 api.interceptors.response.use( response => response.data, error => { if (error.response?.status === 401) { router.push('/login'); } return Promise.reject(error); } );

3.3 管理后台功能实现

管理后台提供了完整的CRUD功能，包括：

景点信息管理
用户管理
评论审核
数据统计
系统配置

<template> <el-table :data="spots" style="width: 100%"> <el-table-column prop="name" label="景点名称" width="180" /> <el-table-column prop="location" label="位置" width="180" /> <el-table-column prop="rating" label="评分" sortable /> <el-table-column label="操作"> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button> </template> </el-table-column> </el-table> </template> <script setup> import { ref, onMounted } from 'vue'; import { getScenicSpots, deleteScenicSpot } from '@/api/scenicSpot'; const spots = ref([]); const fetchData = async () => { spots.value = await getScenicSpots(); }; const handleEdit = (row) => { // 跳转到编辑页面 }; const handleDelete = async (row) => { await deleteScenicSpot(row.id); await fetchData(); }; onMounted(fetchData); </script>

4. 开发环境搭建与项目部署

4.1 本地开发环境配置

前端开发环境：

Node.js 16+
VSCode + Volar插件
Chrome浏览器 + Vue Devtools

后端开发环境：

JDK 17+
IntelliJ IDEA
MySQL 8.0+
Redis

# 前端项目初始化 npm create vite@latest travel-recommendation --template vue cd travel-recommendation npm install npm install axios element-plus vue-router pinia # 后端项目初始化 使用Spring Initializr创建项目，选择： - Spring Boot 3.x - Java 17 - 依赖：Web, Security, MyBatis, MySQL, Redis

4.2 生产环境部署方案

推荐使用Docker Compose进行容器化部署：

version: '3' services: backend: build: ./backend ports: - "8080:8080" environment: - SPRING_PROFILES_ACTIVE=prod - DB_URL=jdbc:mysql://mysql:3306/travel - REDIS_HOST=redis depends_on: - mysql - redis frontend: build: ./frontend ports: - "80:80" depends_on: - backend mysql: image: mysql:8.0 environment: - MYSQL_ROOT_PASSWORD=root - MYSQL_DATABASE=travel volumes: - mysql_data:/var/lib/mysql redis: image: redis:alpine volumes: mysql_data:

4.3 常见部署问题解决

跨域问题：
- 确保后端配置了正确的CORS
- 开发环境可配置Vite代理

// vite.config.js export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } } })

静态资源404：
- 前端构建后需要正确配置Nginx
- Vue Router使用history模式时需要配置fallback

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

数据库连接失败：
- 检查数据库服务是否启动
- 确认连接字符串和权限配置正确
- 生产环境注意网络策略和防火墙设置

5. 毕业设计扩展建议

5.1 功能扩展方向

社交功能：
- 用户间关注
- 游记分享
- 旅行计划协作
商业化功能：
- 门票预订
- 周边商品电商
- 广告系统
技术增强：
- 引入Elasticsearch实现全文搜索
- 使用WebSocket实现实时通知
- 接入第三方地图API

5.2 论文写作要点

技术选型分析：
- 对比Vue3与React/Angular
- 分析SpringBoot的优势
- 数据库选型考量
系统架构图：
- 绘制清晰的架构图
- 说明各组件交互关系
- 标注关键技术点
性能优化措施：
- 缓存策略
- 数据库优化
- 前端懒加载

5.3 答辩准备建议

演示重点：
- 核心功能流程
- 特色功能展示
- 技术难点解决方案
常见问题准备：
- 为什么选择这些技术？
- 系统有什么创新点？
- 遇到的最大挑战是什么？
代码展示技巧：
- 准备关键代码片段
- 展示架构设计亮点
- 演示测试用例

在实际开发过程中，我发现最大的挑战不在于具体功能的实现，而在于如何平衡毕业设计的时间投入和功能完整性。建议学弟学妹们采用MVP（最小可行产品）策略，先完成核心功能链路的闭环，再逐步添加扩展功能。这样即使时间有限，也能保证有一个可演示的完整系统。

SpringBoot3+Vue3全栈旅游推荐系统开发实践