SpringBoot+Vue旅游小程序开发与AI技术融合实践-开发者社区

1. 项目概述

这个毕业设计项目是一个结合了前后端技术的旅游攻略小程序，采用SpringBoot作为后端框架，Vue.js作为前端框架，并融入了AI技术来增强用户体验。这类项目在当前旅游信息化浪潮中具有典型意义——随着移动互联网的普及，传统旅游服务正在向智能化、个性化方向转型。

我在实际开发中发现，这类系统最难的不是基础功能的实现，而是如何将AI能力自然融入旅游场景，以及如何保证前后端数据交互的高效性。系统不仅要实现常规的旅游信息展示，更要通过AI算法提供个性化推荐，这对刚接触全栈开发的学生来说是个不小的挑战。

2. 技术架构设计

2.1 后端技术选型

SpringBoot 2.7.x是后端核心框架，选择它主要基于三个考虑：

自动配置特性大幅简化了SSM框架的整合工作
内嵌Tomcat服务器便于部署
丰富的starter依赖能快速集成Redis、MyBatis等组件

数据库采用MySQL 8.0，主要存储：

用户数据（采用BCrypt加密密码）
景点基础信息
用户行为日志（用于AI训练）

特别注意：用户敏感信息如手机号需要做脱敏处理，密码必须加密存储，这是很多毕业设计容易忽视的安全问题

2.2 前端技术方案

Vue 3.x + Vant UI的组合提供了良好的开发体验：

Composition API更适合复杂逻辑组织
Vant的组件库能快速搭建移动端界面
Axios处理HTTP请求，配合拦截器实现统一错误处理

小程序端采用Uniapp框架，优势在于：

一套代码可编译到多个平台（微信/支付宝小程序）
兼容Vue语法，降低学习成本
丰富的插件市场可快速集成地图等能力

2.3 AI模块设计

AI部分采用Python开发，通过Flask提供HTTP接口，主要实现：

景点推荐算法（协同过滤+内容过滤混合模型）
评论情感分析（基于BERT微调）
智能问答（使用Rasa框架）

模型训练数据来源：

公开数据集（如携程景点评论）
系统收集的用户行为数据
人工标注的问答语料

3. 核心功能实现

3.1 用户系统实现

采用JWT认证流程：

前端提交用户名密码
后端校验后生成token（有效期2小时）
前端存储token于localStorage
每次请求携带token头

关键代码示例：

// 登录接口 @PostMapping("/login") public Result login(@RequestBody User user) { User dbUser = userService.selectByUsername(user.getUsername()); if(!BCrypt.checkpw(user.getPassword(), dbUser.getPassword())){ return Result.error("密码错误"); } String token = JwtUtil.generateToken(dbUser.getId()); return Result.success(token); }

3.2 旅游攻略模块

数据结构设计：

CREATE TABLE `scenic_spot` ( `id` int NOT NULL AUTO_INCREMENT, `name` varchar(50) NOT NULL, `location` point NOT NULL SRID 4326, `description` text, `tags` json DEFAULT NULL, `images` json DEFAULT NULL, PRIMARY KEY (`id`), SPATIAL KEY `idx_location` (`location`) ) ENGINE=InnoDB;

特色功能实现：

周边景点查询（利用MySQL空间函数ST_Distance）
攻略收藏量排行榜（Redis ZSET实现）
图片懒加载（IntersectionObserver API）

3.3 AI推荐系统

推荐算法流程图：

冷启动阶段：基于内容相似度推荐
有用户数据后：采用矩阵分解算法
实时调整：根据最新点击行为更新推荐

Python服务关键代码：

@app.route('/recommend', methods=['POST']) def recommend(): user_id = request.json['userId'] # 从Redis获取用户最近行为 history = redis_client.lrange(f"user:{user_id}:logs", 0, 9) # 混合推荐逻辑 if len(history) > 3: return hybrid_recommend(user_id) else: return content_based_recommend(user_id)

4. 开发难点与解决方案

4.1 跨域问题处理

前后端分离开发时遇到的典型问题，解决方案：

后端配置CORS

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

开发环境配置代理（vue.config.js）

devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } }

4.2 高并发场景优化

针对热门景点查询的优化措施：

多级缓存策略：
- 本地缓存（Caffeine）
- 分布式缓存（Redis）
- 数据库查询最后触发
数据库优化：
- 空间索引加速地理位置查询
- 读写分离配置
限流措施：
- 令牌桶算法控制接口调用频率

4.3 AI模型部署问题

遇到的典型问题及解决：

Python服务内存泄漏
- 使用gunicorn替代flask run
- 设置worker重启策略
模型加载慢
- 启动时预加载模型
- 使用更轻量级的模型版本
接口响应时间长
- 添加缓存层
- 使用异步处理非实时需求

5. 项目部署方案

5.1 生产环境架构

采用Docker Compose编排服务：

version: '3' services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: ${DB_PASSWORD} volumes: - ./mysql/data:/var/lib/mysql redis: image: redis:6 ports: - "6379:6379" backend: build: ./backend ports: - "8080:8080" depends_on: - mysql - redis ai-service: build: ./ai ports: - "5000:5000"

5.2 持续集成配置

GitHub Actions示例：

name: Java CI on: [push] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Set up JDK 11 uses: actions/setup-java@v2 with: java-version: '11' - name: Build with Maven run: mvn -B package --file pom.xml - name: Build Docker Image run: docker build -t travel-guide-backend .