ai_learn_node/DEBUG.md

前端调试指南

问题：前端页面无内容展示

检查步骤

1. 检查浏览器控制台

   • 打开开发者工具 (F12)
   • 查看 Console 标签页是否有错误信息
   • 查看 Network 标签页，检查 API 请求是否成功

2. 检查后端是否运行

   curl http://localhost:3001/api/health
   

   应该返回：{"status":"ok","message":"AI Learning Platform API"}

3. 检查 API 连接

   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

# 测试健康检查
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. 查看完整的错误堆栈信息