Published on

AI 智能学习助手系统 - 全栈开发实战详解

Authors
  • avatar
    Name
    张三
    Twitter

项目背景

在 AI 技术快速发展的今天，如何将大语言模型应用到实际学习和工作场景中？本文详细介绍我开发的AI 智能学习助手系统，一个集成了多个 AI 模型的全栈学习平台。

技术架构

整体架构设计

系统采用前后端分离 + 微服务化的架构模式：

┌─────────────────────────────────────────────────────────┐
│                     用户层 (Browser)                     │
└─────────────────────────────────────────────────────────┘
                        │
        ┌───────────────┼───────────────┐
        ▼               ▼               ▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│   vue-app    │ │  word-game   │ │    Nginx     │
│  (Vue 3)     │ │  (Vue 3)     │ │  反向代理    │
│  Port: 3000  │ │  Port: 5200  │ │              │
└──────────────┘ └──────────────┘ └──────────────┘
        │               │
        └───────┬───────┘
                ▼
    ┌────────────────────────┐
    │   aispring 后端        │
    │ (Spring Boot 3.3.5)   │
    │    Port: 5000          │
    └────────────────────────┘
                │
    ┌───────────┼───────────┐
    ▼           ▼           ▼
┌────────┐ ┌────────┐ ┌──────────┐
│ MySQL  │ │ Redis  │ │AI Services│
│主数据库 │ │缓存限流│ │DeepSeek等 │
└────────┘ └────────┘ └──────────┘

技术栈选型

后端技术栈

技术版本用途
Spring Boot3.3.5核心框架
Spring Security-安全认证
Spring Data JPA3.x数据访问
Spring AI0.8.1AI 模型集成
JWT0.12.3令牌认证
MySQL8.x主数据库
Redis7.x缓存/限流
Flyway9.x数据库迁移

前端技术栈

技术版本用途
Vue 33.4.0核心框架
Vite5.0.0构建工具
Pinia2.1.7状态管理
Vue Router-路由管理
Tailwind CSS-样式框架

核心功能实现

1. 多 AI 模型集成

系统支持多个 AI 模型提供商，通过策略模式实现灵活切换：

@Service
public class AiChatServiceImpl implements AiChatService {
    
    private final ObjectProvider<ChatClient> chatClientProvider;
    private ChatClient doubaoChatClient;      // 豆包模型
    private ChatClient deepseekChatClient;    // DeepSeek 模型
    private ChatClient deepseekReasonerClient; // DeepSeek 推理模型
    
    @Override
    public SseEmitter askStream(String prompt, String sessionId, 
                                String model, Long userId, String ipAddress) {
        SseEmitter emitter = new SseEmitter(300_000L);
        
        // 流式调用 AI
        streamingChatClient.stream(promptObj)
            .doOnNext(chatResponse -> {
                String content = chatResponse.getResult().getOutput().getContent();
                emitter.send(SseEmitter.event().data(content));
            })
            .subscribe();
        
        return emitter;
    }
}

技术亮点：

  • ✅ 支持 DeepSeek、豆包等多个模型
  • ✅ 流式响应（SSE）实时输出
  • ✅ 敏感信息自动脱敏
  • ✅ 对话历史上下文管理

2. JWT 无状态认证

基于 JWT 实现安全的认证机制：

@Component
public class JwtAuthenticationFilter extends OncePerRequestFilter {
    
    @Override
    protected void doFilterInternal(HttpServletRequest request,
                                    HttpServletResponse response,
                                    FilterChain filterChain) {
        final String authHeader = request.getHeader("Authorization");
        
        if (authHeader == null || !authHeader.startsWith("Bearer ")) {
            filterChain.doFilter(request, response);
            return;
        }
        
        final String jwt = authHeader.substring(7);
        final String userEmail = jwtUtil.extractUsername(jwt);
        
        if (userEmail != null && SecurityContextHolder.getContext().getAuthentication() == null) {
            UserDetails userDetails = userDetailsService.loadUserByUsername(userEmail);
            
            if (jwtUtil.isTokenValid(jwt, userDetails)) {
                UsernamePasswordAuthenticationToken authToken =
                    new UsernamePasswordAuthenticationToken(
                        userDetails, null, userDetails.getAuthorities()
                    );
                SecurityContextHolder.getContext().setAuthentication(authToken);
            }
        }
        
        filterChain.doFilter(request, response);
    }
}

安全特性：

  • 🔒 JWT 令牌验证
  • 🔒 RSA 前端加密传输
  • 🔒 BCrypt 密码加密存储
  • 🔒 敏感端点权限控制

3. 云盘文件管理

实现完整的文件管理系统：

@Entity
@Table(name = "user_files")
@Data
public class UserFile {
    
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    @Column(name = "file_name", nullable = false)
    private String fileName;
    
    @Column(name = "file_size", nullable = false)
    private Long fileSize;
    
    @Column(name = "file_type", length = 50)
    private String fileType;
    
    @Column(name = "storage_path", nullable = false)
    private String storagePath;
    
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "user_id")
    private User user;
    
    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "folder_id")
    private UserFolder folder;
}

功能特性：

  • 📁 文件夹层级管理
  • 📄 多格式文件支持
  • 📤 上传下载管理
  • 🔍 文件搜索功能

4. 单词消消乐游戏

独立的单词学习游戏模块：

// 游戏逻辑实现
const useGameMode = () => {
  const [words, setWords] = useState<Word[]>([]);
  const [score, setScore] = useState(0);
  const [combo, setCombo] = useState(0);
  
  const checkAnswer = (selectedWord: Word, correctMeaning: string) => {
    if (selectedWord.meaning === correctMeaning) {
      setScore(score + 10 + combo * 2);
      setCombo(combo + 1);
      return true;
    } else {
      setCombo(0);
      return false;
    }
  };
  
  return { checkAnswer, score, combo };
};

