72 lines
1.8 KiB
Markdown
72 lines
1.8 KiB
Markdown
|
# 前端调试指南
|
|||
|
|
|
|||
|
|
## 问题：前端页面无内容展示
|
|||
|
|
|
|||
|
|
### 检查步骤
|
|||
|
|
|
|||
|
|
1. **检查浏览器控制台**
|
|||
|
|
- 打开开发者工具 (F12)
|
|||
|
|
- 查看 Console 标签页是否有错误信息
|
|||
|
|
- 查看 Network 标签页，检查 API 请求是否成功
|
|||
|
|
|
|||
|
|
2. **检查后端是否运行**
|
|||
|
|
```bash
|
|||
|
|
curl http://localhost:3001/api/health
|
|||
|
|
```
|
|||
|
|
应该返回：`{"status":"ok","message":"AI Learning Platform API"}`
|
|||
|
|
|
|||
|
|
3. **检查 API 连接**
|
|||
|
|
```bash
|
|||
|
|
curl http://localhost:3001/api/courses
|
|||
|
|
```
|
|||
|
|
应该返回课程列表的 JSON 数据
|
|||
|
|
|
|||
|
|
4. **检查前端是否运行**
|
|||
|
|
- 访问 http://localhost:3000
|
|||
|
|
- 应该能看到页面内容
|
|||
|
|
|
|||
|
|
### 常见问题
|
|||
|
|
|
|||
|
|
#### 1. API 请求失败
|
|||
|
|
- **症状**：控制台显示网络错误或 CORS 错误
|
|||
|
|
- **解决**：确保后端在 3001 端口运行，且 CORS 已配置
|
|||
|
|
|
|||
|
|
#### 2. 数据加载失败
|
|||
|
|
- **症状**：页面显示"加载中..."但一直不结束
|
|||
|
|
- **解决**：检查浏览器控制台的错误信息，查看 API 响应
|
|||
|
|
|
|||
|
|
#### 3. 样式未加载
|
|||
|
|
- **症状**：页面有内容但样式错乱
|
|||
|
|
- **解决**：确保 Tailwind CSS 已正确配置和编译
|
|||
|
|
|
|||
|
|
#### 4. 路由问题
|
|||
|
|
- **症状**：页面空白或 404
|
|||
|
|
- **解决**：检查 URL 路径是否正确，确保使用 React Router
|
|||
|
|
|
|||
|
|
### 调试工具
|
|||
|
|
|
|||
|
|
已添加的调试功能：
|
|||
|
|
- API 请求/响应日志（在浏览器控制台）
|
|||
|
|
- 错误边界组件（捕获 React 错误）
|
|||
|
|
- 详细的错误提示
|
|||
|
|
|
|||
|
|
### 手动测试 API
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 测试健康检查
|
|||
|
|
curl http://localhost:3001/api/health
|
|||
|
|
|
|||
|
|
# 测试获取课程
|
|||
|
|
curl http://localhost:3001/api/courses
|
|||
|
|
|
|||
|
|
# 测试获取特定课程
|
|||
|
|
curl http://localhost:3001/api/courses/{courseId}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 如果仍然无法解决
|
|||
|
|
|
|||
|
|
1. 清除浏览器缓存
|
|||
|
|
2. 重启开发服务器
|
|||
|
|
3. 检查 Node.js 版本（需要 16+）
|
|||
|
|
4. 查看完整的错误堆栈信息
|