1. 项目概述这个基于SpringBootVue3的新闻点赞收藏评论系统是一个典型的前后端分离架构的毕业设计项目。作为一名带过上百个毕业设计的导师我发现这类系统特别适合计算机相关专业的学生练手——它涵盖了用户认证、内容管理、互动功能等常见业务场景技术栈也紧跟当前企业主流需求。系统核心功能包括新闻浏览与分类展示用户注册登录与权限管理点赞/收藏/评论等互动操作个人中心管理收藏记录后台新闻发布与管理技术选型上后端采用SpringBoot 2.7.x MyBatis组合前端使用Vue3 Element Plus数据库选用MySQL 8.0。这套技术栈的优势在于SpringBoot简化了传统SSM框架的配置复杂度Vue3的Composition API比Options API更灵活Element Plus对移动端适配良好前后端完全解耦适合团队协作开发2. 技术架构设计2.1 后端架构解析后端采用经典的三层架构Controller层RESTful API接口 │ Service层业务逻辑处理 │ Mapper层数据库操作关键配置示例application.ymlspring: datasource: url: jdbc:mysql://localhost:3306/news_db?useSSLfalse username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT8 mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true2.2 前端工程结构Vue3项目采用Vite构建目录结构如下src/ ├── api/ # 接口请求封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── composables/ # 组合式函数 ├── router/ # 路由配置 ├── stores/ # Pinia状态管理 ├── styles/ # 全局样式 ├── utils/ # 工具函数 └── views/ # 页面组件提示使用Pinia替代Vuex进行状态管理其TypeScript支持更好API也更简洁。3. 核心功能实现3.1 用户认证模块采用JWT认证方案关键实现步骤登录接口生成Tokenpublic String generateToken(User user) { return Jwts.builder() .setSubject(user.getUsername()) .setExpiration(new Date(System.currentTimeMillis() EXPIRATION_TIME)) .signWith(SignatureAlgorithm.HS512, SECRET) .compact(); }Vue前端处理Token// 请求拦截器 instance.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config })3.2 新闻互动功能点赞功能的并发控制方案Transactional public void likeNews(Long newsId, Long userId) { // 检查是否已点赞 if (likeMapper.exists(userId, newsId)) { throw new BusinessException(请勿重复点赞); } // 更新点赞数乐观锁 int affected newsMapper.incrementLikes(newsId, 1); if (affected 0) { throw new ConcurrentModificationException(新闻数据已被修改); } // 记录用户行为 likeMapper.insert(new LikeRecord(userId, newsId)); }3.3 评论系统设计采用多级评论结构CREATE TABLE comments ( id BIGINT PRIMARY KEY AUTO_INCREMENT, content TEXT NOT NULL, user_id BIGINT NOT NULL, news_id BIGINT NOT NULL, parent_id BIGINT DEFAULT NULL COMMENT 回复的评论ID, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES users(id), FOREIGN KEY (news_id) REFERENCES news(id), FOREIGN KEY (parent_id) REFERENCES comments(id) );4. 项目部署指南4.1 后端部署要点打包SpringBoot应用mvn clean package -DskipTests生产环境建议配置# 设置Tomcat连接池 spring.datasource.hikari.maximum-pool-size20 spring.datasource.hikari.connection-timeout30000 # 开启Actuator监控 management.endpoints.web.exposure.includehealth,info,metrics4.2 前端部署优化生产环境构建npm run buildNginx配置示例server { listen 80; server_name news.example.com; location / { root /var/www/news-dist; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; proxy_set_header Host $host; } }5. 开发经验分享5.1 常见问题排查跨域问题解决方案Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(*) .allowedHeaders(*); } }Vue3响应式数据更新陷阱// 错误示例直接修改数组不会触发更新 state.comments.push(newComment) // 正确做法创建新引用 state.comments [...state.comments, newComment]5.2 性能优化建议后端缓存策略Cacheable(value news, key #id) public News getNewsDetail(Long id) { return newsMapper.selectById(id); }前端懒加载优化template Suspense AsyncNewsList / template #fallback LoadingSpinner / /template /Suspense /template script setup const AsyncNewsList defineAsyncComponent(() import(./components/NewsList.vue) ) /script6. 项目扩展方向实时通知功能集成WebSocket实现点赞/评论实时提醒数据分析看板使用ECharts展示新闻热度趋势内容推荐系统基于用户行为实现简单协同过滤推荐多端适配开发对应的小程序版本我在指导学生实现这类系统时发现最大的挑战不是技术实现而是如何设计良好的交互体验。比如在收藏功能中加入动画反馈能显著提升用户满意度。建议开发者多关注Ant Design等优秀组件库的交互设计细节。