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. 查看完整的错误堆栈信息
|