Koa+React学生管理系统故障排查：数据存储与功能异常

1. 数据无法保存至MongoDB Compass #

• 核对MongoDB连接字符串：确认后端配置的MONGODB_URI为本地Compass的正确地址，比如mongodb://localhost:27017/studentDB，检查端口（默认27017）、数据库名称是否拼写正确。
• 确认MongoDB服务状态：执行mongod命令或查看系统服务，确保本地MongoDB服务处于运行状态。
• 检查数据模型字段匹配：验证Student/Course模型的字段定义（必填项、类型）是否和前端提交的参数一致，比如模型要求name为必填字符串，前端是否漏传该字段。
• 打印后端错误日志：在控制器的保存方法中添加try/catch捕获异常，输出具体错误信息，示例：

async createStudent(ctx) {
  try {
    const student = new Student(ctx.request.body);
    await student.save();
    ctx.body = student;
  } catch (err) {
    console.error('保存学生失败:', err);
    ctx.status = 500;
    ctx.body = { error: err.message };
  }
}

• 排查MongoDB权限：若本地MongoDB开启了认证，连接字符串需携带用户名和密码；未开启认证则确保字符串无多余认证参数。

2. React端课程更新功能失效 #

• 确认请求方法：更新操作需使用PUT/PATCH，检查前端axios/fetch是否误用了POST/GET方法。
• 验证ID参数传递：后端更新接口通常需要URL携带课程ID（如/api/courses/:id），确认前端是否正确拼接ID，示例：

// 正确写法
axios.put(`/api/courses/${courseId}`, updatedData)

• 检查后端更新逻辑：确认控制器是否使用findByIdAndUpdate/findOneAndUpdate并配置{ new: true }返回更新后的数据，避免因未返回更新结果导致前端无响应。
• 验证前端状态更新：请求成功后，前端需调用setState或dispatch action更新本地课程列表，否则页面不会同步显示修改内容。
• 查看浏览器控制台：通过Network面板检查请求状态码、响应内容，Console面板查看是否有JS报错，定位请求或渲染层面的问题。

3. 学生功能无法获取数据（Postman正常，前端异常） #

• 核对请求路径：确认前端调用学生接口的URL与后端路由完全一致，包括域名、端口、路径（如后端是/api/students，前端是否写成/api/student）。
• 检查跨域配置：后端需通过@koa/cors配置允许前端域名的请求，示例：

const cors = require('@koa/cors');
app.use(cors({
  origin: 'http://localhost:3000', // 前端地址
  credentials: true
}));

若后端开启credentials，前端axios需设置withCredentials: true，否则请求可能被拦截。

• 验证请求头与参数：在Network面板查看Content-Type是否为application/json，确认前端传递的参数格式（如分页参数是否为数字类型）符合后端要求。
• 核对返回数据格式：确认后端返回的数据结构与前端解析逻辑匹配，比如后端返回{ data: students }，前端需取response.data.data而非直接取response.data。

内容的提问来源于stack exchange，提问作者QWERTY