在express + pug模板引擎中处理删除操作

Question

我正在学习快递，并已使用pug模板引擎在快递中创建了一个待办事项列表应用。在此应用程序中，我可以添加和查看待办事项。现在，我要添加删除功能。

我显示待办事项清单的哈巴狗代码是：

  ol
  each val in toDoList
    li= val.taskName
    a(class='button' href='/todos/'+val._id) delete

这是我处理删除的明确代码：

app.delete('/todos/:id', function(req, res){
    db.collection('todos').findOneAndDelete({id: req.params.id}, function(err, results) {
      if (err) return res.send(500, err);
      res.redirect('/');
  });

});

我收到此错误Cannot GET /todos/5e570f67ed9efba99c938719。

我在做什么错，如何解决？

谢谢！

Answer 1

为什么会出现错误：链接元素：a(class='button' href='/todos/'+val._id) delete将呈现如下链接元素：<a class='button' href='/todos/5e570f67ed9efba99c938719'>delete</a>（假设val._id为5e570f67ed9efba99c938719）。

单击此链接不会删除待办事项，而是将您带到URL类似于此/todos/5e570f67ed9efba99c938719的页面，这将导致客户端应用对该服务器向服务器发出GET请求。由于您没有任何与服务器中客户端应用程序的请求路由匹配的路由处理程序，因此会出现错误：Cannot GET /todos/5e570f67ed9efba99c938719.

修复要删除待办事项，您需要做的是在链接中添加一个事件监听器，这样，当您单击它时，将执行与事件监听器相连的处理程序，而不是将您重定向到某个页面，而是将其重定向到服务器。并删除待办事项。一个示例实现：

// Add some more properties to the delete button
a(class='button delete-todo' data-articleid=val._id href='/todos/'+val._id) delete

然后在将与pug模板一起加载的<script />标记或javascript文件中，添加以下内容：

// SOURCE: https://github.com/elvc/node_express_pug_mongo/blob/master/public/js/main.js
$(document).ready(function(){
  $('.button.delete-todo').on('click', function(e){
    e.preventDefault();
    $target = $(e.target);
    const id = $target.attr('data-articleid');

    $.ajax({
      type: 'DELETE',
      url: '/todos/'+id,
      success: function (response){
        // Whatever you want to do after successful delete
        console.log(response);
        alert('Deleting article');
      },
      error: function(err){
        // Whatever you want to do after a failed delete
        console.error(err);
      }
    });
  });
});