1. 项目概述
这个基于Java SpringBoot+Vue3+MyBatis的美食信息推荐系统，是一个典型的前后端分离架构项目。系统通过整合MySQL数据库，实现了美食信息的存储、检索和个性化推荐功能。我在实际开发中发现，这种技术组合特别适合中小型互联网应用，既能保证开发效率，又能满足性能需求。
系统核心功能包括用户管理、美食信息展示、收藏评价、个性化推荐等模块。前端采用Vue3的组合式API开发，后端使用SpringBoot快速构建RESTful API，MyBatis作为ORM框架操作MySQL数据库。这种架构选择既考虑了开发效率，也兼顾了系统性能和维护成本。
2. 技术选型解析
2.1 后端技术栈
SpringBoot 2.7.x版本作为后端框架，提供了自动配置、快速启动等特性。我选择这个版本是因为它既稳定又支持最新的Spring特性。实际开发中，通过Spring Security实现了JWT认证，使用Spring Cache做数据缓存，大大提升了系统响应速度。
MyBatis-Plus 3.5.x作为持久层框架，它的代码生成器和条件构造器特别实用。我在项目中配置了多数据源，主库用于写操作，从库用于读操作，有效分担了数据库压力。MySQL 8.0作为主数据库，利用其JSON类型字段存储美食的扩展属性。
2.2 前端技术栈
Vue3的组合式API让代码组织更加灵活。我使用Element Plus作为UI框架，配合Axios处理HTTP请求。前端工程通过Vite构建，开发时热更新速度极快。项目中还集成了ECharts用于数据可视化展示，让美食数据更加直观。
特别值得一提的是，我采用了Pinia作为状态管理工具，相比Vuex更加轻量易用。路由方面使用Vue Router实现了动态路由和权限控制，确保不同用户看到不同的界面。
3. 系统架构设计
3.1 整体架构
系统采用典型的三层架构：
- 表现层：Vue3前端应用
- 业务逻辑层：SpringBoot后端服务
- 数据访问层：MyBatis+MySQL
前后端通过RESTful API交互，接口文档使用Swagger生成。我在Nginx上配置了反向代理，解决了跨域问题，同时做了静态资源缓存。
3.2 数据库设计
MySQL数据库设计了以下核心表：
- 用户表(user)：存储用户基本信息
- 美食表(food)：记录美食详情
- 收藏表(favorite)：用户收藏关系
- 评价表(review)：用户评价数据
- 推荐表(recommend)：个性化推荐结果
特别注意了索引优化，在经常查询的字段上都建立了合适索引。对于热门数据，使用Redis做了缓存，减轻数据库压力。
4. 核心功能实现
4.1 用户认证模块
采用JWT实现无状态认证，Token中携带用户基础信息和权限。前端在axios拦截器中自动添加Authorization头，后端通过Spring Security的过滤器进行校验。
密码存储使用BCrypt加密，这是我经过多次安全测试后确定的最佳方案。用户敏感操作都做了日志记录，便于后续审计。
4.2 美食推荐算法
系统实现了两种推荐方式：
- 基于内容的推荐：分析用户历史行为，推荐相似美食
- 协同过滤推荐：发现相似用户喜欢的美食
算法部分使用Java实现，通过定时任务计算推荐结果并缓存。实际运行中，这两种方式结合使用效果最好，既考虑了用户偏好，又能发现新的兴趣点。
4.3 前后端交互
定义了一套统一的API响应格式：
json复制{
"code": 200,
"message": "success",
"data": {...}
}
前端通过封装axios统一处理错误和loading状态。接口文档使用Swagger生成，并集成了Knife4j提供了更友好的UI。
5. 部署与优化
5.1 系统部署
后端使用Docker容器化部署，通过Docker Compose管理MySQL和Redis服务。前端构建静态文件后部署到Nginx。实际部署时，我配置了GitLab CI/CD实现自动化构建和部署。
负载均衡方面，使用Nginx做反向代理和负载均衡。对于高并发场景，可以考虑使用Spring Cloud微服务架构进行扩展。
5.2 性能优化
数据库层面：
- 合理设计索引
- 使用读写分离
- 热点数据缓存
代码层面：
- 使用连接池管理数据库连接
- 批量操作代替循环单条操作
- 异步处理耗时任务
前端优化：
- 组件懒加载
- 路由懒加载
- 图片懒加载和压缩
6. 常见问题解决
6.1 跨域问题
开发环境下，我在后端配置了CORS过滤器：
java复制@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
生产环境则通过Nginx反向代理解决，更加安全高效。
6.2 MyBatis缓存问题
遇到的一个典型问题是MyBatis二级缓存导致的数据不一致。解决方案是：
- 对于频繁更新的表禁用二级缓存
- 在更新操作后手动清除缓存
- 使用更专业的缓存方案如Redis
6.3 Vue3响应式问题
在使用reactive封装对象时，发现属性丢失响应性。这是因为Vue3使用Proxy实现响应式，解构会破坏代理关系。解决方案是：
- 使用ref包装基本类型
- 使用toRefs保持响应式
- 避免直接解构reactive对象
7. 项目扩展方向
这个系统还有很大的扩展空间：
- 增加社交功能：用户关注、美食分享
- 引入地图API：展示附近美食
- 接入支付系统：在线订餐
- 开发移动端APP：更好的用户体验
- 增加AI识别功能：通过图片识别美食
我在实际开发中发现，使用微服务架构可以更好地支持这些扩展。比如将推荐算法单独作为一个服务，用户系统作为另一个服务，通过Spring Cloud Gateway统一接入。