基于DeepSeek+Vue3的AI对话聊天系统开发实战

在这里插入图片描述

1. 项目概述

1.1 项目背景

随着人工智能技术的快速发展，AI对话系统在各个领域的应用越来越广泛。本文将介绍如何基于DeepSeek和Vue3开发一个AI对话聊天系统，实现智能问答、多轮对话、上下文理解等功能。

1.2 项目目标

实现一个基于DeepSeek的AI对话聊天系统。
支持多轮对话和上下文理解。
提供友好的用户界面和交互体验。
实现前后端分离架构，便于扩展和维护。

1.3 项目功能

用户注册与登录
实时对话功能
对话历史记录
上下文理解与多轮对话
对话内容导出与分享

2. 技术选型与架构设计

2.1 技术选型

前端
- Vue3：前端框架，提供响应式数据绑定和组件化开发。
- Pinia：状态管理库，替代Vuex，提供更简洁的API。
- Axios：HTTP客户端，用于与后端API进行数据交互。
- Element Plus：UI组件库，提供丰富的组件和样式。
后端
- Django：后端框架，提供ORM、路由管理、模板引擎等功能。
- Django REST Framework (DRF)：用于构建RESTful API。
- DeepSeek API：提供AI对话能力。
数据库
- PostgreSQL：关系型数据库，用于存储用户信息和对话记录。
部署
- Docker：容器化技术，简化部署流程。
- Nginx：反向代理服务器，处理静态文件请求和负载均衡。
- Gunicorn：WSGI服务器，用于部署Django应用。

3. 开发环境准备

3.1 前端环境

安装Node.js和npm

# 检查Node.js版本
node -v  # 要求16+
npm -v   # 要求7+

创建Vue3项目

npm init vue@latest ai-chat-frontend
cd ai-chat-frontend
npm install

安装必要依赖

npm install axios vue-router@4 pinia element-plus

3.2 后端环境

安装Python和虚拟环境

# 检查Python版本
python --version  # 要求3.8+

# 创建虚拟环境
python -m venv venv
source venv/bin/activate  # Linux/Mac
venv\Scripts\activate    # Windows

安装Django和DRF

pip install django djangorestframework django-cors-headers

创建Django项目

django-admin startproject ai_chat_backend
cd ai_chat_backend
python manage.py startapp chat

4. DeepSeek API集成

4.1 获取API密钥

注册DeepSeek账号并获取API密钥。
将API密钥存储在环境变量中，确保安全性。

4.2 创建API服务

在Django项目中创建API服务，用于与DeepSeek API进行交互。
使用requests库发送HTTP请求。

# chat/services.py
import os
import requests

DEEPSEEK_API_URL = "https://api.deepseek.com/v1/chat"
DEEPSEEK_API_KEY = os.getenv("DEEPSEEK_API_KEY")

def send_message_to_deepseek(message, context=None):
    headers = {
        "Authorization": f"Bearer {DEEPSEEK_API_KEY}",
        "Content-Type": "application/json"
    }
    data = {
        "message": message,
        "context": context or []
    }
    response = requests.post(DEEPSEEK_API_URL, headers=headers, json=data)
    return response.json()

4.3 创建API视图

在Django中创建API视图，处理前端请求并调用DeepSeek API。

# chat/views.py
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from .services import send_message_to_deepseek

class ChatView(APIView):
    def post(self, request):
        message = request.data.get("message")
        context = request.data.get("context", [])
        response = send_message_to_deepseek(message, context)
        return Response(response, status=status.HTTP_200_OK)

配置API路由

# chat/urls.py
from django.urls import path
from .views import ChatView

urlpatterns = [
    path("chat/", ChatView.as_view(), name="chat"),
]

5. 前端页面开发

5.1 创建聊天组件

创建聊天组件，实现消息展示和输入功能。

