AI摘要

本文详细介绍了一个基于Spring Boot后端和Vue.js前端的GPT AI聊天应用的完整开发流程，包括技术栈、项目架构、核心功能实现、开发环境搭建、生产环境部署等，涵盖了全栈开发的各个环节。

此内容根据文章生成，仅用于文章内容的解释与总结

前言

一个人一个下午做成的，为了应对周四的作业答辩。

🚀 项目概述

本文将详细介绍一个基于Spring Boot后端和Vue.js前端的GPT AI聊天应用的完整开发流程。该项目集成了OpenAI和阿里云通义千问两大AI平台，支持文本对话和图像生成功能，并实现了用户认证、会话管理等完整的业务功能。
体验地址：https://gpt.xuan.cyou/

技术栈

  • 后端: Spring Boot 3.5.5, Java 17, SQLite, JPA/Hibernate
  • 前端: Vue.js 3, Vite, JavaScript ES6+
  • AI集成: OpenAI GPT-4, 阿里云通义千问
  • 部署: 宝塔面板, Nginx, SSL证书

📁 项目架构

GPT-AI-Project/
├── gpt-ai-java/              # Spring Boot 后端
│   ├── src/main/java/
│   │   ├── controller/       # REST API控制器
│   │   ├── service/          # 业务逻辑层
│   │   ├── entity/           # 数据实体
│   │   ├── config/           # 配置类
│   │   └── adopter/          # AI平台适配器
│   ├── src/main/resources/
│   │   └── application.yaml  # 应用配置
│   └── pom.xml              # Maven依赖配置
└── frontend/                 # Vue.js 前端
    ├── src/
    │   ├── components/       # Vue组件
    │   ├── views/           # 页面视图
    │   ├── api/             # API调用封装
    │   └── store/           # 状态管理
    ├── public/              # 静态资源
    └── package.json         # NPM依赖配置

🔧 核心功能实现

1. 后端核心架构

1.1 多AI平台集成

项目支持OpenAI和阿里云通义千问两个AI平台，通过适配器模式实现：

// AI控制器统一入口
@RestController
@RequestMapping("/api/ai")
public class AiController {
    
    @GetMapping("/chat/text/stream")
    public SseEmitter streamChat(
        @RequestParam String platform,
        @RequestParam String model,
        @RequestParam String message
    ) {
        // 根据平台选择对应的AI服务
        if ("openai".equals(platform)) {
            return openAiController.sendTextStream(model, message);
        } else if ("ali".equals(platform)) {
            return aliAiController.sendTextStream(model, message);
        }
    }
}

1.2 流式响应实现

使用Server-Sent Events (SSE) 实现实时流式对话：

@PostMapping("/chat/text/stream")
public SseEmitter sendTextStream(String model, String message) {
    SseEmitter emitter = new SseEmitter(0L);
    
    CompletableFuture.runAsync(() -> {
        try {
            // 流式读取AI响应并实时推送
            openAIService.sendText(model, message, true, delta -> {
                emitter.send(SseEmitter.event().name("delta").data(delta));
            });
            emitter.send(SseEmitter.event().name("done").data("[DONE]"));
            emitter.complete();
        } catch (Exception ex) {
            emitter.completeWithError(ex);
        }
    });
    
    return emitter;
}

1.3 会话管理系统

实现了完整的对话历史记录功能：

@Entity
public class ConversationHistory {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String userId;
    private String sessionId;
    private String userMessage;
    private String assistantReply;
    private LocalDateTime timestamp;
    // ... getters and setters
}

1.4 跨域配置

为支持前后端分离和域名部署，配置了完整的CORS支持：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns(
                    "http://localhost:*",
                    "https://gpt.xuan.cyou"
                )
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true);
    }
}

2. 前端核心实现

2.1 API客户端封装

统一封装所有后端API调用：

