荣光课堂前端系统

项目简介

荣光课堂前端系统是一个基于 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 - 记录游戏结果

使用示例

// 用户登录
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 中修改：

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

数据库连接

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

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 调用都有错误处理机制

开发说明

添加新的游戏跟踪

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

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

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

添加访问跟踪

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

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

自定义 API 调用

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