Обработка операции удаления в express + движке шаблонов pug - PullRequest
Новая
       11

Обработка операции удаления в express + движке шаблонов pug

0 голосов
/ 04 марта 2020

Я изучаю express и создал приложение списка дел в express с механизмом шаблонов pug. В этом приложении я могу добавлять и просматривать задачи. Теперь я хочу добавить функцию удаления.

Мой код мопса для отображения списка дел: 

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

Вот мой express код для обработки удаления: 

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.

Что я делаю не так и как я могу это исправить?

Спасибо!

1 Ответ

2 голосов
/ 04 марта 2020

Почему вы получаете сообщение об ошибке:
Элемент ссылки: 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 /> или javascript, который будет загружен с шаблоном pug, добавьте: 

// 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);
      }
    });
  });
});
...