PythonAI大前端
基于 DeepSeek+Vue3 的 AI 对话聊天系统开发实战
基于 DeepSeek 和 Vue3 开发 AI 对话聊天系统的完整流程。涵盖技术选型（Vue3、Pinia、Django、PostgreSQL）、环境搭建、DeepSeek API 集成、前后端交互实现（Axios、状态管理）、功能扩展（多轮对话、历史记录）以及 Docker 部署方案。实现了智能问答、上下文理解及友好的用户界面，为构建类似应用提供实践参考。
基于 DeepSeek 和 Vue3 开发 AI 对话聊天系统的完整流程。涵盖技术选型（Vue3、Pinia、Django、PostgreSQL）、环境搭建、DeepSeek API 集成、前后端交互实现（Axios、状态管理）、功能扩展（多轮对话、历史记录）以及 Docker 部署方案。实现了智能问答、上下文理解及友好的用户界面，为构建类似应用提供实践参考。
随着人工智能技术的快速发展，AI 对话系统在各个领域的应用越来越广泛。本文将介绍如何基于 DeepSeek 和 Vue3 开发一个 AI 对话聊天系统，实现智能问答、多轮对话、上下文理解等功能。
安装必要依赖
npm install axios vue-router@4 pinia element-plus
创建 Vue3 项目
npm init vue@latest ai-chat-frontend
cd ai-chat-frontend
npm install
安装 Node.js 和 npm
# 检查 Node.js 版本
node -v
# 要求 16+
npm -v
# 要求 7+
创建 Django 项目
django-admin startproject ai_chat_backend
cd ai_chat_backend
python manage.py startapp chat
安装 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
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()
# 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)
# chat/urls.py
from django.urls import path
from .views import ChatView
urlpatterns = [
path("chat/", ChatView.as_view(), name="chat"),
]
<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>
// src/utils/http.js
import axios from 'axios'
const instance = axios.create({
baseURL: '/api',
timeout: 5000,
headers: {
'Content-Type': 'application/json'
}
})
export default instance
// 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)
}
}
}
})
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 = ''
}
# 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)
# 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-compose up -d
通过本项目，我们实现了一个基于 DeepSeek 和 Vue3 的 AI 对话聊天系统，涵盖了前后端开发、API 集成、状态管理、部署上线等全流程。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online