基于DeepSeek+Vue3的AI对话聊天系统开发实战_vue3仿照deepseek做个ai对话

文章目录

• • 1. 项目概述
  • • 1.1 项目背景
    • 1.2 项目目标
    • 1.3 项目功能
  • 2. 技术选型与架构设计
  • • 2.1 技术选型
  • 3. 开发环境准备
  • • 3.1 前端环境
    • 3.2 后端环境
  • 4. DeepSeek API集成
  • • 4.1 获取API密钥
    • 4.2 创建API服务
    • 4.3 创建API视图
  • 5. 前端页面开发
  • • 5.1 创建聊天组件
  • 6. 前后端交互实现
  • • 6.1 配置Axios
    • 6.2 使用Pinia管理状态
  • 7. 功能扩展与优化
  • • 7.1 多轮对话
    • 7.2 对话历史记录
  • 8. 项目部署与上线
  • • 8.1 使用Docker部署
  • 9. 总结与展望
  • • 9.1 项目总结
    • 9.2 未来展望

1. 项目概述

1.1 项目背景

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

1.2 项目目标

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

1.3 项目功能

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

2. 技术选型与架构设计

2.1 技术选型

1. 前端

   • Vue3：前端框架，提供响应式数据绑定和组件化开发。
   • Pinia：状态管理库，替代Vuex，提供更简洁的API。
   • Axios：HTTP客户端，用于与后端API进行数据交互。
   • Element Plus：UI组件库，提供丰富的组件和样式。

2. 后端

   • Django：后端框架，提供ORM、路由管理、模板引擎等功能。
   • Django REST Framework (DRF)：用于构建RESTful API。
   • DeepSeek API：提供AI对话能力。

3. 数据库

   • PostgreSQL：关系型数据库，用于存储用户信息和对话记录。

4. 部署

   • Docker：容器化技术，简化部署流程。
   • Nginx：反向代理服务器，处理静态文件请求和负载均衡。
   • Gunicorn：WSGI服务器，用于部署Django应用。

3. 开发环境准备

3.1 前端环境

1. 安装Node.js和npm

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

2. 创建Vue3项目

   npm init vue@latest ai-chat-frontendcd ai-chat-frontendnpm install

3. 安装必要依赖

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

3.2 后端环境

1. 安装Python和虚拟环境

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

2. 安装Django和DRF

   pip install django djangorestframework django-cors-headers

3. 创建Django项目

   django-admin startproject ai_chat_backendcd ai_chat_backendpython manage.py startapp chat

4. DeepSeek API集成

4.1 获取API密钥

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

4.2 创建API服务

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

# chat/services.pyimport osimport requestsDEEPSEEK_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.pyfrom rest_framework.views import APIViewfrom rest_framework.response import Responsefrom rest_framework import statusfrom .services import send_message_to_deepseekclass 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.pyfrom django.urls import pathfrom .views import ChatViewurlpatterns = [ path(\"chat/\", ChatView.as_view(), name=\"chat\"),]

5. 前端页面开发

5.1 创建聊天组件

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

 
 
 
 
{{ message.content }}
 
 
 
  发送 
 
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 = \'\'}.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;}

6. 前后端交互实现

6.1 配置Axios

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

// src/utils/http.jsimport 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.jsimport { 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.pyfrom django.db import modelsfrom django.contrib.auth.models import Userclass 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文件。

# DockerfileFROM python:3.9-slimWORKDIR /appCOPY requirements.txt .RUN pip install -r requirements.txtCOPY . .CMD [\"gunicorn\", \"ai_chat_backend.wsgi:application\", \"--bind\", \"0.0.0.0:8000\"]

# docker-compose.ymlversion: \'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. 优化性能和用户体验。

送礼攻略