如何在Express中结合jsGrid从MongoDB获取数据实现CRUD表单

看起来你的核心问题是后端路由返回的是HTML页面，而jsGrid需要的是JSON格式的数据。你的GET /projects路由目前调用res.render返回渲染后的Pug页面，而非MongoDB查询到的项目数据JSON，这就导致前端AJAX拿到的是HTML内容，无法被jsGrid解析成数据项。下面是具体的修复步骤：

1. 修正GET /projects路由，返回JSON数据 #

把控制器里的GET路由改成返回JSON结构（匹配你前端loadData中result.data的预期）：

// GET all projects (返回JSON供jsGrid调用)
router.get('/projects', mid.requiresLogin, function (req, res) {
  Project.find(function (err, docs) {
    if (err) {
      // 错误处理，返回标准错误JSON
      return res.status(500).json({ error: err.message });
    }
    // 包装数据到data字段，对应前端的result.data
    res.json({ data: docs });
  });
});

2. 完善PUT/DELETE路由的逻辑与响应 #

你的更新和删除接口需要指定具体项目ID，同时返回JSON响应，前端也需要对应调整请求URL：

后端路由修正 #

// 更新单个项目
router.put('/projects/:id', mid.requiresLogin, function (req, res) {
  const projectId = req.params.id;
  Project.findByIdAndUpdate(
    projectId,
    req.body,
    { new: true, runValidators: true }, // 返回更新后的文档并触发模型验证
    function (err, updatedProject) {
      if (err) return res.status(400).json({ error: err.message });
      if (!updatedProject) return res.status(404).json({ error: "项目不存在" });
      res.json(updatedProject);
    }
  );
});

// 删除单个项目
router.delete('/projects/:id', mid.requiresLogin, function (req, res) {
  const projectId = req.params.id;
  Project.findByIdAndDelete(projectId, function (err, deletedProject) {
    if (err) return res.status(500).json({ error: err.message });
    if (!deletedProject) return res.status(404).json({ error: "项目不存在" });
    res.json({ message: "项目删除成功" });
  });
});

前端AJAX请求修正 #

updateItem: function(item) {
  return $.ajax({
    type: "PUT",
    url: `/projects/${item._id}`, // 用MongoDB默认的_id定位项目
    data: JSON.stringify(item),
    contentType: "application/json" // 告知后端请求体为JSON
  });
},
deleteItem: function(item) {
  return $.ajax({
    type: "DELETE",
    url: `/projects/${item._id}`,
    contentType: "application/json"
  });
}

3. 分离页面渲染与数据接口 #

你需要单独写一个路由用于渲染项目页面，避免和数据接口冲突：

// 渲染项目列表页面
router.get('/projects-page', mid.requiresLogin, function (req, res) {
  res.render('projects', {title: 'Current Projects - Client'});
});

用户访问/projects-page时加载页面，jsGrid则通过/projects接口获取数据。

额外检查点 #

• 确认Project模型中定义了title、location、resources等字段，与前端jsGrid的配置匹配。
• 打开浏览器开发者工具（F12）的Network标签，查看GET /projects请求的响应内容，确认返回的是正确的JSON数据。
• 测试时可暂时注释mid.requiresLogin中间件，排除权限拦截导致的请求失败。

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