RGKT/rg-09112127/README.md

# 荣光课堂前端系统

## 项目简介

荣光课堂前端系统是一个基于 HTML5、CSS3 和 JavaScript 的在线教育平台，支持课程学习、游戏互动和用户行为跟踪。

## 新增功能

### 1. 后端集成

- 与 Spring Boot 后端 API 完全集成
- 支持用户登录、课程数据同步、访问记录和游戏统计

### 2. 用户管理

- 用户登录/登出功能
- 用户状态持久化
- 用户信息显示

### 3. 数据管理

- 自动从后端加载课程和游戏数据
- 本地数据备用方案
- 数据同步和更新

### 4. 访问跟踪

- 自动记录用户访问课程、游戏和视频的行为
- 记录访问时长和详细信息
- 支持 IP 地址和用户代理记录

### 5. 游戏跟踪

- 记录游戏开始、结束和结果
- 支持胜负、正确/错误答案记录
- 记录得分、游戏时长和尝试次数

## 文件结构

```
rg-09112127/
├── html/                    # HTML页面
│   ├── indexHome.html      # 首页
│   ├── indexDetail.html    # 课程导航页
│   ├── courseHome.html     # 课程主页
│   └── play/               # 游戏页面
│       └── 示例游戏.html   # 示例游戏
├── js/                     # JavaScript文件
│   ├── apiService.js       # API服务类
│   ├── dataManager.js      # 数据管理器
│   ├── userManager.js      # 用户管理器
│   ├── accessTracker.js    # 访问跟踪器
│   ├── gameTracker.js      # 游戏跟踪器
│   └── courseConfig.js     # 课程配置（已更新）
├── css/                    # 样式文件
│   └── userDisplay.css     # 用户显示样式
└── README.md              # 说明文档
```

## 使用方法

### 1. 启动后端服务

确保后端 Spring Boot 应用已启动，默认端口 8080。

### 2. 用户登录

- 点击页面右上角的"登录"按钮
- 输入用户名和密码
- 登录成功后显示用户信息

### 3. 课程学习

- 访问课程页面会自动记录访问行为
- 观看视频会记录访问时长
- 离开页面时自动结束访问跟踪

### 4. 游戏互动

- 开始游戏时自动记录游戏开始
- 选择答案时记录尝试次数
- 游戏结束时记录结果和得分

## API 集成

### 主要 API 接口

- `POST /api/users/login` - 用户登录
- `GET /api/data/complete` - 获取完整数据
- `POST /api/records/access` - 记录访问
- `POST /api/records/game` - 记录游戏结果

### 使用示例

```javascript
// 用户登录
const result = await window.apiService.login("username", "password");

// 记录课程访问
window.trackCourseAccess("l1s01");

// 记录游戏开始
window.startGame(1, { gameType: "math_quiz" });

// 记录游戏胜利
window.recordGameWin(100, { score: 100, time: 120 });

// 结束访问跟踪
window.endAccess();
```

## 配置说明

### 后端 API 地址

在 `js/apiService.js` 中修改：

```javascript
this.baseUrl = "http://localhost:8080/api";
```

### 数据库连接

确保后端 `application.yml` 中的数据库配置正确：

```yaml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/rg_classroom
    username: root
    password: 123456
```

## 功能特性

### 1. 自动数据同步

- 页面加载时自动从后端获取最新数据
- 支持本地数据备用方案
- 实时更新课程和游戏列表

### 2. 智能访问跟踪

- 自动检测用户行为
- 记录详细的访问信息
- 支持多种访问类型（课程、游戏、视频）

### 3. 游戏统计

- 记录游戏胜负结果
- 统计得分和游戏时长
- 支持多次尝试记录

### 4. 用户状态管理

- 登录状态持久化
- 自动恢复用户会话
- 安全的登出功能

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 注意事项

1. 确保后端服务正常运行
2. 用户需要登录后才能记录访问和游戏数据
3. 网络异常时会使用本地数据作为备用
4. 所有 API 调用都有错误处理机制

## 开发说明

### 添加新的游戏跟踪

```javascript
// 在游戏开始时
window.startGame(gameId, gameData);

// 在游戏过程中
window.recordGameAttempt();

// 在游戏结束时
window.recordGameWin(score, finalData);
```

### 添加访问跟踪

```javascript
// 开始访问跟踪
window.trackCourseAccess(courseId);
window.trackGameAccess(gameId);
window.trackVideoAccess(courseId, videoId);

// 结束访问跟踪
window.endAccess();
```

### 自定义 API 调用

```javascript
// 使用API服务
const result = await window.apiService.get("/courses");
const user = await window.apiService.post("/users", userData);
```