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

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

引用

CSDN

1.

https://blog.csdn.net/qq_16242613/article/details/145763603

本文将介绍如何基于DeepSeek和Vue3开发一个AI对话聊天系统，实现智能问答、多轮对话、上下文理解等功能。文章适合有一定前端和后端开发基础的读者学习参考。

项目概述

项目背景

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

项目目标

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

项目功能

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

技术选型与架构设计

技术选型

前端

• 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应用。

开发环境准备

前端环境

1. 安装Node.js和npm

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

2. 创建Vue3项目

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

3. 安装必要依赖

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

后端环境

1. 安装Python和虚拟环境

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

2. 安装Django和DRF

pip install django djangorestframework django-cors-headers

3. 创建Django项目

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

DeepSeek API集成

获取API密钥

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

创建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()

创建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)

1. 配置API路由

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

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

前端页面开发

创建聊天组件

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>

前后端交互实现

配置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

使用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)
      }
    }
  }
})

功能扩展与优化

多轮对话

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 = ''
}

对话历史记录

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)

项目部署与上线

使用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}

1. 启动Docker容器

docker-compose up -d

总结与展望

项目总结

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

未来展望

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