208 lines
4.5 KiB
Markdown
208 lines
4.5 KiB
Markdown
# 荣光课堂前端系统
|
|
|
|
## 项目简介
|
|
|
|
荣光课堂前端系统是一个基于 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);
|
|
```
|