项目概述

        本项目是一个基于Vue.js + Django的AI聊天助手系统，采用前后端分离架构，集成了阿里云DashScope AI服务，为用户提供智能对话体验。系统支持用户注册登录、会话管理、实时聊天等功能，具备完整的用户权限管理和数据持久化能力。

技术架构

后端技术栈

• 框架: Django 5.2.4
• API框架: Django REST Framework 3.16.0
• 认证系统: JWT (djangorestframework-simplejwt 5.5.0)
• WebSocket: Channels 4.3.0
• 异步HTTP: aiohttp 3.12.15
• 验证码: captcha 0.7.1
• 数据库: Django ORM (支持SQLite/MySQL/PostgreSQL)

前端技术栈

• 框架: Vue.js 3.2.13
• UI组件库: Element Plus 2.10.4
• 路由管理: Vue Router 4.0.3
• 状态管理: Vuex 4.0.2
• HTTP客户端: Axios 1.11.0
• Markdown渲染: vue3-markdown-it 1.0.10
• 样式预处理: Sass 1.89.2
• 构建工具: Vue CLI 5.0.0

系统功能

1. 用户管理

• 用户注册: 支持用户名密码注册，包含验证码验证
• 用户登录: JWT token认证，支持记住登录状态
• 权限管理: 区分管理员和普通用户角色
• 用户信息编辑: 支持修改用户名和密码

2. 聊天功能

• 实时对话: 基于WebSocket的实时消息传输
• AI智能回复: 集成阿里云DashScope AI服务
• 流式输出: 模拟打字机效果的流式消息显示
• Markdown渲染: 支持Markdown格式的消息内容
• 消息历史: 完整的对话记录保存和查看

3. 会话管理

• 会话创建: 支持创建新的对话会话
• 会话列表: 显示用户的所有历史会话
• 会话切换: 在不同会话间自由切换
• 会话删除: 支持删除不需要的会话记录

4. 管理功能

• 用户管理: 管理员可查看和管理所有用户

项目展示

1.登录界面

2.注册界面

3.用户管理页面

4.用户功能页面

项目结构

完整项目/
├── chat/                    # Django后端项目
│   └── chat/
│       ├── char_ai/         # 主要应用模块
│       │   ├── models.py    # 数据模型
│       │   ├── views.py     # API视图
│       │   └── admin.py     # 管理后台
│       ├── chat/            # Django项目配置
│       │   ├── settings.py  # 项目设置
│       │   ├── urls.py      # URL路由
│       │   └── consumers.py # WebSocket消费者
│       ├── ext/             # 扩展模块，主要存放验证、限流、权限、序列化功能代码
│       ├── manage.py        # Django管理脚本
│       └── requirements.txt # Python依赖
└── vue-demo/                # Vue.js前端项目
    ├── src/
    │   ├── components/      # 组件目录
    │   │   ├── aside.vue    # 侧边栏组件
    │   │   └── userconmanage.vue
    │   ├── views/           # 页面视图
    │   │   ├── login.vue    # 登录页面
    │   │   ├── register.vue # 注册页面
    │   │   ├── chat.vue     # 聊天页面
    │   │   ├── userhome.vue # 用户主页
    │   │   └── adminhome.vue # 管理员主页
    │   ├── api/             # API接口
    │   ├── router/          # 路由配置
    │   ├── store/           # Vuex状态管理
    │   ├── assets/          # 静态资源
    │   ├── App.vue          # 根组件
    │   └── main.js          # 入口文件
    ├── package.json         # 项目配置
    └── README.md            # 项目说明

数据模型设计

用户模型 (Userinfo)

• id: 用户唯一标识
• username: 用户名（唯一）
• password: 密码（加密存储）
• role: 用户角色（admin/user）

会话模型 (Conversation)

• id: 会话唯一标识
• user: 关联用户（外键）
• title: 会话标题
• created_at: 创建时间
• updated_at: 更新时间

消息模型 (Message)

• id: 消息唯一标识
• conversation: 关联会话（外键）
• role: 消息角色（user/assistant/system）
• content: 消息内容
• timestamp: 时间戳

API接口设计

认证相关

• POST /api/register/ - 用户注册
• POST /api/login/ - 用户登录
• GET /api/token/ - Token验证

用户管理

• GET /api/admin/user - 管理员获取所有用户列表
• POST /api/admin/user/<int:id> - 管理员重置用户密码
• PUT /api/admin/user/<int:id> - 管理员更新用户信息
• DELETE /api/admin/user/<int:id> - 管理员删除用户
• PUT /api/user/user/<int:id> - 用户更新个人信息

会话管理

• POST /api/conversation/{id}/ - 创建会话
• GET /api/conversations/ - 获取会话列表
• DELETE /api/conversation/{id}/ - 删除会话

消息管理

• POST /api/chat/sendrespone - 保存聊天消息记录
• GET /api/chat/send/{conversation_id}/ - 获取会话消息

WebSocket

• ws://localhost:8001/ws/chat/ - 实时聊天连接，实现发送和回复信息

部署说明

环境要求

• Python 3.8+
• Node.js 16+
• pnpm 或 npm

后端部署

# 进入后端目录
cd chat/chat

# 安装依赖
pip install -r requirements.txt

# 数据库迁移
python manage.py makemigrations
python manage.py migrate


# 启动开发服务器WSGI
python manage.py runserver 8000


# 启动开发服务器ASGI-主要做deepseek的api接口的发送信息和回复信息
daphne -b 0.0.0.0 -p 8001 chat.asgi:application

前端部署

# 进入前端目录
cd vue-demo

# 安装依赖
pnpm install

# 启动开发服务器
pnpm run serve

# 构建生产版本
pnpm run build

特色功能

1. 智能对话体验

• 集成阿里云DashScope AI服务，提供高质量的智能回复
• 支持流式输出，模拟真实对话体验
• Markdown格式支持，丰富消息展示效果

2. 完善的权限管理

• JWT token认证，安全可靠
• 角色权限分离，管理员和普通用户功能区分
• 验证码机制，防止恶意注册

3. 实时通信

• WebSocket技术，实现真正的实时对话
• 消息即时推送，无需刷新页面
• 连接状态管理，自动重连机制

4. 用户友好的界面

• Element Plus组件库，现代化UI设计
• 响应式布局，适配不同设备
• 直观的会话管理界面

技术亮点

1. 前后端分离架构: 采用Vue.js + Django REST Framework，实现前后端完全分离
2. 实时通信: 基于WebSocket的实时消息传输，提供流畅的聊天体验
3. AI集成: 集成阿里云DashScope AI服务，提供智能对话能力
4. 安全性: JWT认证、密码加密、验证码等多重安全机制
5. 可扩展性: 模块化设计，易于功能扩展和维护

项目总结

        本项目成功实现了一个功能完整的AI聊天助手系统，具备用户管理、实时聊天、会话管理、权限控制等核心功能。采用现代化的技术栈和架构设计，具有良好的用户体验和系统性能。项目代码结构清晰，注释完善，便于后续维护和功能扩展。

        通过本项目的开发，深入理解了前后端分离架构、WebSocket实时通信、AI服务集成、用户认证授权等关键技术，为后续类似项目的开发积累了宝贵经验。