游戏特性：

  • 🎮 多种游戏模式
  • 📊 学习进度追踪
  • 🏆 连击积分系统
  • 📦 课程包管理

数据库设计

核心实体关系

┌─────────────┐     1:1      ┌─────────────┐
│    User     │─────────────▶│    Admin    │
└─────────────┘              └─────────────┘
       │
       │ 1:N
       ▼
┌─────────────┐     N:1      ┌─────────────┐
│  UserFile   │◀─────────────│  UserFolder │
└─────────────┘              └─────────────┘
       │
       │ 1:N
       ▼
┌─────────────┐
│ ChatRecord  │
└─────────────┘
       │
       │ N:1
       ▼
┌─────────────┐
│ ChatSession │
└─────────────┘

聊天记录表设计

CREATE TABLE chat_records (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    user_id BIGINT,
    session_id VARCHAR(255) NOT NULL,
    message_order INT NOT NULL,
    sender_type INT NOT NULL,  -- 1:用户，2:AI, 3:工具
    content TEXT,
    reasoning_content TEXT,    -- AI 深度思考内容
    ai_model VARCHAR(50),
    status VARCHAR(20),
    send_time DATETIME,
    INDEX idx_user_session (user_id, session_id),
    INDEX idx_session_id (session_id)
);

部署架构

Docker 容器化部署

version: '3.8'

services:
  db:
    image: mysql:8
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: aispring
    volumes:
      - mysql_data:/var/lib/mysql
  
  redis:
    image: redis:7-alpine
    ports:
      - 6379:6379
  
  aispring:
    build: ./aispring
    ports:
      - 5000:5000
    depends_on:
      - db
      - redis
    environment:
      - SPRING_PROFILES_ACTIVE=prod
  
  vue-app:
    build: ./vue-app
    ports:
      - 3000:80
    depends_on:
      - aispring

volumes:
  mysql_data:

Nginx 反向代理

server {
    listen 80;
    server_name aistudy.icu;
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    location /api/ {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
    
    location /word-game {
        proxy_pass http://localhost:5200;
    }
}

开发经验总结

技术选型心得

  1. 为什么选择 Spring Boot 3.x？

    • 要求 Java 17+，支持 Virtual Threads
    • 生态完善，文档丰富
    • Spring AI 提供统一 AI 接口

  2. 为什么选择 Vue 3？

    • Composition API 更灵活
    • TypeScript 支持更好
    • 性能优化明显

  3. 为什么用 JWT 而不是 Session？

    • 前后端分离架构
    • 支持分布式部署
    • 无状态，便于扩展

遇到的挑战

1. AI 流式响应实现

问题： 如何让 AI 的回答像打字机一样逐字显示？

解决方案： 使用 SSE（Server-Sent Events）

@Override
public SseEmitter askStream(String prompt, ...) {
    SseEmitter emitter = new SseEmitter(300_000L);
    
    streamingChatClient.stream(promptObj)
        .doOnNext(response -> {
            emitter.send(SseEmitter.event().data(response.getContent()));
        })
        .doOnError(emitter::error)
        .doOnComplete(emitter::complete)
        .subscribe();
    
    return emitter;
}

2. 多模型兼容

问题： 不同 AI 模型的 API 格式不一致？

解决方案： 使用 Spring AI 的 OpenAI 兼容接口

// 所有模型都使用统一的 ChatClient 接口
ChatClient chatClient = ChatClient.builder(chatModel).build();
String response = chatClient.prompt().user(prompt).call().content();

3. 前端状态管理

问题： 多个组件需要共享聊天状态？

解决方案： 使用 Pinia 进行全局状态管理

// stores/chat.ts
export const useChatStore = defineStore('chat', {
  state: () => ({
    sessions: [],
    currentSession: null,
    messages: [],
  }),
  
  actions: {
    addMessage(message: Message) {
      this.messages.push(message);
    },
  },
});

项目成果

功能清单

  • ✅ AI 智能对话（支持多模型）
  • ✅ 流式响应输出
  • ✅ 对话历史记录
  • ✅ 云盘文件管理
  • ✅ 文件夹层级管理
  • ✅ 单词消消乐游戏
  • ✅ 用户认证系统
  • ✅ 管理员后台
  • ✅ 响应式设计

性能指标

  • 🚀 首屏加载时间：< 2s
  • ⚡ API 响应时间：< 200ms
  • 💾 数据库查询优化：索引覆盖
  • 📦 打包体积优化：代码分割

未来规划

短期目标

  • 添加更多 AI 模型支持
  • 实现代码高亮显示
  • 优化移动端体验
  • 添加文章收藏功能

长期规划

  • 支持多人协作
  • 集成更多学习工具
  • 开发移动端 APP
  • 建立学习社区

项目地址

总结

通过开发这个 AI 智能学习助手系统，我深入掌握了：

  1. Spring Boot 3.x 的最新特性
  2. Vue 3 的 Composition API
  3. Spring AI 的大模型集成
  4. JWT 认证机制
  5. Docker 容器化部署

最重要的是，这个项目让我理解了如何将 AI 技术真正应用到实际场景中，为用户提供有价值的服务。

如果你对某个技术点感兴趣，欢迎在我的博客留言讨论！

Discuss on Twitter • View on GitHub
AI 智能学习助手系统 - 全栈开发实战详解 | AI学习笔记