SpringBoot+Vue社交平台全栈开发实战

小猪佩琪168

1. 项目背景与核心价值

这个SpringBoot社交平台项目是一个典型的全栈式开发案例，涵盖了从技术选型到部署上线的完整生命周期。作为现代Web应用的标准化实现，它采用了SpringBoot+Vue的主流技术栈，后端使用MySQL作为数据存储，前后端分离架构设计。项目特别之处在于配套了完整的论文文档和技术资料包，对于计算机专业学生和初级开发者具有很高的参考价值。

我完整走查过这套系统代码，发现它实现了社交平台的核心功能闭环：用户关系管理、内容发布与互动、消息通知系统等基础模块都具备生产级实现。数据库设计遵循了第三范式，同时针对社交场景的高并发读写做了适当的反范式优化。系统界面采用响应式布局，适配移动端和PC端的不同展示需求。

2. 技术架构解析

2.1 后端技术栈

SpringBoot 2.7.x作为基础框架，配合以下核心组件：

Spring Security实现RBAC权限控制
JWT进行无状态认证
MyBatis-Plus作为ORM层
Redis缓存热点数据
WebSocket实现实时通知
阿里云OSS存储用户上传内容

配置文件采用了多环境方案（dev/test/prod），通过application-{profile}.yml实现不同环境的参数隔离。日志系统使用Logback+SLF4J，按天滚动存储并区分ERROR/WARN/INFO级别。

2.2 前端技术方案

Vue 3组合式API开发，主要技术点包括：

Element Plus组件库构建管理后台
Vant移动端组件适配H5页面
Axios封装了带JWT验证的HTTP客户端
Vue Router实现前端路由守卫
Pinia状态管理替代传统Vuex

前端工程通过Vite构建，相比Webpack具有更快的冷启动和热更新速度。代码规范方面配置了ESLint+Prettier保证团队协作时的代码风格统一。

2.3 数据库设计要点

MySQL 8.0数据库包含28张核心表，主要表结构设计如下：

sql复制-- 用户关系表采用双向关注设计
CREATE TABLE user_relation (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  user_id BIGINT NOT NULL COMMENT '主体用户ID',
  target_id BIGINT NOT NULL COMMENT '目标用户ID',
  relation_type TINYINT NOT NULL COMMENT '1-关注 2-拉黑',
  create_time DATETIME DEFAULT CURRENT_TIMESTAMP,
  INDEX idx_user_target (user_id, target_id),
  INDEX idx_target_user (target_id, user_id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 动态内容表使用JSON存储扩展字段
CREATE TABLE post (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  user_id BIGINT NOT NULL,
  content TEXT NOT NULL,
  media_urls JSON COMMENT '多媒体资源URL数组',
  like_count INT DEFAULT 0,
  comment_count INT DEFAULT 0,
  visibility TINYINT DEFAULT 1 COMMENT '1-公开 2-粉丝可见 3-私密',
  create_time DATETIME DEFAULT CURRENT_TIMESTAMP,
  FULLTEXT INDEX ft_content (content)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3. 关键功能实现细节

3.1 用户认证流程

采用JWT+Refresh Token双令牌机制保障安全性：

登录成功返回access_token(30分钟过期)和refresh_token(7天过期)
前端在axios拦截器中自动处理token刷新
敏感操作需要二次密码验证

核心认证逻辑代码示例：

java复制@PostMapping("/login")
public Result<LoginVO> login(@Valid @RequestBody LoginDTO dto) {
    // 1. 验证账号密码
    User user = userService.verifyPassword(dto.getUsername(), dto.getPassword());
    
    // 2. 生成双token
    String accessToken = jwtUtil.generateToken(user.getId(), 30L);
    String refreshToken = jwtUtil.generateToken(user.getId(), 10080L);
    
    // 3. 保存登录记录
    userLoginService.recordLogin(user.getId(), getIpAddress());
    
    return Result.success(new LoginVO(accessToken, refreshToken));
}

3.2 动态发布与推送

采用写扩散与读扩散混合模式：

普通用户发布动态时，写入自己的内容表（写扩散）
大V用户发布时，额外推送给粉丝的收件箱（读扩散）
首页动态通过合并查询实现

java复制public void createPost(PostCreateDTO dto) {
    // 1. 保存基础内容
    Post post = new Post();
    BeanUtils.copyProperties(dto, post);
    postMapper.insert(post);
    
    // 2. 处理@提及
    mentionService.processMentions(post.getContent(), post.getId());
    
    // 3. 如果是大V则推送给粉丝
    if(userService.isPopularUser(post.getUserId())) {
        fanPushService.pushToFollowers(post);
    }
}

3.3 即时消息系统

基于WebSocket+消息队列的混合架构：

用户连接时建立WebSocket会话并订阅个人频道
服务端通过STOMP协议广播消息
离线消息存入MySQL待拉取
重要通知通过手机推送补充

前端连接示例：

javascript复制const socket = new SockJS('/ws-endpoint');
const stompClient = Stomp.over(socket);

stompClient.connect({}, (frame) => {
    stompClient.subscribe(`/user/${userId}/private`, (message) => {
        showNotification(JSON.parse(message.body));
    });
});

4. 部署与性能优化

4.1 生产环境部署方案

采用Docker Compose编排服务：

yaml复制version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PWD}
    volumes:
      - ./mysql/data:/var/lib/mysql
      - ./mysql/conf:/etc/mysql/conf.d

  redis:
    image: redis:6-alpine
    command: redis-server --requirepass ${REDIS_PWD}

  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
      - redis

Nginx配置负载均衡与静态资源缓存：

nginx复制upstream backend {
    server backend1:8080 weight=5;
    server backend2:8080;
    keepalive 32;
}

server {
    location /api/ {
        proxy_pass http://backend;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
    }
    
    location ~* \.(js|css|png)$ {
        expires 365d;
        add_header Cache-Control "public";
    }
}

4.2 性能调优实战

MySQL优化：
- 配置innodb_buffer_pool_size为物理内存的70%
- 针对社交场景优化join操作，必要时冗余字段
- 热点数据如用户关系使用Redis缓存

JVM参数：

bash复制JAVA_OPTS="-Xms1024m -Xmx1024m -XX:+UseG1GC 
           -XX:MaxGCPauseMillis=200 
           -XX:ParallelGCThreads=4"

接口优化：
- 使用@Cacheable注解缓存热点接口
- 批量查询代替循环单查
- 异步处理非核心流程（如记录浏览历史）

5. 开发避坑指南

5.1 事务处理常见问题

坑点1：Spring事务失效场景

解决方案：检查方法是否为public、是否被同类调用、是否抛出RuntimeException

坑点2：分布式事务一致性

采用最终一致性方案：本地消息表+定时任务补偿

java复制@Transactional
public void createOrder(OrderDTO dto) {
    // 1. 本地事务
    orderDao.insert(order);
    
    // 2. 发送MQ消息
    TransactionSynchronizationManager.registerSynchronization(
        new TransactionSynchronization() {
            @Override
            public void afterCommit() {
                mqProducer.send(delayedMessage);
            }
        }
    );
}

5.2 并发场景应对

典型场景：点赞计数竞争条件

优化方案1：Redis INCR原子操作
优化方案2：MySQL乐观锁

java复制public void likePost(Long postId) {
    String key = "post:like:" + postId;
    // Redis原子递增
    Long count = redisTemplate.opsForValue().increment(key);
    // 异步落库
    threadPool.execute(() -> {
        postMapper.updateLikeCount(postId, count);
    });
}