# qiniu-ai-roleplay-web

**Repository Path**: wen-100/qiniu-ai-roleplay-web

## Basic Information

- **Project Name**: qiniu-ai-roleplay-web
- **Description**: 七牛云校招议题二：AI 角色扮演网站（Java 全栈）
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-22
- **Last Updated**: 2025-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎭 七牛云AI角色扮演项目

> 基于Spring Boot + Vue.js的全栈AI角色扮演聊天应用 | 七牛云2026秋招实战项目

[![Spring Boot](https://img.shields.io/badge/Spring%20Boot-3.2.4-brightgreen)](https://spring.io/)
[![Vue.js](https://img.shields.io/badge/Vue.js-3.3.0-brightgreen)](https://vuejs.org/)
[![Java](https://img.shields.io/badge/Java-17-blue)](https://openjdk.org/)
[![SQLite](https://img.shields.io/badge/SQLite-3.45-blue)](https://sqlite.org/)

## ✨ 项目特色

### 🎯 核心功能
- **🤖 智能AI对话** - 集成七牛云DeepSeek大模型，实现逼真角色扮演
- **🎭 多角色系统** - 哈利波特、苏格拉底、福尔摩斯、爱因斯坦四大角色
- **✨ 角色技能** - 每个角色拥有独特的技能触发系统
- **💾 会话管理** - 完整的聊天历史记录和会话持久化
- **🎨 现代化UI** - Vue.js构建的响应式聊天界面

### 🚀 技术亮点
- **前后端分离架构** - Spring Boot + Vue.js现代化技术栈
- **RESTful API设计** - 规范的接口设计和错误处理
- **智能技能系统** - 多级优先级技能触发机制
- **优雅降级方案** - AI服务不可用时的智能备用回复
- **完整日志系统** - 详细的请求追踪和性能监控

## 📸 功能演示

### 角色对话示例
**用户**: "Expelliarmus是什么咒语？"  
**哈利波特**: "✨【魔法咒语】Expelliarmus！这是缴械咒，我最常用的咒语之一！"

**用户**: "什么是真理？"  
**苏格拉底**: "✨【真理探索】真理需要通过对立面来发现。关于真理，让我们从不同角度来审视。"

### 界面预览
![聊天界面](demo/demo.png)
### 视频演示
<iframe src="//player.bilibili.com/player.html?bvid=BV1ninZziE1c&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

或者直接链接：
[点击观看演示视频](https://www.bilibili.com/video/BV1ninZziE1c/)
## 🛠 技术架构

### 后端技术栈
| 技术 | 版本 | 用途 |
|------|------|------|
| Spring Boot | 3.2.4 | 后端框架 |
| Java | 17 | 编程语言 |
| SQLite | 3.45 | 数据库 |
| JPA/Hibernate | 3.6 | ORM框架 |
| WebFlux | 3.2.4 | 响应式HTTP客户端 |

### 前端技术栈
| 技术 | 版本 | 用途 |
|------|------|------|
| Vue.js | 3.3.0 | 前端框架 |
| Vue Router | 4.2.0 | 路由管理 |
| Axios | 1.6.0 | HTTP客户端 |
| Vite | 4.4.0 | 构建工具 |

### 系统架构图
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ Vue.js前端 │◄──►│ Spring Boot后端 │◄──►│ 七牛云AI服务 │
│ (端口:5173) │ │ (端口:8080) │ │ (DeepSeek) │
└─────────────────┘ └──────────────────┘ └─────────────────┘
│
▼
┌───────────────┐
│ SQLite数据库 │
│ (roleplay.db) │
└───────────────┘

## 🚀 快速开始

### 环境要求
- **Java 17+** - [下载地址](https://openjdk.org/)
- **Node.js 16+** - [下载地址](https://nodejs.org/)
- **Maven 3.6+** - [下载地址](https://maven.apache.org/)
- **Git** - [下载地址](https://git-scm.com/)

### 第一步：克隆项目
```bash
git clone https://gitee.com/wen-100/qiniu-ai-roleplay-web.git
cd qiniu-ai-roleplay-web
```
### 第二步：配置AI服务
在 backend/src/main/resources/application.yml 中配置七牛云API Token：

yaml
qiniu:
  ai:
    deepseek-url: https://openai.qiniu.com/v1/chat/completions
    token: sk-your-qiniu-token-here
### 第三步：启动后端服务
```bash
cd backend
./mvnw spring-boot:run
```
后端服务将在 http://localhost:8080 启动

### 第四步：启动前端服务
```bash
cd frontend
npm install
npm run dev
```
前端服务将在 http://localhost:5173 启动

### 第五步：访问应用
打开浏览器访问 http://localhost:5173 开始使用！