Vue与Java集成人工智能客服项目（完整版）

自由的疯
66 阅读2分钟

GitHub 项目地址

您可以通过以下地址获取完整项目代码：

git clone https://github.com/18253236955/CustomerServiceAI
git clone https://github.com/18253236955/chatbot

项目结构说明

后端目录结构 (Spring Boot)

src/main/java/com/example/aics/
├── config/                  # 配置类
│   ├── SecurityConfig.java
│   └── WebConfig.java
├── controller/              # API控制器
│   ├── AuthController.java
│   └── ChatController.java
├── dto/                     # 数据传输对象
│   ├── ChatRequest.java
│   └── ChatResponse.java
├── entity/                  # 数据库实体
│   └── Message.java
├── repository/              # 数据访问层
│   └── MessageRepository.java
├── service/                 # 业务逻辑
│   ├── ChatService.java
│   └── UserService.java
├── util/                    # 工具类
│   └── JwtUtil.java
└── AicsApplication.java     # 启动类

前端目录结构 (Vue 3)

src/
├── api/                     # API接口定义
│   └── chat.js
├── assets/                  # 静态资源
├── components/              # 公共组件
│   ├── ChatWindow.vue
│   └── LoginForm.vue
├── router/                  # 路由配置
│   └── index.js
├── store/                   # Vuex状态管理
│   └── index.js
├── views/                   # 页面视图
│   ├── ChatView.vue
│   └── LoginView.vue
└── main.js                  # 入口文件

快速启动指南

1. 环境准备

# 后端环境
JDK 11+
Maven 3.6+
MySQL 8.0+

# 前端环境
Node.js 16+
npm 8+

2. 数据库配置

CREATE DATABASE aics_db;
CREATE USER 'aics_user'@'%' IDENTIFIED BY 'Aics@1234';
GRANT ALL PRIVILEGES ON aics_db.* TO 'aics_user'@'%';
FLUSH PRIVILEGES;

3. 后端配置

​​application.properties​​ 配置示例：

# 数据源配置
spring.datasource.url=jdbc:mysql://localhost:3306/aics_db
spring.datasource.username=aics_user
spring.datasource.password=Aics@1234

# JWT配置
jwt.secret=your-256-bit-secret
jwt.expiration=86400000  # 24小时

# DeepSeek API配置
deepseek.api.url=https://api.deepseek.com/v1/chat
deepseek.api.key=${DEEPSEEK_API_KEY}

4. 前端配置

​​.env.development​​ 配置示例：

VUE_APP_API_BASE_URL=http://localhost:8080
VUE_APP_WS_URL=ws://localhost:8080/ws

核心功能实现代码

1. WebSocket 实时通信（后端）

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(chatHandler(), "/ws/chat")
                .setAllowedOrigins("*")
                .addInterceptors(new HttpSessionHandshakeInterceptor());
    }

    @Bean
    public ChatHandler chatHandler() {
        return new ChatHandler();
    }
}

public class ChatHandler extends TextWebSocketHandler {
    
    @Autowired
    private ChatService chatService;

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) {
        String payload = message.getPayload();
        String reply = chatService.processMessage(payload);
        session.sendMessage(new TextMessage(reply));
    }
}

2. 前端聊天组件

<template>
  <div class="chat-container">
    <div class="message-list">
      <div v-for="(msg, index) in messages" 
           :key="index"
           :class="['message', msg.sender]">
        <div class="avatar">
          <img :src="msg.sender === 'user' ? userAvatar : botAvatar" />
        </div>
        <div class="content">
          <div class="text">{{ msg.content }}</div>
          <div class="time">{{ formatTime(msg.timestamp) }}</div>
        </div>
      </div>
    </div>
    <div class="input-area">
      <el-input
        v-model="inputMessage"
        placeholder="请输入您的问题..."
        @keyup.enter.native="sendMessage"
      >
        <template #append>
          <el-button @click="sendMessage">
            <i class="el-icon-s-promotion"></i>
          </el-button>
        </template>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputMessage: '',
      messages: [],
      ws: null
    };
  },
  mounted() {
    this.connectWebSocket();
  },
  methods: {
    connectWebSocket() {
      this.ws = new WebSocket(process.env.VUE_APP_WS_URL);
      this.ws.onmessage = (event) => {
        this.messages.push({
          sender: 'bot',
          content: event.data,
          timestamp: new Date()
        });
      };
    },
    sendMessage() {
      if (this.inputMessage.trim()) {
        const msg = {
          sender: 'user',
          content: this.inputMessage,
          timestamp: new Date()
        };
        this.messages.push(msg);
        this.ws.send(this.inputMessage);
        this.inputMessage = '';
      }
    }
  }
};
</script>

部署配置

Docker Compose 配置

version: '3'

services:
  backend:
    build: ./backend
    environment:
      - DEEPSEEK_API_KEY=your_api_key
    ports:
      - "8080:8080"
    depends_on:
      - mysql

  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend

  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: rootpass
      MYSQL_DATABASE: aics_db
      MYSQL_USER: aics_user
      MYSQL_PASSWORD: Aics@1234
    volumes:
      - mysql_data:/var/lib/mysql

volumes:
  mysql_data:

项目扩展建议

1. 知识库增强（python）

# knowledge_enhancer.py
from sentence_transformers import SentenceTransformer
import numpy as np

class KnowledgeEnhancer:
    def __init__(self):
        self.model = SentenceTransformer('paraphrase-multilingual-MiniLM-L12-v2')
        self.knowledge_base = {}
        
    def add_knowledge(self, question, answer):
        embedding = self.model.encode(question)
        self.knowledge_base[question] = {
            'answer': answer,
            'embedding': embedding
        }
    
    def find_best_match(self, query, threshold=0.8):
        query_embed = self.model.encode(query)
        best_score = 0
        best_match = None
        
        for q, data in self.knowledge_base.items():
            similarity = np.dot(query_embed, data['embedding'])
            if similarity > best_score:
                best_score = similarity
                best_match = data['answer']
        
        return best_match if best_score > threshold else None

2. 监控仪表盘

// 使用ECharts实现数据可视化
export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart);
      chart.setOption({
        title: { text: '对话统计' },
        tooltip: {},
        xAxis: {
          data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {},
        series: [{
          name: '对话量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 15]
        }]
      });
    }
  }
}

项目运行验证

测试用例（Postman Collection）

{
  "info": {
    "name": "AI Customer Service Test",
    "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
  },
  "item": [
    {
      "name": "用户登录",
      "request": {
        "method": "POST",
        "header": [],
        "body": {
          "mode": "raw",
          "raw": "{"username":"testuser","password":"Test@1234"}"
        },
        "url": "http://localhost:8080/api/auth/login"
      }
    },
    {
      "name": "发送消息",
      "request": {
        "method": "POST",
        "header": [
          {
            "key": "Authorization",
            "value": "Bearer {{token}}"
          }
        ],
        "body": {
          "mode": "raw",
          "raw": "{"message":"如何重置密码？"}"
        },
        "url": "http://localhost:8080/api/chat"
      }
    }
  ]
}

该完整项目包含以下关键特性：

  1. 前后端完整交互流程
  2. JWT认证与权限管理
  3. WebSocket实时通信
  4. 消息持久化存储
  5. 响应式前端界面
  6. Docker容器化部署
  7. 知识库增强支持
  8. 数据可视化监控

可以通过修改配置文件和补充业务逻辑，快速适配不同企业的实际需求。建议在实际部署时配置HTTPS证书，并使用Nginx进行负载均衡。

avatar
文章
阅读
粉丝