AI 聊天助手
一、项目简介
基于 DeepSeek API 的 PC 端在线 AI 对话项目。前端为单页 HTML（Vue 2），后端为 Express 代理服务，负责转发聊天请求并隐藏 API Key，支持多轮上下文对话、打字机效果展示与错误提示，适合作为大模型接入与前后端分离入门示例。
功能介绍
核心功能
| 功能 | 说明 |
|---|---|
| 实时对话 | 用户输入消息后，调用 DeepSeek 大模型生成回答并展示在聊天窗口 |
| 多轮对话 | 每次请求携带完整历史消息，AI 可结合上下文连续作答 |
| 打字机效果 | AI 回复逐字显示，模拟真实输入体验 |
| 加载状态 | 等待回复时显示「正在输入」动画，发送按钮自动禁用 |
| 错误提示 | 网络异常或 API 失败时，在聊天区展示友好错误信息 |
界面与交互
- 聊天气泡布局：用户消息靠右（蓝色），AI 消息靠左（灰色）
- 支持Enter键发送，空内容时发送按钮不可点击
- 新消息自动滚动到底部
- 页面打开时展示一条 AI 欢迎语
技术实现要点
浏览器 (index.html) │ POST /api/chat { messages: [...] } ▼ Express 服务 (server.js) │ 角色转换：ai → assistant │ 调用 OpenAI SDK（baseURL 指向 DeepSeek） ▼ DeepSeek API (deepseek-chat) │ 返回 completion.choices[0].message.content ▼ 前端打字机渲染- 前后端分离：前端只负责 UI 与请求，不直接接触 API Key
- CORS 已开启：允许跨域访问（开发时前端与后端同源，由 Express 统一托管）
- 单文件前端：
index.html内聚 HTML、CSS、Vue 逻辑，无构建步骤
文件目录介绍
ai-chat-deepseek-pc/ ├── index.html # 前端页面：聊天 UI、Vue 逻辑、样式 ├── server.js # 后端服务：静态资源托管、/api/chat 接口、DeepSeek 调用 ├── package.json # 项目依赖与启动脚本（start / dev） ├── pnpm-lock.yaml # pnpm 锁文件（依赖版本锁定） ├── README.md # 项目简介、API Key 配置与运行说明 ├── 项目说明.md # 本文件：功能与目录说明 ├── .gitignore # Git 忽略规则 ├── node_modules/ # 依赖包（npm/pnpm install 后生成，勿手动修改） └── 演示材料/ └── 截图/ ├── 图-1.png # 项目演示截图 └── 图-2.png # 项目演示截图主要文件说明
index.html
前端唯一入口，包含：
- 模板：标题栏、消息列表、输入框与发送按钮
- 样式：聊天气泡、打字动画、响应式布局（最大宽度 800px）
- 脚本：Vue 2 实例，负责消息管理、
fetch调用后端、打字机效果与滚动
关键请求地址：POST http://localhost:3000/api/chat
server.js
Node.js 后端，主要职责：
| 职责 | 实现 |
|---|---|
| 静态托管 | express.static托管项目根目录，提供index.html |
| 首页路由 | GET /返回index.html |
| 聊天接口 | POST /api/chat接收消息数组，转发至 DeepSeek |
| 角色映射 | 将前端role: "ai"转为 API 要求的"assistant" |
| 错误处理 | 参数校验、API 异常时返回 400 / 500 及错误信息 |
API Key 配置位置：server.js中OpenAI客户端的apiKey字段。
package.json
| 脚本 | 命令 | 用途 |
|---|---|---|
start | node server.js | 生产/日常使用 |
dev | nodemon server.js | 开发时热重载 |
主要依赖：express、cors、openai（兼容 DeepSeek 接口）、nodemon（开发）。
运行方式
# 1. 安装依赖npminstall# 或 pnpm install# 2. 在 server.js 中配置有效的 DeepSeek API Key# 3. 启动服务npmstart# 开发可用 npm run dev# 4. 浏览器访问http://localhost:3000注意：不可直接双击
index.html用file://打开。页面依赖后端http://localhost:3000/api/chat，必须先启动server.js。
配置说明
- 端口：默认
3000，可通过环境变量PORT修改 - 模型：
deepseek-chat - 系统提示词：
You are a helpful assistant.（可在server.js中调整）
许可证
本项目仅供学习交流使用，请勿用于商业用途。
源码地址：https://www.aiyuanma.vip/posts/ai-chat-deepseek-pc
