使用 html ids 查询 mongoDB 文档答案

【问题标题】：Using html ids to query mongoDB document使用 html ids 查询 mongoDB 文档
【发布时间】：2019-07-10 04:38:11
【问题描述】：

我一直在学习使用 mongoDB、Express、JQuery 和 Node.js 构建 CRUD 应用程序的教程。我现在正在尝试添加自定义功能，当我偏离我模仿的代码时，我无法编辑和检索文档。我很好奇发生了什么。我遵循了有效的删除和编辑功能，构建了一个新的编辑功能，以允许我更新多个字段并使用不同的 UI。我还想让文档使用字段来填充网站不同部分中各种块的 HTML，但我无法让文档返回。

我已经保证 get 和 put 函数在 Postman 中工作。

这是有效的：

app.put('/:id',(req,res) =>{
  const todoID = req.params.id;
  const userInput = req.body;

  db.getDB().collection(collection).findOneAndUpdate({_id: 
  db.getPrimaryKey(todoID)}, {$set: {todo: userInput.todo}}, 
 {returnOriginal : false},(err,result)=>{
  if(err)
       console.log(err);
  else{
      res.json(result);
  }
 });
});

app.post('/',(req,res)=>{
  const userInput = req.body;
  db.getDB().collection(collection).insertOne(userInput, 
 (err,result)=>{
    if(err)
       console.log(err);
    else
      res.json({result: result, document: result.ops[0]});
  });
});


app.delete('/:id',(req,res)=>{
   const todoID = req.params.id;

  db.getDB().collection(collection).findOneAndDelete({_id : 
   db.getPrimaryKey(todoID)},(err,result)=>{
    if(err)
      console.log(err);
      else
       res.json(result);
     });
 });

这个在邮递员中工作，但不在我的应用程序中：

app.get('/', (req,res)=>{
  const todoID = req.params.id;
  db.getDB().collection(collection).findOne({_id: 
  db.getPrimaryKey(todoID)}, (err,documents)=>{
     if(err)
      console.log(err);
     else{
      console.log(documents);
      res.json(documents);
     }
  });
});

这是有效的：

  const deleteShipment = (shipment, divShipmentID, deleteID) =>{
    let deleteBtn = $(`#${deleteID}`);
    deleteBtn.click(()=>{
      fetch(`/${shipment._id}`,{
        method: "delete"
      }).then((response)=>{
        return response.json();
      }).then((data)=>{
          if(data.ok == 1){
            $(`#${divShipmentID}`).remove();
          }
      });
    });
  }

这不是：

  const openEditOptions = (shipment, editID) =>{
    let editBtn = $(`#${editID}`);
    editBtn.click(()=>{
      console.log('activated');
      fetch(`/${shipment._id}`,{method: "get"}).then((response)=>{
        return response.json();
      }).then((data)=>{
        console.log(data);
        readyEditForm(shipment);
      });
    });
  }

这是 HTML：

<button class="shipment-edit" id="edit_5c6759a05b4290e978136ea0" 
 type="button">Edit</button>

 <button type="button" class="shipment-delete" 
 id="delete_5c6759a05b4290e978136ea0">Delete</button>

我希望该特定“货件”的编辑按钮在单击后会记录到控制台“激活”，并在控制台中返回货件数据以及函数 readyEditForm。什么都没发生。

【问题讨论】：

您的 editBtn fetch 似乎在应该放置的时候发出了 get 请求？
这听起来可能实际上是一个 jQuery 问题，对吧？如果没有任何内容记录到控制台，我觉得您没有调用openEditOptions（可以改为命名registerEditOptionsClickHandler）将处理程序附加到按钮。 api.jquery.com/click 有更多关于那里发生的事情的信息
@Countingstuff - 所以这个名字是骗人的。我应该澄清一下。期望的效果是实际上让编辑按钮打开一个表单，该表单将填充以前的值。我需要获取请求来获取这些值。然后出现一个 UPDATE 按钮，一旦点击它就会是一个 put 请求。
@willis 我已经使用按钮的 jquery 处理程序对其进行了测试，它会根据需要显示编辑表单，但它不会检索以前的值并使用 mongoDB 填充字段。有一些解决方法，但老实说，我对理解概念知识更感兴趣。当代码和 fetch 调用非常相似时，delete 按钮按预期工作，这让我发疯了。
好的，我对错误发生的位置有点困惑——获取数据的请求是否失败？表单没有填充数据吗？请求在网络标签中的外观如何？

标签： jquery node.js mongodb express

【解决方案1】：

req.params是路径中:后获取路由参数的方法。

app.get('/:id' (req, res) => {
console.log(req.params.id); //prints whatever the user put in place of ":id"
});

app.get('/' (req, res) => {
console.log(req.params.id); //prints undefined
});

一旦你修复了代码的那部分，其余部分应该可以工作。

【讨论】：

不幸的是，这不起作用。我已经更新了代码，因为这也是我最初认为应该的。我认为你是对的......但我认为 Wilis 也是正确的......问题在于事件处理程序。