zjh/RGKT

Fork 0

Files

zjh d5404c2a39 初始化

2025-10-10 19:44:14 +08:00

4.5 KiB

Raw Permalink Blame History

荣光课堂前端系统

项目简介

荣光课堂前端系统是一个基于 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+

注意事项

确保后端服务正常运行
用户需要登录后才能记录访问和游戏数据
网络异常时会使用本地数据作为备用
所有 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);

4.5 KiB Raw Permalink Blame History