<template>
  <div class="chat-container">
    <div class="chat-messages">
      <div v-for="(message, index) in messages" :key="index" :class="['message', message.role]">
        <div class="message-content">{{ message.content }}</div>
      </div>
    </div>
    <div class="chat-input">
      <input v-model="inputMessage" @keyup.enter="sendMessage" placeholder="输入消息..." />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const messages = ref([])
const inputMessage = ref('')

const sendMessage = async () => {
  if (!inputMessage.value.trim()) return

  const userMessage = { role: 'user', content: inputMessage.value }
  messages.value.push(userMessage)

  try {
    const response = await axios.post('/api/chat/', {
      message: inputMessage.value,
      context: messages.value
    })
    const aiMessage = { role: 'assistant', content: response.data.message }
    messages.value.push(aiMessage)
  } catch (error) {
    console.error('发送消息失败:', error)
  }

  inputMessage.value = ''
}
</script>

<style scoped>
.chat-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.chat-messages {
  height: 500px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
.message {
  margin-bottom: 10px;
}
.message.user {
  text-align: right;
}
.message.assistant {
  text-align: left;
}
.message-content {
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  background-color: #f1f1f1;
}
.chat-input {
  display: flex;
}
.chat-input input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.chat-input button {
  margin-left: 10px;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

6. 前后端交互实现

6.1 配置Axios

创建Axios实例，配置请求拦截器和响应拦截器。

// src/utils/http.js
import axios from 'axios'

const instance = axios.create({
  baseURL: '/api',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
})

export default instance

6.2 使用Pinia管理状态

创建Pinia Store，管理聊天记录和用户状态。

// stores/chatStore.js
import { defineStore } from 'pinia'
import http from '@/utils/http'

export const useChatStore = defineStore('chat', {
  state: () => ({
    messages: []
  }),
  actions: {
    async sendMessage(message) {
      try {
        const response = await http.post('/chat/', { message })
        this.messages.push({ role: 'user', content: message })
        this.messages.push({ role: 'assistant', content: response.data.message })
      } catch (error) {
        console.error('发送消息失败:', error)
      }
    }
  }
})

7. 功能扩展与优化

7.1 多轮对话

在每次请求中传递上下文信息，实现多轮对话。

const sendMessage = async () => {
  if (!inputMessage.value.trim()) return

  const userMessage = { role: 'user', content: inputMessage.value }
  messages.value.push(userMessage)

  try {
    const response = await axios.post('/api/chat/', {
      message: inputMessage.value,
      context: messages.value
    })
    const aiMessage = { role: 'assistant', content: response.data.message }
    messages.value.push(aiMessage)
  } catch (error) {
    console.error('发送消息失败:', error)
  }

  inputMessage.value = ''
}

7.2 对话历史记录

在数据库中存储对话记录，支持历史记录查看。

# chat/models.py
from django.db import models
from django.contrib.auth.models import User

class Conversation(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    created_at = models.DateTimeField(auto_now_add=True)

class Message(models.Model):
    conversation = models.ForeignKey(Conversation, on_delete=models.CASCADE)
    role = models.CharField(max_length=10)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

8. 项目部署与上线

8.1 使用Docker部署

创建Dockerfile和docker-compose.yml文件。

# Dockerfile
FROM python:3.9-slim

WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt

COPY . .

CMD ["gunicorn", "ai_chat_backend.wsgi:application", "--bind", "0.0.0.0:8000"]

# docker-compose.yml
version: '3.8'

services:
  web:
    build: .
    ports:
      - "8000:8000"
    volumes:
      - .:/app
    environment:
      - DEEPSEEK_API_KEY=${DEEPSEEK_API_KEY}

启动Docker容器

docker-compose up -d

9. 总结与展望

9.1 项目总结

通过本项目，我们实现了一个基于DeepSeek和Vue3的AI对话聊天系统，涵盖了前后端开发、API集成、状态管理、部署上线等全流程。

9.2 未来展望

支持更多AI模型和功能。
实现语音输入和输出功能。
集成第三方服务（如微信、Slack）。
优化性能和用户体验。