1. 项目概述：全栈电影评论平台的技术实现
最近刚完成一个电影评论网站的全栈开发，采用当下主流的技术栈组合：SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0。这个项目特别适合想学习前后端分离开发模式的Java开发者，尤其是需要实战练习SpringBoot和Vue3协同工作的场景。系统实现了用户注册登录、电影信息管理、评分评论、个性化推荐等核心功能，我在开发过程中积累了不少前后端联调的经验和性能优化的技巧，下面就来详细拆解这个项目的技术实现。
2. 技术架构解析
2.1 后端技术选型考量
SpringBoot2作为基础框架有几个明显优势：
- 内嵌Tomcat简化部署（默认8080端口）
- 自动配置减少了XML配置（对比传统SSM）
- 完善的Starter生态（特别是spring-boot-starter-web和spring-boot-starter-test）
数据库操作选用MyBatis-Plus 3.x版本，它的Lambda表达式写法让代码更简洁：
java复制// 示例：查询评分大于4分的动作片
List<Movie> movies = movieMapper.selectList(
Wrappers.<Movie>lambdaQuery()
.gt(Movie::getRating, 4.0)
.eq(Movie::getGenre, "动作")
);
2.2 前端技术栈特点
Vue3的组合式API大幅提升了代码组织效率：
javascript复制// 电影列表组件示例
setup() {
const state = reactive({
movies: [],
loading: true
})
const fetchMovies = async () => {
const res = await axios.get('/api/movies')
state.movies = res.data
state.loading = false
}
onMounted(fetchMovies)
return { ...toRefs(state) }
}
3. 核心功能实现细节
3.1 用户认证模块
采用JWT实现无状态认证，关键配置：
yaml复制# application.yml
jwt:
secret: "movie@secret#2023"
expire: 86400 # 24小时
header: "Authorization"
安全注意事项：
- 密码必须BCrypt加密存储
- 敏感接口需添加@PreAuthorize注解
- JWT令牌需要设置合理的过期时间
3.2 电影评论功能
数据库设计要点：
sql复制CREATE TABLE `t_comment` (
`id` BIGINT PRIMARY KEY AUTO_INCREMENT,
`content` TEXT NOT NULL,
`rating` DECIMAL(2,1) CHECK (rating BETWEEN 1 AND 5),
`user_id` BIGINT NOT NULL,
`movie_id` BIGINT NOT NULL,
`create_time` DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (`user_id`) REFERENCES `t_user`(`id`),
FOREIGN KEY (`movie_id`) REFERENCES `t_movie`(`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3.3 推荐算法实现
基于用户的协同过滤简化版实现：
java复制public List<Movie> recommendMovies(Long userId) {
// 1. 找出相似用户
List<Long> similarUsers = findSimilarUsers(userId);
// 2. 获取这些用户喜欢但当前用户未看过的电影
Set<Movie> candidates = new HashSet<>();
similarUsers.forEach(su -> {
List<Movie> movies = movieMapper.selectNotWatchedMovies(userId, su);
candidates.addAll(movies);
});
// 3. 按评分排序返回
return candidates.stream()
.sorted((m1, m2) -> Double.compare(m2.getAvgRating(), m1.getAvgRating()))
.limit(10)
.collect(Collectors.toList());
}
4. 前后端交互规范
4.1 API设计原则
采用RESTful风格，部分典型接口：
| 方法 | 路径 | 描述 |
|---|---|---|
| POST | /api/auth/login | 用户登录 |
| GET | /api/movies?genre=动作 | 电影筛选 |
| POST | /api/comments | 发表评论 |
| GET | /api/users/{id}/recommend | 个性化推荐 |
4.2 跨域解决方案
SpringBoot配置类示例：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:8080")
.allowedMethods("*")
.allowCredentials(true)
.maxAge(3600);
}
}
5. 部署与性能优化
5.1 数据库优化实践
MySQL8.0特有的优化手段：
sql复制-- 使用窗口函数优化排行榜查询
SELECT
id, title, rating,
RANK() OVER (ORDER BY rating DESC) AS rank
FROM t_movie
WHERE release_year = 2023;
5.2 缓存策略设计
采用多级缓存方案：
- 本地Caffeine缓存热点数据
- Redis缓存查询结果
- MySQL查询最终回源
配置示例：
java复制@Cacheable(value = "movies", key = "#id")
public Movie getMovieById(Long id) {
return movieMapper.selectById(id);
}
6. 开发中的典型问题
6.1 前后端日期格式问题
解决方案：统一使用ISO8601格式
javascript复制// axios拦截器处理
axios.interceptors.response.use(response => {
if (response.data?.createTime) {
response.data.createTime = new Date(response.data.createTime)
}
return response
})
6.2 MyBatis-Plus分页插件配置
常见坑点：需要特别配置分页插件才会生效
java复制@Configuration
public class MyBatisPlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
}
}
7. 项目文档要点
完善的文档应包含：
- 接口文档（Swagger UI集成）
- 数据库ER图（使用PowerDesigner绘制）
- 部署手册（含Nginx配置示例）
- 代码规范说明（Checkstyle规则）
Swagger配置示例：
java复制@Bean
public Docket api() {
return new Docket(DocumentationType.SWAGGER_2)
.select()
.apis(RequestHandlerSelectors.basePackage("com.movie.web"))
.paths(PathSelectors.any())
.build();
}
在项目开发过程中，特别要注意Vue3的Composition API与SpringBoot的协同工作模式。实际编码时建议先定义好DTO格式，前后端并行开发。对于电影图片这类静态资源，推荐使用七牛云等第三方存储服务减轻服务器压力。MySQL8.0的CTE特性在复杂查询时能大幅简化SQL编写，值得重点掌握。