SpringBoot+Vue3新闻互动系统开发指南-育师

1. 项目概述

这个基于SpringBoot+Vue3的新闻点赞收藏评论系统，是一个典型的前后端分离架构的毕业设计项目。作为一名带过上百个毕业设计的导师，我发现这类系统特别适合计算机相关专业的学生练手——它涵盖了用户认证、内容管理、互动功能等常见业务场景，技术栈也紧跟当前企业主流需求。

系统核心功能包括：

新闻浏览与分类展示
用户注册登录与权限管理
点赞/收藏/评论等互动操作
个人中心管理收藏记录
后台新闻发布与管理

技术选型上，后端采用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.yml）：

spring: datasource: url: jdbc:mysql://localhost:3306/news_db?useSSL=false username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver jackson: date-format: yyyy-MM-dd HH:mm:ss time-zone: GMT+8 mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true

2.2 前端工程结构

Vue3项目采用Vite构建，目录结构如下：

src/ ├── api/ # 接口请求封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── composables/ # 组合式函数 ├── router/ # 路由配置 ├── stores/ # Pinia状态管理 ├── styles/ # 全局样式 ├── utils/ # 工具函数 └── views/ # 页面组件

提示：使用Pinia替代Vuex进行状态管理，其TypeScript支持更好，API也更简洁。

3. 核心功能实现

3.1 用户认证模块

采用JWT认证方案，关键实现步骤：

登录接口生成Token：

public 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-size=20 spring.datasource.hikari.connection-timeout=30000 # 开启Actuator监控 management.endpoints.web.exposure.include=health,info,metrics

4.2 前端部署优化

生产环境构建：

npm run build

Nginx配置示例：

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') ) </script>