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

Question

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

我用来呈现待办事项列表的哈巴狗代码是：

  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

为什么会出现错误：
link 元素：a(class='button' href='/todos/'+val._id) delete 将渲染这样的 link 元素：<a class='button' href='/todos/5e570f67ed9efba99c938719'>delete</a>（假设 val._id 是 5e570f67ed9efba99c938719）。

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

修正
要删除待办事项，您需要做的是向 link 添加一个事件侦听器，这样当您单击它时，不会将您重定向到某个页面，而是执行附加到事件侦听器的处理程序以到达到您的服务器并删除待办事项。示例实现：

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

然后在 <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);
      }
    });
  });
});

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

Handling delete operation in express + pug template engine

node.js

express

pug