初始化

2025-10-10 19:44:14 +08:00
parent 64db05717f
commit d5404c2a39
262 changed files with 44314 additions and 0 deletions
--- a/rg-09112127/README.md
+++ b/rg-09112127/README.md
@@ -0,0 +1,207 @@
+# 荣光课堂前端系统
+
+## 项目简介
+
+荣光课堂前端系统是一个基于 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);
+```