// 流式聊天
export function streamChat({ platform, model, message, onDelta, onDone }) {
    const url = `/api/ai/chat/text/stream?platform=${platform}&model=${model}&message=${encodeURIComponent(message)}`;
    const eventSource = new EventSource(url);
    
    eventSource.addEventListener('delta', (event) => {
        const data = JSON.parse(event.data);
        onDelta?.(data.delta);
    });
    
    eventSource.addEventListener('done', () => {
        onDone?.();
        eventSource.close();
    });
}

// 图像生成
export async function createImage(params) {
    const response = await fetch('/api/ai/create/image', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(params)
    });
    
    return await response.json();
}

2.2 实时对话界面

Vue.js实现的流式对话体验：

<template>
  <div class="chat-container">
    <div v-for="msg in messages" :key="msg.id" class="message">
      <div class="message-content" v-html="formatMessage(msg.content)"></div>
    </div>
    <div v-if="isStreaming" class="streaming-indicator">AI正在回复...</div>
  </div>
</template>

<script>
import { streamChat } from '@/api/client.js'

export default {
  data() {
    return {
      messages: [],
      isStreaming: false,
      currentStreamingMessage: ''
    }
  },
  methods: {
    async sendMessage(content) {
      this.isStreaming = true;
      this.currentStreamingMessage = '';
      
      streamChat({
        platform: this.platform,
        model: this.model,
        message: content,
        onDelta: (delta) => {
          this.currentStreamingMessage += delta;
          // 实时更新界面
        },
        onDone: () => {
          this.isStreaming = false;
          this.messages.push({
            id: Date.now(),
            content: this.currentStreamingMessage,
            type: 'assistant'
          });
        }
      });
    }
  }
}
</script>

2.3 状态管理

使用Vuex管理应用状态：

export default createStore({
  state: {
    user: null,
    currentSession: null,
    settings: {
      platform: 'openai',
      textModel: 'gpt-4o-mini',
      imageModel: 'dall-e-3',
      backendUrl: 'http://localhost:8083'
    }
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user;
    },
    UPDATE_SETTINGS(state, settings) {
      state.settings = { ...state.settings, ...settings };
    }
  }
});

🛠️ 开发环境搭建

1. 后端开发环境

# 1. 克隆项目
git clone <repository-url>
cd gpt-ai-java

# 2. 配置application.yaml
server:
  port: 8083

spring:
  application:
    name: gpt-ai
  datasource:
    url: jdbc:sqlite:identifier.sqlite
    driver-class-name: org.sqlite.JDBC

# 3. 运行项目
mvn spring-boot:run

2. 前端开发环境

# 1. 安装依赖
cd frontend
npm install

# 2. 配置开发代理
# vite.config.js
const target = process.env.BACKEND_URL || 'http://localhost:8083'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target,
        changeOrigin: true
      }
    }
  }
})

# 3. 启动开发服务器
npm run dev

📦 生产环境部署

1. 后端打包部署

# Maven打包
mvn clean package -DskipTests

# 部署运行
java -jar target/gpt-ai-0.0.1-SNAPSHOT.jar

# 或使用systemd守护进程
sudo systemctl start gpt-ai

2. 前端构建部署

# 构建生产版本
npm run build

# 部署到服务器
# 将dist/目录下所有文件上传到 /www/wwwroot/gpt.xuan.cyou/dist/

3. Nginx配置

针对宝塔面板的完整Nginx配置：

