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

【问题标题】：Handling delete operation in express + pug template engine在 express + pug 模板引擎中处理删除操作
【发布时间】：2020-06-16 16:01:33
【问题描述】：

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

我用来渲染待办事项列表的 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。

我做错了什么，我该如何解决？

谢谢！

【问题讨论】：

标签： node.js express pug

【解决方案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

在 <script /> 标记或将与 pug 模板一起加载的 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);
      }
    });
  });
});

【讨论】：