SpringBoot+Vue3构建个性化电影推荐系统全栈实践-代码聚汇网

SpringBoot+Vue3构建个性化电影推荐系统全栈实践

阿米的柴火饭

1. 项目背景与技术选型

个性化电影推荐系统是当前互联网应用中非常典型的场景，它结合了内容管理和智能推荐两大核心功能。这个基于Java SpringBoot+Vue3+MyBatis的全栈项目，采用了前后端分离架构，后端使用SpringBoot框架提供RESTful API，前端使用Vue3构建用户界面，数据持久层采用MyBatis操作MySQL数据库。

为什么选择这套技术栈？SpringBoot的自动配置和起步依赖让后端开发变得极其高效，Vue3的Composition API和响应式系统让前端开发更加灵活，MyBatis作为轻量级ORM框架，在SQL可控性和开发效率之间取得了很好的平衡。MySQL作为关系型数据库，在中小型项目中表现稳定可靠。

提示：在实际项目开发中，SpringBoot 2.7.x版本与JDK 17是最佳搭配，可以避免"源发行版17需要目标发行版17"这类版本不匹配的警告。

2. 系统架构设计

2.1 前后端分离架构

系统采用经典的前后端分离架构：

前端：Vue3 + Vite构建工具 + Element Plus组件库
后端：SpringBoot 2.7.x + MyBatis + MySQL 8.0
通信：RESTful API + JWT认证

这种架构的优势在于：

前后端可以并行开发，提高开发效率
前端可以独立部署，减轻服务器压力
后端API可以被多种客户端复用

2.2 数据库设计

核心数据表包括：

用户表(user)：存储用户基本信息
电影表(movie)：存储电影元数据
评分表(rating)：记录用户对电影的评分
标签表(tag)：用户为电影添加的标签
推荐表(recommendation)：存储推荐结果

sql复制CREATE TABLE `user` (
  `id` int NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) NOT NULL,
  `email` varchar(100) DEFAULT NULL,
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username_UNIQUE` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3. 核心功能实现

3.1 用户认证模块

采用JWT(JSON Web Token)实现无状态认证：

用户登录成功后，后端生成JWT token返回给前端
前端将token存储在localStorage中
后续请求都在Authorization头中携带token
后端通过拦截器验证token有效性

java复制// SpringBoot中的JWT配置示例
@Configuration
public class JwtConfig {
    @Bean
    public JwtFilter jwtFilter() {
        return new JwtFilter();
    }
}

public class JwtFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, 
            HttpServletResponse response, FilterChain filterChain) 
            throws ServletException, IOException {
        // 验证JWT token逻辑
    }
}

3.2 电影推荐算法

系统实现了两种推荐方式：

基于内容的推荐：分析用户历史评分，推荐相似电影
协同过滤推荐：找到相似用户群体，推荐他们喜欢而当前用户未看过的电影

java复制// 协同过滤推荐算法示例
public List<Movie> collaborativeFiltering(int userId, int topN) {
    // 1. 找到与目标用户相似的用户群体
    List<SimilarUser> similarUsers = findSimilarUsers(userId);
    
    // 2. 获取这些用户喜欢而目标用户未看过的电影
    List<CandidateMovie> candidates = getCandidateMovies(userId, similarUsers);
    
    // 3. 计算推荐分数并排序
    return calculateAndSort(candidates, topN);
}

4. 前后端交互实现

4.1 API接口设计

后端提供的主要API包括：

用户认证：/api/auth/login, /api/auth/register
电影管理：/api/movies, /api/movies/
评分管理：/api/ratings
推荐结果：/api/recommendations

使用Swagger生成API文档：

java复制@Configuration
@EnableSwagger2
public class SwaggerConfig {
    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.example.movie"))
                .paths(PathSelectors.any())
                .build();
    }
}

4.2 Vue3前端实现

前端使用Vue3的Composition API组织代码：

javascript复制// 电影列表组件示例
<script setup>
import { ref, onMounted } from 'vue'
import { getMovies } from '@/api/movie'

const movies = ref([])
const loading = ref(false)

onMounted(async () => {
  loading.value = true
  try {
    const res = await getMovies()
    movies.value = res.data
  } finally {
    loading.value = false
  }
})
</script>

5. 项目部署与优化

5.1 后端部署

使用SpringBoot内嵌Tomcat服务器，可以通过以下命令打包和运行：

bash复制# 打包
mvn clean package -DskipTests

# 运行
java -jar target/movie-recommendation-0.0.1-SNAPSHOT.jar

5.2 前端部署

使用Vite构建工具优化前端资源：

bash复制# 安装依赖
npm install

# 开发模式运行
npm run dev

# 生产环境构建
npm run build

5.3 性能优化建议

数据库层面：
- 为常用查询字段添加索引
- 使用连接池管理数据库连接
- 对大表考虑分库分表
缓存层面：
- 使用Redis缓存热门电影和推荐结果
- 实现多级缓存策略
算法层面：
- 离线计算推荐结果，减少实时计算压力
- 使用更高效的相似度计算算法

6. 常见问题与解决方案

6.1 MyBatis使用中的坑

实体类属性与数据库字段映射问题：
- 使用@Results注解明确指定映射关系
- 或者在application.yml中配置map-underscore-to-camel-case: true
动态SQL编写：
- 使用标签避免WHERE关键字问题
- 使用标签实现条件查询

xml复制<select id="findMovies" resultType="Movie">
  SELECT * FROM movie
  <where>
    <if test="title != null">
      AND title LIKE CONCAT('%', #{title}, '%')
    </if>
    <if test="genre != null">
      AND genre = #{genre}
    </if>
  </where>
</select>

6.2 Vue3组件通信

父子组件通信：
- 父传子：使用props
- 子传父：使用emits
非父子组件通信：
- 使用provide/inject
- 使用Vuex/Pinia状态管理

javascript复制// 使用Pinia管理全局状态
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    currentUser: null,
    isAuthenticated: false
  }),
  actions: {
    login(user) {
      this.currentUser = user
      this.isAuthenticated = true
    }
  }
})

7. 项目扩展方向

增加社交功能：
- 用户关注
- 电影评论和讨论
增强推荐算法：
- 引入深度学习模型
- 实时更新用户画像
多平台支持：
- 开发移动端APP
- 支持微信小程序
数据分析：
- 用户行为分析
- 推荐效果评估

在实际开发中，我发现SpringBoot与Vue3的配合非常顺畅，特别是使用axios处理HTTP请求时。MyBatis的灵活性让复杂SQL查询变得简单，但需要注意避免N+1查询问题。对于个性化推荐系统，冷启动问题是一个挑战，可以通过混合推荐策略（如热门电影+个性化推荐）来缓解。