server {
    listen 80;
    listen 443 ssl http2;
    server_name gpt.xuan.cyou;
    root /www/wwwroot/gpt.xuan.cyou/dist;
    
    # SSL配置
    ssl_certificate /www/server/panel/vhost/cert/gpt.xuan.cyou/fullchain.pem;
    ssl_certificate_key /www/server/panel/vhost/cert/gpt.xuan.cyou/privkey.pem;
    
    # API代理到后端服务
    location /api/ {
        proxy_pass http://127.0.0.1:8083;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # 支持SSE长连接
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 3600s;
        proxy_send_timeout 3600s;
    }
    
    # Vue.js SPA路由支持
    location / {
        try_files $uri $uri/ @fallback;
    }
    
    location @fallback {
        rewrite ^.*$ /index.html last;
    }
    
    # 静态资源缓存优化
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

🎯 核心功能特性

1. 多AI平台支持

  • OpenAI集成: 支持GPT-4系列模型，DALL-E图像生成
  • 阿里云集成: 支持通义千问文本对话，通义万相图像生成
  • 统一接口: 通过platform参数无缝切换不同AI服务

2. 实时流式对话

  • SSE技术: Server-Sent Events实现实时数据推送
  • 流式体验: 模拟真实对话，逐字显示AI回复
  • 异常处理: 完善的连接错误和重连机制

3. 会话管理系统

  • 历史记录: 完整保存用户对话历史
  • 会话分组: 支持多会话并行管理
  • 数据持久化: SQLite数据库存储

4. 图像生成功能

  • 多平台支持: OpenAI DALL-E和阿里云通义万相
  • 参数配置: 支持不同尺寸和风格设置
  • 结果展示: 优雅的图像展示和下载功能

5. 用户认证系统

  • 登录注册: 基本的用户认证功能
  • 权限控制: 用户数据隔离和访问控制
  • 设置管理: 个性化配置保存

🔍 技术亮点

1. 前后端分离架构

  • RESTful API: 标准的REST接口设计
  • 跨域处理: 完善的CORS配置支持
  • 代理配置: 开发环境和生产环境的统一代理方案

2. 响应式设计

  • 移动适配: 支持手机、平板等多种设备
  • 现代UI: 简洁美观的用户界面
  • 交互体验: 流畅的动画和反馈效果

3. 性能优化

  • 静态资源缓存: 合理的缓存策略
  • Gzip压缩: 减少传输数据量
  • 懒加载: 按需加载提升首屏速度

4. 部署友好

  • 容器化支持: 可轻松容器化部署
  • 宝塔面板: 兼容主流服务器管理面板
  • SSL支持: HTTPS安全访问

🚨 常见问题解决

1. API代理404错误

问题: 前端API请求返回404错误
解决: 确保Nginx配置了正确的API代理规则

2. SSE连接中断

问题: 流式对话中途断开
解决: 配置Nginx的proxy_read_timeout参数

3. 跨域问题

问题: 浏览器CORS错误
解决: 检查后端CORS配置和Nginx代理头设置

4. 静态资源404

问题: Vue路由刷新后404
解决: 配置Nginx的try_files规则

📈 未来扩展方向

1. 功能增强

  • 语音对话: 集成语音识别和合成
  • 文件上传: 支持文档分析功能
  • 插件系统: 可扩展的功能插件架构

2. 技术优化

  • 缓存机制: Redis缓存提升性能
  • 消息队列: 异步处理大量请求
  • 微服务架构: 拆分为多个独立服务

3. 运维改进

  • 监控告警: 完善的系统监控
  • 日志分析: ELK日志分析栈
  • 自动部署: CI/CD持续集成部署

💡 总结

本项目展示了一个完整的现代Web应用开发流程，从技术选型、架构设计到开发实现和生产部署，涵盖了全栈开发的各个环节。通过Spring Boot和Vue.js的组合，实现了高效、可维护的前后端分离架构。

项目的核心价值在于：

  • 技术栈现代化: 采用最新的技术栈和最佳实践
  • 功能完整性: 涵盖了AI对话应用的核心功能
  • 部署友好性: 支持多种部署方式和环境
  • 扩展性良好: 架构设计便于后续功能扩展

希望本文能为想要开发类似AI应用的开发者提供有价值的参考和指导。
Gitee仓库：
前端 - https://gitee.com/wx6765/chatgpt_frontend
后端 - https://gitee.com/wx6765/chatgpt_backend

本文基于实际项目开发经验总结，代码示例均来自真实项目实现。

最后修改：2025 年 09 月 23 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏
END
本文作者：
 文章标题：基于Spring Boot + Vue.js的GPT AI聊天应用：从开发到部署的完整实践
 本文地址：https://blog.ybyq.wang/archives/1154.html
 版权说明：若无注明，本文皆Xuan's blog原创，转载请保留文章出处。