一、项目概述
这是一个基于 AI 智能判题的在线编程学习平台，支持 Python、JavaScript、Java 三种语言的在线编写和执行。核心特色是自研代码执行引擎和AI 智能反馈系统。
技术栈：
- 前端：React 18 + TypeScript + Monaco Editor + Ant Design + Zustand
- 后端：Spring Boot 3 + MyBatis-Plus + MySQL 8.0
- AI 判题：硅基流动 DeepSeek-V3 API
二、项目结构
code
AI coding game/
├── frontend/ # 前端项目
│ ├── src/
│ │ ├── api/ # API 接口定义
│ │ │ ├── auth.ts # 认证相关
│ │ │ ├── challenge.ts # 题目相关
│ │ │ ├── submission.ts # 提交相关
│ │ │ ├── leaderboard.ts # 排行榜相关
│ │ │ └── user.ts # 用户相关
│ │ ├── components/ # 公共组件
│ │ │ ├── Layout/ # 布局组件
│ │ │ ├── LevelProgress/ # 等级进度条
│ │ │ └── ProtectedRoute/ # 路由守卫
│ │ ├── pages/ # 页面组件
│ │ │ ├── Auth/ # 登录注册页
│ │ │ ├── ChallengeDetail/ # 题目详情页（含 Monaco Editor）
│ │ │ ├── Challenges/ # 题目列表页
│ │ │ ├── Leaderboard/ # 排行榜页
│ │ │ ├── Profile/ # 个人中心页
│ │ │ └── Admin/ # 管理后台页
│ │ ├── store/ # 状态管理
│ │ │ └── authStore.ts # Zustand 认证状态
│ │ ├── utils/ # 工具函数
│ │ │ └── request.ts # Axios 封装
│ │ └── App.tsx # 根组件
│ ├── package.json
│ └── vite.config.ts
│
├── backend/ # 后端项目
│ ├── src/main/java/com/aicode/platform/
│ │ ├── controller/ # 控制器层
│ │ │ ├── AuthController.java
│ │ │ ├── ChallengeController.java
│ │ │ ├── SubmissionController.java
│ │ │ ├── LeaderboardController.java
│ │ │ ├── UserController.java
│ │ │ └── AdminController.java
│ │ ├── service/ # 业务逻辑层
│ │ │ ├── AuthService.java
│ │ │ ├── ChallengeService.java
│ │ │ ├── SubmissionService.java # 代码执行引擎核心
│ │ │ ├── AIJudgeService.java # AI 判题核心
│ │ │ ├── LeaderboardService.java
│ │ │ └── UserService.java
│ │ ├── mapper/ # 数据访问层
│ │ │ ├── UserMapper.java
│ │ │ ├── ChallengeMapper.java
│ │ │ └── SubmissionMapper.java
│ │ ├── entity/ # 实体类
│ │ │ ├── User.java
│ │ │ ├── Challenge.java
│ │ │ ├── Submission.java
│ │ │ ├── Achievement.java
│ │ │ └── TestCase.java
│ │ ├── config/ # 配置类
│ │ │ ├── SecurityConfig.java
│ │ │ └── CorsConfig.java
│ │ └── util/ # 工具类
│ │ └── JwtUtil.java
│ └── src/main/resources/
│ ├── application.yml # Spring Boot 配置
│ └── schema.sql # 数据库建表语句
│
├── scripts/ # 脚本工具
│ ├── import_problems.py # 题目导入工具
│ └── test_executor.py # 代码执行测试
│
├── data/ # 数据文件
│ └── problems.json # 题目数据
│
├── start-all.sh # 启动脚本
├── stop-all.sh # 停止脚本
└── README.md
三、系统架构图
code
┌─────────────────────────────────────────────────────────────┐
│ 浏览器端 │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 题目列表页 │ │ 代码编辑页 │ │ 排行榜页 │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │ │ │ │
│ └──────────────────┼──────────────────┘ │
│ │ │
│ ┌───────▼───────┐ │
│ │ Monaco Editor │ (代码编辑器) │
│ └───────┬───────┘ │
└────────────────────────────┼────────────────────────────────┘
│ HTTP/HTTPS
│ (RESTful API + JWT)
┌────────────────────────────▼────────────────────────────────┐
│ Spring Boot 后端 │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ Controller 层 │ │
│ │ AuthController ChallengeController SubmissionCtrl │ │
│ └────────────┬─────────────────────────────────────────┘ │
│ │ │
│ ┌────────────▼─────────────────────────────────────────┐ │
│ │ Service 层 │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌────────────┐ │ │
│ │ │ Submission │ │ AIJudge │ │ Challenge │ │ │
│ │ │ Service │ │ Service │ │ Service │ │ │
│ │ │ (代码执行) │ │ (AI 判题) │ │ │ │ │
│ │ └──────┬───────┘ └──────┬───────┘ └────────────┘ │ │
│ └─────────┼──────────────────┼──────────────────────────┘ │
│ │ │ │
│ ┌─────────▼──────┐ ┌────────▼────────┐ │
│ │ 进程执行引擎 │ │ 硅基流动 API │ │
│ │ python3/node │ │ DeepSeek-V3 │ │
│ │ javac/java │ │ │ │
│ └────────────────┘ └─────────────────┘ │
│ │ │
│ ┌─────────▼──────────────────────────────────────────┐ │
│ │ Mapper 层 │ │
│ │ UserMapper ChallengeMapper SubmissionMapper │ │
│ └─────────┬────────────────────────────────────────────┘ │
└────────────┼─────────────────────────────────────────────────┘
│ MyBatis-Plus
┌────────────▼─────────────────────────────────────────────────┐
│ MySQL 数据库 │
│ users challenges submissions achievements leaderboard │
└──────────────────────────────────────────────────────────────┘
四、核心功能流程图
4.1 用户登录认证流程
code
┌────────┐ ┌────────┐ ┌────────┐
│ 前端 │ │ 后端 │ │ 数据库 │
└───┬────┘ └───┬────┘ └───┬────┘
│ │ │
│ POST /api/auth/login │ │
│ {username, password} │ │
├────────────────────────>│ │
│ │ 查询用户信息 │
│ ├──────────────────────>│
│ │ │
│ │ 返回用户数据 │
│ │<──────────────────────┤
│ │ │
│ │ BCrypt 验证密码 │
│ │ 生成 JWT Token │
│ │ │
│ 返回 token + userInfo │ │
│<────────────────────────┤ │
│ │ │
│ 存储 token 到 Zustand │ │
│ 后续请求携带 token │ │
│ Authorization: Bearer │ │
│ │ │
4.2 代码提交与执行流程
code
┌─────────┐ ┌─────────┐ ┌──────────────┐ ┌────────┐
│ 前端 │ │ 后端 │ │ 代码执行引擎 │ │ 数据库 │
└────┬────┘ └────┬────┘ └──────┬───────┘ └───┬────┘
│ │ │ │
│ POST /api/submit │ │ │
│ {challengeId, code} │ │ │
├────────────────────>│ │ │
│ │ 查询题目测试用例 │ │
│ ├───────────────────────────────────────────>│
│ │ │ │
│ │ 返回测试用例 │ │
│ │<───────────────────────────────────────────┤
│ │ │ │
│ │ 创建临时文件 │ │
│ │ 包装用户代码 │ │
│ ├──────────────────────>│ │
│ │ │ │
│ │ │ 启动进程 │
│ │ │ python3/node/java │
│ │ │ │
│ │ │ 执行代码 │
│ │ │ 捕获输出 │
│ │ │ (超时 5秒) │
│ │ │ │
│ │ 返回执行结果 │ │
│ │ {output, error, time}│ │
│ │<──────────────────────┤ │
│ │ │ │
│ │ 对比输出与期望值 │ │
│ │ 计算通过率 │ │
│ │ │ │
│ │ 保存提交记录 │ │
│ ├───────────────────────────────────────────>│
│ │ │ │
│ │ 更新用户经验值 │ │
│ │ 检查成就解锁 │ │
│ ├───────────────────────────────────────────>│
│ │ │ │
│ 返回判题结果 │ │ │
│ {status, results} │ │ │
│<────────────────────┤ │ │
│ │ │ │
4.3 AI 智能判题流程
code
┌─────────┐ ┌─────────┐ ┌──────────────┐ ┌──────────┐
│ 前端 │ │ 后端 │ │ AIJudge │ │ 硅基流动 │
│ │ │ │ │ Service │ │ API │
└────┬────┘ └────┬────┘ └──────┬───────┘ └────┬─────┘
│ │ │ │
│ POST /api/ai-hint│ │ │
│ {submissionId} │ │ │
├─────────────────>│ │ │
│ │ 查询提交记录 │ │
│ │ 获取错误信息 │ │
│ │ │ │
│ │ 构建 AI Prompt │ │
│ ├────────────────────>│ │
│ │ │ │
│ │ │ 调用 DeepSeek-V3 │
│ │ ├───────────────────>│
│ │ │ │
│ │ │ 流式返回 (SSE) │
│ │ │<───────────────────┤
│ │ │ │
│ │ 转发流式响应 │ │
│ SSE 流式响应 │<────────────────────┤ │
│<─────────────────┤ │ │
│ (打字机效果) │ │ │
│ │ │ │
│ 显示 AI 反馈 │ │ │
│ - 错误分析 │ │ │
│ - 改进建议 │ │ │
│ - 代码示例 │ │ │
│ │ │ │
五、数据库设计（ER 图）
code
┌─────────────────────┐
│ users │
├─────────────────────┤
│ id (PK) │
│ username │
│ password │◄────────┐
│ email │ │
│ experience │ │ 1:N
│ level │ │
│ avatar_url │ │
│ role │ │
│ created_at │ │
└─────────────────────┘ │
│ │
│ 1:N │
│ │
▼ │
┌─────────────────────┐ │
│ submissions │ │
├─────────────────────┤ │
│ id (PK) │ │
│ user_id (FK) │─────────┘
│ challenge_id (FK) │─────────┐
│ code │ │
│ language │ │
│ status │ │
│ execution_result │ │
│ submitted_at │ │
└─────────────────────┘ │
▲ │
│ │
│ N:1 │
│ │
┌─────────────────────┐ │
│ challenges │ │
├─────────────────────┤ │
│ id (PK) │◄────────┘
│ title │
│ description │
│ difficulty │
│ category │
│ language │
│ test_cases (JSON) │
│ template_code │
│ solution_code │
│ pass_rate │
│ submission_count │
│ created_at │
└─────────────────────┘
│
│ 1:N
│
▼
┌─────────────────────┐
│ test_cases │
├─────────────────────┤
│ id (PK) │
│ challenge_id (FK) │
│ input │
│ expected_output │
│ is_sample │
│ explanation │
└─────────────────────┘
┌─────────────────────┐ ┌─────────────────────┐
│ achievements │ │ user_achievements │
├─────────────────────┤ ├─────────────────────┤
│ id (PK) │ │ id (PK) │
│ name │◄───N:N──│ user_id (FK) │
│ description │ │ achievement_id (FK)│
│ icon │ │ unlocked_at │
│ condition_type │ └─────────────────────┘
│ condition_value │
└─────────────────────┘
┌─────────────────────┐
│ leaderboard │
├─────────────────────┤
│ id (PK) │
│ user_id (FK) │
│ username │
│ experience │
│ solved_count │
│ pass_rate │
│ rank │
│ snapshot_date │
└─────────────────────┘
核心表说明
1. users 表
- 存储用户基本信息、经验等级
experience: 经验值（完成题目获得）level: 等级（根据 experience 计算）
2. challenges 表
- 存储题目信息
test_cases: JSON 格式存储测试用例数组template_code: 预填充的代码模板
3. submissions 表
- 存储每次代码提交记录
execution_result: JSON 格式存储详细执行结果status: ACCEPTED, WRONG_ANSWER, RUNTIME_ERROR 等
4. achievements 表
- 定义成就条件（如”完成10道题”、”连续7天打卡”）
5. user_achievements 表
- 记录用户解锁的成就
6. leaderboard 表
- 排行榜快照，定期更新
六、代码执行引擎实现（核心）
6.1 执行流程
code
用户提交代码
│
▼
┌──────────────────────┐
│ 1. 接收提交请求 │
│ - challengeId │
│ - code │
│ - language │
└──────┬───────────────┘
│
▼
┌──────────────────────┐
│ 2. 查询测试用例 │
│ - 从 DB 获取 │
│ - 解析 JSON │
└──────┬───────────────┘
│
▼
┌──────────────────────┐
│ 3. 代码包装 │
│ - Python: 添加测试 │
│ if __name__ │
│ - Java: 包装 Main │
│ - JS: 添加 console │
└──────┬───────────────┘
│
▼
┌──────────────────────┐
│ 4. 创建临时文件 │
│ - createTempFile() │
│ - 写入包装后代码 │
└──────┬───────────────┘
│
▼
┌──────────────────────┐
│ 5. 启动进程执行 │
│ - ProcessBuilder │
│ - python3/node/java│
│ - 捕获 stdout/err │
└──────┬───────────────┘
│
▼
┌──────────────────────┐
│ 6. 超时控制 │
│ - waitFor(5秒) │
│ - 超时强制终止 │
│ - destroyForcibly()│
└──────┬───────────────┘
│
▼
┌──────────────────────┐
│ 7. 读取执行结果 │
│ - 标准输出 │
│ - 错误输出 │
│ - 执行时间 │
└──────┬───────────────┘
│
▼
┌──────────────────────┐
│ 8. 输出对比判定 │
│ - trim() 去空格 │
│ - equals() 比较 │
│ - 计算通过率 │
└──────┬───────────────┘
│
▼
┌──────────────────────┐
│ 9. 保存提交记录 │
│ - status │
│ - execution_result │
│ - 更新统计数据 │
└──────┬───────────────┘
│
▼
┌──────────────────────┐
│ 10. 清理临时文件 │
│ - deleteOnExit() │
│ - 防止磁盘占用 │
└──────────────────────┘
6.2 核心代码实现
SubmissionService.java 关键方法
java
public SubmissionResult executeCode(String code, String language, List<TestCase> testCases) {
// 1. 创建临时文件
File tempFile = File.createTempFile("code_", getFileExtension(language));
tempFile.deleteOnExit();
// 2. 包装代码
String wrappedCode = wrapCode(code, language, testCases);
Files.write(tempFile.toPath(), wrappedCode.getBytes());
// 3. 构建执行命令
ProcessBuilder pb = new ProcessBuilder(getCommand(language, tempFile));
pb.redirectErrorStream(true);
// 4. 启动进程
Process process = pb.start();
// 5. 读取输出（带超时）
String output = readOutput(process.getInputStream());
// 6. 超时控制
if (!process.waitFor(5, TimeUnit.SECONDS)) {
process.destroyForcibly();
return SubmissionResult.timeout();
}
// 7. 对比输出
boolean allPassed = compareOutput(output, testCases);
return SubmissionResult.success(output, allPassed);
}
代码包装示例（Python）
java
private String wrapPythonCode(String userCode, List<TestCase> testCases) {
StringBuilder wrapped = new StringBuilder();
wrapped.append(userCode).append("\n\n");
wrapped.append("if __name__ == '__main__':\n");
for (TestCase tc : testCases) {
String input = tc.getInput();
wrapped.append(" print(solution(").append(input).append("))\n");
}
return wrapped.toString();
}
6.3 安全机制
- 进程隔离：每次提交独立进程，互不影响
- 超时终止：5秒自动终止，防止死循环
- 资源限制：限制内存和 CPU 使用（通过系统配置）
- 代码沙箱：禁止文件操作、网络访问（可扩展）
七、AI 判题系统
7.1 技术选型
硅基流动 DeepSeek-V3
- 推理能力强
- 成本低（¥1/百万 tokens）
- 支持流式输出
7.2 核心功能
- 错误分析：识别语法错误、逻辑错误
- 智能提示：提供 3 级渐进式提示
- 解题思路：自动生成解题思路文档
- 代码优化建议：性能、可读性优化
7.3 实现方式
AIJudgeService.java
java
public String analyzeCode(String code, String error, String problemDesc) {
// 构建 Prompt
String prompt = buildPrompt(code, error, problemDesc);
// 调用硅基流动 API
HttpRequest request = HttpRequest.newBuilder()
.uri(URI.create("https://api.siliconflow.cn/v1/chat/completions"))
.header("Authorization", "Bearer " + apiKey)
.POST(HttpRequest.BodyPublishers.ofString(buildRequestBody(prompt)))
.build();
// 发送请求并获取响应
HttpResponse<String> response = httpClient.send(request);
// 解析 AI 返回的反馈
return parseAIResponse(response.body());
}
Prompt 模板
code
你是一个专业的编程导师，请分析以下代码：
题目描述：
{problemDescription}
用户代码：
{userCode}
错误信息：
{errorMessage}
请提供：
1. 错误原因分析
2. 改进建议
3. 示例代码（不要直接给出完整答案）
八、API 接口设计
8.1 认证相关
code
POST /api/auth/register 注册
POST /api/auth/login 登录
GET /api/auth/me 获取当前用户信息
8.2 题目相关
code
GET /api/challenges 获取题目列表
GET /api/challenges/{id} 获取题目详情
GET /api/challenges/{id}/hints 获取提示
POST /api/challenges 创建题目（管理员）
PUT /api/challenges/{id} 更新题目（管理员）
DELETE /api/challenges/{id} 删除题目（管理员）
8.3 提交相关
code
POST /api/submissions 提交代码
GET /api/submissions/{id} 获取提交详情
GET /api/submissions/my 获取我的提交记录
POST /api/submissions/{id}/ai-hint 获取 AI 提示（SSE）
8.4 排行榜相关
code
GET /api/leaderboard 获取排行榜
GET /api/leaderboard/me 获取我的排名
8.5 用户相关
code
GET /api/users/{id} 获取用户信息
GET /api/users/{id}/achievements 获取用户成就
PUT /api/users/me 更新个人信息
九、部署架构
code
┌─────────────────────────────────────────────────────────┐
│ Nginx (端口 80/443) │
│ 反向代理 + 静态资源 │
└────────────┬──────────────────────┬─────────────────────┘
│ │
│ /api/* │ /*
│ │
┌────────────▼──────────┐ ┌────────▼───────────────────┐
│ Spring Boot 后端 │ │ React 前端静态文件 │
│ 端口: 9000 │ │ (Vite 构建产物) │
│ - API 服务 │ │ │
│ - 代码执行引擎 │ │ │
│ - AI 判题 │ │ │
└───────────┬───────────┘ └────────────────────────────┘
│
│
┌───────────▼───────────┐
│ MySQL 数据库 │
│ 端口: 3306 │
│ - 用户数据 │
│ - 题目数据 │
│ - 提交记录 │
└───────────────────────┘
部署步骤：
- 构建前端：
npm run build - 构建后端：
mvn clean package - 启动 MySQL 数据库
- 启动后端服务：
java -jar platform-1.0.0.jar - 配置 Nginx 反向代理
- 访问：
http://localhost
十、技术亮点总结
- 自研代码执行引擎
- 不依赖第三方服务
- 支持多语言（Python/JS/Java）
- 完善的安全机制
- AI 智能判题系统
- DeepSeek-V3 深度集成
- 流式响应（SSE）提升体验
- 个性化错误诊断
- 完整的用户成长体系
- 经验等级动态计算
- 成就系统激励学习
- 实时排行榜竞争
- 现代化技术栈
- React 18 + TypeScript
- Spring Boot 3
- Monaco Editor（VS Code 同款）
- 良好的扩展性
- 模块化设计
- 接口规范
- 易于添加新语言、新题目