Files
2026-07-14 10:00:04 +08:00

4.3 KiB
Raw Permalink Blame History

AI Chat - 类 ChatGPT 智能对话系统

基于 Vue 3 + ThinkPHP 8 + MySQL 构建的全栈 AI 聊天应用。

架构说明

层级 技术 目录 端口
后端 API ThinkPHP 8 backend/ 8080
会员端 Vue 3 frontend/ 5173
管理后台 Vue 3 frontend-admin/ 5174
chat/
├── backend/              # ThinkPHP 8 后端
│   ├── app/              # 控制器、模型、服务、中间件
│   ├── config/           # 配置文件
│   ├── database/         # 数据库脚本
│   ├── public/           # Web 入口
│   ├── route/            # 路由定义
│   └── uploads/          # 上传文件
├── frontend/             # Vue 会员端
├── frontend-admin/       # Vue 管理后台
└── README.md

功能特性

会员端

  • 响应式聊天界面(PC / 手机自适应)
  • Markdown、图片、视频、语音、文档、表情
  • 文件上传、粘贴图片、会话留存
  • 流式 AI 回复(SSE
  • 注册 / 登录

管理后台

  • 数据概览、用户管理、会话管理
  • AI 模型配置(OpenAI 格式 API
  • 会员等级与权限、功能开关

后端 (ThinkPHP 8)

  • RESTful API + JWT 认证
  • 会员权限、会话消息持久化
  • OpenAI 格式 API 代理(流式输出)
  • 文件上传管理

快速开始

1. 环境要求

  • PHP >= 8.0(需启用 curl、pdo_mysql、mbstring
  • MySQL 5.7+
  • Node.js 18+

2. 数据库

默认配置(backend/.env):

DB_HOST = 127.0.0.1
DB_NAME = ai_chat
DB_USER = root
DB_PASS = root

初始化数据库:

cd backend
php database/install.php

3. 启动后端

cd backend
php think run -p 8080

生产环境将 Web 服务器指向 backend/public 目录。

4. 启动会员端

cd frontend
npm install
npm run dev

访问 http://localhost:5173

5. 启动管理后台

cd frontend-admin
npm install
npm run dev

访问 http://localhost:5174

6. 配置 AI 模型

登录管理后台,进入「AI 模型」,填入 API Key 和接口地址(支持 OpenAI 兼容 API)。

默认账户

用途 用户名 密码
管理后台 / 会员端 admin admin123

API 路由

所有接口前缀 /api,主要路由:

方法 路径 说明
POST /api/auth/register 注册
POST /api/auth/login 登录
GET /api/conversations 会话列表
POST /api/chat/completions 发送消息(SSE
POST /api/upload 上传文件
GET /api/admin/stats 管理统计

完整路由见 backend/route/app.php

生产部署

1. 一键编译并部署静态资源

在项目根目录执行:

npm install
npm --prefix frontend install
npm --prefix frontend-admin install
npm run build

编译完成后:

  • 会员端静态文件 → backend/public/
  • 管理后台静态文件 → backend/public/admin/

访问路径(同域部署):

  • 会员端:https://你的域名/
  • 管理后台:https://你的域名/admin/

2. 后端配置

编辑 backend/.env

APP_DEBUG = false
JWT_SECRET = 请改成随机长字符串

Web 服务器网站根目录指向 backend/publicNginx 示例见 deploy/nginx.conf.examplephpstudy 详见 deploy/phpstudy.md

若登录接口返回 nginx 404:说明 /api 未转发到 PHP,需配置伪静态(见 backend/public/.htaccess 或 nginx 的 location ^~ /api)。

3. 生产环境要求

  • PHP >= 8.0curl、pdo_mysql、mbstring
  • MySQL 5.7+
  • backend/uploads/ 目录可写
  • Nginx/Apache 配置 SPA 路由回退(try_files
  • /api 请求转发到 backend/public/index.php

4. 开发 vs 生产

环境 会员端 管理后台 API
开发 :5173 :5174 :8080
生产 / /admin/ /api

开发环境仍用 npm run dev;生产用 npm run build 后由 Nginx 托管静态文件。

生产部署建议(安全)

  1. 修改 .envJWT_SECRET
  2. 设置 APP_DEBUG = false
  3. uploads/ 目录需写权限
  4. 启用 HTTPS,修改默认管理员密码

技术栈

  • 后端: ThinkPHP 8, ThinkORM, JWT
  • 前端: Vue 3, Vite, Pinia, Vue Router
  • 数据库: MySQL