SpringBoot+Vue3+MyBatis构建美食推荐系统实践-平芜编程栈

1. 项目概述

这个基于Java SpringBoot+Vue3+MyBatis的美食信息推荐系统，是一个典型的前后端分离架构项目。系统通过整合MySQL数据库，实现了从数据存储到前端展示的完整业务流程。作为一名长期从事企业级应用开发的工程师，我认为这种技术组合在当前Web开发领域具有很高的实用价值。

系统核心功能包括美食信息管理、用户偏好分析、智能推荐算法等模块。前端采用Vue3框架构建响应式界面，后端使用SpringBoot提供RESTful API，MyBatis作为ORM框架操作MySQL数据库。这种架构设计既保证了系统的可维护性，又能满足现代Web应用对性能和用户体验的要求。

2. 技术架构解析

2.1 后端技术栈

SpringBoot作为后端框架的选择非常明智。它简化了传统Spring应用的配置过程，内置Tomcat服务器，通过starter依赖可以快速集成各种常用组件。在实际开发中，我通常会这样组织项目结构：

src/main/java ├── config # 配置类 ├── controller # 控制器层 ├── service # 业务逻辑层 ├── dao # 数据访问层 ├── entity # 实体类 ├── dto # 数据传输对象 └── util # 工具类

MyBatis作为ORM框架，相比Hibernate提供了更灵活的SQL控制能力。在美食推荐系统中，复杂的查询需求很常见，MyBatis的动态SQL特性就显得尤为重要。例如：

<select id="findRecommendations" resultType="Food"> SELECT * FROM food <where> <if test="category != null"> AND category = #{category} </if> <if test="minPrice != null"> AND price >= #{minPrice} </if> </where> ORDER BY rating DESC LIMIT 10 </select>

2.2 前端技术栈

Vue3作为前端框架，相比Vue2在性能、TypeScript支持和组合式API等方面都有显著改进。在美食推荐系统中，我们可以充分利用Vue3的这些特性：

import { ref, computed } from 'vue' export default { setup() { const foods = ref([]) const searchQuery = ref('') const filteredFoods = computed(() => { return foods.value.filter(food => food.name.includes(searchQuery.value) ) }) return { foods, searchQuery, filteredFoods } } }

2.3 数据库设计

MySQL作为关系型数据库，适合存储结构化的美食信息。一个基本的美食数据表设计可能如下：

CREATE TABLE food ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100) NOT NULL, description TEXT, category VARCHAR(50), price DECIMAL(10,2), rating FLOAT, image_url VARCHAR(255), created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );

3. 核心功能实现

3.1 用户认证模块

采用JWT(JSON Web Token)实现无状态认证是当前的主流方案。Spring Security结合JWT可以这样配置：

@Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.csrf().disable() .authorizeRequests() .antMatchers("/api/auth/**").permitAll() .anyRequest().authenticated() .and() .addFilter(new JwtAuthenticationFilter(authenticationManager())) .addFilter(new JwtAuthorizationFilter(authenticationManager())); } }

3.2 推荐算法实现

基于用户行为的协同过滤是推荐系统的核心。这里给出一个简化的实现：

public List<Food> recommendFoods(Long userId) { // 获取用户历史行为 List<UserBehavior> behaviors = behaviorDao.findByUserId(userId); // 计算相似用户 Map<Long, Double> similarUsers = findSimilarUsers(behaviors); // 基于相似用户偏好推荐 return similarUsers.entrySet().stream() .sorted(Map.Entry.comparingByValue(Comparator.reverseOrder())) .limit(5) .flatMap(entry -> behaviorDao.findByUserId(entry.getKey()).stream() .map(UserBehavior::getFood) ) .distinct() .sorted(Comparator.comparing(Food::getRating).reversed()) .limit(10) .collect(Collectors.toList()); }

3.3 前后端数据交互

使用RESTful API规范设计接口，前端通过axios进行调用：

// api/food.js import axios from 'axios' export default { getRecommendations(userId) { return axios.get(`/api/food/recommend/${userId}`) }, searchFoods(params) { return axios.get('/api/food/search', { params }) } }

4. 项目部署与优化

4.1 多环境配置

SpringBoot支持通过profile区分不同环境配置：

# application-dev.yml server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/food_dev username: devuser password: devpass # application-prod.yml server: port: 80 spring: datasource: url: jdbc:mysql://prod-db:3306/food_prod username: ${DB_USER} password: ${DB_PASS}

4.2 性能优化建议

数据库优化：
- 为常用查询字段添加索引
- 使用连接池(HikariCP)
- 合理设计表结构避免冗余

缓存策略：

@Cacheable(value = "foods", key = "#id") public Food getFoodById(Long id) { return foodDao.findById(id); }

前端性能优化：
- 使用Vue的异步组件
- 实现图片懒加载
- 合理使用keep-alive缓存组件

5. 常见问题与解决方案

5.1 跨域问题

前后端分离项目常见的跨域问题可以通过配置解决：

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowedHeaders("*"); } }

5.2 MyBatis映射问题

实体类属性与数据库字段不一致时，可以通过注解或XML配置解决：

public class Food { @Column(name = "food_name") private String name; // 或者XML中： // <result column="food_name" property="name"/> }

5.3 Vue3组件通信

对于复杂的组件通信场景，可以考虑使用provide/inject：

// 父组件 import { provide } from 'vue' export default { setup() { const foodData = ref([]) provide('foodData', foodData) } } // 子组件 import { inject } from 'vue' export default { setup() { const foodData = inject('foodData') return { foodData } } }