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

安装 Django 和 DRF

pip install django djangorestframework django-cors-headers

安装 Python 和虚拟环境

# 检查 Python 版本
python --version
# 要求 3.8+
# 创建虚拟环境
python -m venv venv
source venv/bin/activate # Linux/Mac
venv\Scripts\activate # Windows

4. DeepSeek API 集成

4.1 获取 API 密钥

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

4.2 创建 API 服务

1. 在 Django 项目中创建 API 服务，用于与 DeepSeek API 进行交互。
2. 使用 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 视图

1. 在 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)

2. 配置 API 路由

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

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

5. 前端页面开发

5.1 创建聊天组件

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

<template>
  <div class="chat-container">
    <div class="chat-messages">
      <div v-for="(message, index) in messages" :key="index" :class="['message', message.role]">
        <div>{{ 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

1. 创建 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 管理状态

1. 创建 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 多轮对话

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 对话历史记录

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

# 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 部署

1. 创建 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}

2. 启动 Docker 容器

docker-compose up -d

9. 总结与展望

9.1 项目总结

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

9.2 未来展望

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