1. 项目概述
这个全栈电影评论网站项目采用SpringBoot+Vue+MySQL技术栈实现，是一套开箱即用的完整解决方案。作为从业十年的全栈开发者，我经常遇到需要快速搭建内容管理系统的需求，而这类影评平台恰好涵盖了用户管理、内容审核、数据统计等典型业务场景。整套代码经过生产环境验证，包含前后端分离架构、RESTful API设计、JWT鉴权等企业级应用的核心实现。
提示：项目已配置好Maven和npm依赖，导入IDE后只需修改数据库连接即可运行，适合作为全栈学习模板或二次开发基础。
2. 技术架构解析
2.1 后端SpringBoot设计
采用分层架构设计：
- Controller层：处理HTTP请求，返回JSON数据
java复制@RestController
@RequestMapping("/api/reviews")
public class ReviewController {
@Autowired
private ReviewService reviewService;
@GetMapping("/movie/{id}")
public ResponseEntity<List<ReviewVO>> getByMovieId(@PathVariable Long id) {
return ResponseEntity.ok(reviewService.getByMovieId(id));
}
}
- Service层：业务逻辑实现，包含事务管理
- DAO层：MyBatis-Plus实现数据库操作
- 实体类：基于Lombok简化代码
特色功能实现：
- 基于RBAC的权限控制
- 阿里云OSS文件上传集成
- 基于Redis的缓存热点数据
- 定时任务统计每日新增评论
2.2 前端Vue工程结构
code复制src/
├── api/ # 接口封装
├── assets/ # 静态资源
├── components/ # 通用组件
│ ├── StarRating.vue # 星级评分组件
│ └── Pagination.vue # 分页组件
├── router/ # 路由配置
├── store/ # Vuex状态管理
├── utils/ # 工具类
└── views/ # 页面组件
├── user/ # 用户中心
└── movie/ # 电影详情页
关键技术点：
- Axios拦截器实现JWT自动刷新
- Vuex持久化存储用户状态
- 动态路由权限过滤
- Element-UI组件二次封装
3. 数据库设计
3.1 核心表结构
sql复制CREATE TABLE `movie` (
`id` bigint NOT NULL AUTO_INCREMENT,
`title` varchar(100) NOT NULL COMMENT '电影名称',
`cover_url` varchar(255) COMMENT '封面图URL',
`release_year` int COMMENT '上映年份',
`avg_rating` decimal(3,1) DEFAULT 0.0 COMMENT '平均评分',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
CREATE TABLE `review` (
`id` bigint NOT NULL AUTO_INCREMENT,
`content` text NOT NULL COMMENT '评论内容',
`rating` tinyint NOT NULL COMMENT '评分1-5',
`user_id` bigint NOT NULL,
`movie_id` bigint NOT NULL,
`status` tinyint DEFAULT 1 COMMENT '审核状态',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_movie` (`movie_id`),
KEY `idx_user` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3.2 性能优化方案
-
为高频查询字段建立索引：
- 电影表的title字段添加全文索引
- 评论表的create_time建立时间索引
-
大文本字段处理：
- 超过500字的评论内容建议存储到MongoDB
- 使用MySQL的TEXT类型时注意行溢出问题
-
统计查询优化：
- 电影平均评分采用定时计算+缓存策略
- 热门电影列表使用Redis有序集合存储
4. 系统功能实现
4.1 核心业务流程
电影评论发布流程：
- 前端提交表单数据（含HTML过滤）
- 后端进行内容安全审核（调用第三方API）
- 保存到数据库并更新电影评分
- 异步通知关注该电影的用户
- 返回操作结果给前端
关键技术实现：
java复制// 评论审核服务
public class ReviewAuditService {
private final ContentModerationClient moderationClient;
@Async
public void auditReview(Review review) {
ModerationResult result = moderationClient.checkText(
review.getContent());
review.setStatus(result.isPass() ? 1 : 2);
reviewRepository.updateById(review);
if(result.isPass()) {
eventPublisher.publishEvent(
new NewReviewEvent(review));
}
}
}
4.2 管理后台功能
-
内容管理面板：
- 支持按电影/用户筛选评论
- 批量审核/删除操作
- 敏感词过滤设置
-
数据统计模块：
- 每日新增用户/评论图表
- 电影评分分布分析
- 用户活跃度热力图
-
系统配置中心：
- 邮件通知模板管理
- 缓存策略配置
- API访问日志查询
5. 部署与运维
5.1 生产环境部署
后端部署步骤：
- 打包SpringBoot应用：
bash复制mvn clean package -DskipTests
- 配置application-prod.yml：
yaml复制spring:
datasource:
url: jdbc:mysql://cluster-address:3306/movie_db?useSSL=false
username: prod_user
password: ${DB_PASSWORD}
redis:
cluster:
nodes: redis-node1:6379,redis-node2:6379
- 使用Docker运行：
dockerfile复制FROM openjdk:11-jre
COPY target/movie-review.jar /app.jar
ENTRYPOINT ["java","-jar","/app.jar","--spring.profiles.active=prod"]
前端部署方案：
- 修改API基础地址：
js复制// .env.production
VUE_APP_API_BASE_URL=https://api.yourdomain.com
- 构建生产包：
bash复制npm run build
- Nginx配置示例：
nginx复制server {
listen 80;
server_name yourdomain.com;
location / {
root /var/www/movie-review;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend-server;
}
}
5.2 监控与日志
-
SpringBoot监控方案：
- 集成Actuator暴露健康检查端点
- Prometheus采集JVM指标
- Grafana展示性能仪表盘
-
前端性能监控：
- 使用Sentry捕获前端错误
- 添加Google Analytics跟踪PV/UV
- 关键操作埋点统计
-
日志收集架构：
- 后端日志通过Logstash导入ELK
- 前端错误日志上报到日志服务器
- 重要操作记录审计日志
6. 常见问题解决方案
6.1 开发环境问题
问题1：前端跨域请求失败
- 解决方案：配置开发代理
js复制// vue.config.js
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
问题2：MyBatis-Plus主键冲突
- 原因：雪花ID生成器WorkerID未配置
- 解决：在application.yml中添加：
yaml复制mybatis-plus:
global-config:
worker-id: 1
datacenter-id: 1
6.2 生产环境问题
问题3：数据库连接池耗尽
- 现象：出现"Timeout waiting for connection"错误
- 解决方案：
- 调整连接池参数：
yaml复制spring: datasource: hikari: maximum-pool-size: 20 connection-timeout: 30000- 添加连接泄露检测：
java复制@Bean public HikariConfig hikariConfig() { HikariConfig config = new HikariConfig(); config.setLeakDetectionThreshold(60000); return config; }
问题4：Vue路由刷新404
- 原因：History模式需要服务器支持
- 解决：Nginx添加重定向规则：
nginx复制location / {
try_files $uri $uri/ /index.html;
}
7. 扩展开发建议
7.1 功能增强方向
-
社交化功能：
- 用户关注与私信系统
- 评论点赞/回复互动
- 电影收藏夹共享
-
推荐系统集成：
- 基于用户行为的协同过滤
- 电影相似度推荐
- 热门榜单算法优化
-
多端适配：
- 开发微信小程序版本
- 适配移动端PWA应用
- 管理后台响应式布局优化
7.2 性能优化建议
-
前端优化：
- 组件异步加载
- 图片懒加载实现
- API请求防抖处理
-
后端优化：
- 引入二级缓存Caffeine
- 分库分表方案设计
- 评论列表游标分页优化
-
架构升级：
- 微服务化改造
- 引入消息队列削峰
- 分布式事务解决方案
这套系统在实际开发中，我发现最值得分享的经验是：在初期就要设计好扩展性架构，比如我们采用的可插拔审核模块设计，后期接入新的审核服务只需实现统一接口即可。另外，前端组件化的程度直接影响迭代效率，建议将评分、分页等高频组件彻底解耦