Экспресс получить URL и удалить определенный объект - PullRequest
Новая
       12

Экспресс получить URL и удалить определенный объект

0 голосов
/ 08 октября 2018

Сейчас я разрабатываю приложение CRUD (создание, чтение, обновление, удаление) с Express и LowDB.

И я успешно разработал создание и чтение, но функция удаления не работает.

Есть подробная страница, подобная этой

enter image description here

, как вы можете видеть, есть значок корзины, и на самом деле у меня также есть некоторые проблемыкнопка отправки, но это не важно, поэтому я просто делаю кнопку отправки.

это часть файла мопса 

aside#Delete.is-visible
  form(method="post" action='/delete_process')
   input(type='submit')
  a#DeleteButton(role='button')
    img(src='https://png.icons8.com/ios/35/000000/waste-filled.png' id="go_up")
    span.text
      | Delete
      br
      b this

страница сведений содержит URL-адрес (например, DIR1WTqr2) и его идентификатор БД

и удаление кода процесса выглядит следующим образом. 

/* Delete Process */
router.post('/delete_process', function (req, res) {
    // GET Delete ID from URL
    let id=req.params.id;

    console.log(id);
    db.get('project').find({
      id: id
    }).remove().write();

});

Я думал, что смогу получить URL и найти данные с идентификатором в файле json.но это не работаетКогда я пытался утешить req.params.id, он сказал undefined

И я думаю, что есть столкновение с просмотром страницы детали, потому что код страницы детали похож на это. 

/* GET Detail View Page */
router.get('/:id', (req, res, next) => {
  // GET URL params and put it into :id
  let id = req.params.id;
  // console.log(id);
  // GET data id to use Object
  let data = db.get('project').find({
    id: id
  }).value();
  // Get github URL
  let url = data.githuburl;
  // Use Request Module to parsing Web page
  request(url, function (error, response, html) {
    if (error) {
      throw error
    };
    // Parsing readme ID in github page
    var $ = cheerio.load(html);
    $('#readme').each(function () {
      // save to readme Variable
      let readme = $(this).html();
      // console.log(data);
      // console.log(id);
      res.render('detail', {
        dataarray: data,
        name: data.name,
        url: data.url,
        explanation: data.explanation,
        imgurl: data.imgurl,
        markdown: readme,
        startDate: data.pjdate1,
        endDate: data.pjdate2,
        githuburl: data.githuburl,
        sumlang: data.sumlang
      });
    });
  });
});

из-за :id когда я нажимаю / delete_process, он переходит на страницу с подробностями, я думаю.

1 Ответ

0 голосов
/ 08 октября 2018

Мопс очень точен в ваших отступах.Ваша кнопка не содержалась внутри формы - это был брат или сестра.Убедитесь, что у вас всегда есть два пробела, когда вы хотите, чтобы элемент содержался внутри другого.

Измените шаблон мопса на это, и кнопка будет отправлена ​​правильно: 

aside#Delete.is-visible
  form(method="post" action='/delete_process')
    input(type='submit')
      a#DeleteButton(role='button')
        img(src='https://png.icons8.com/ios/35/000000/waste-filled.png' id="go_up")
        span.text
          | Delete
          br
          b this

Но подождите, это еще не все!Вы не передаете идентификатор ресторана обратно с формой.

Я не вижу, как вы используете идентификатор ресторана в мопсе, но вам нужно как-то добавить его в формутоже.Давайте предположим, что это переменная в шаблоне pug с именем restaurant.id.

Ваш обработчик маршрута node.js пытается прочитать req.params.id, что означает, что он будет искать URL для получения идентификатора ресторана,Вы можете добавить идентификатор к запросу следующим образом: 

aside#Delete.is-visible
  form(method="post" action='/delete_process/' + restaurant.id)
    input(type='submit')

Затем вам также необходимо изменить маршрут, включив в него параметр id: 

router.post('/delete_process/:id', function (req, res) {

Другой способсделать это будет добавить скрытое поле формы, которое отправляет идентификатор с формой ( вот статья , которая объясняет эту концепцию).Если вы сделаете это таким образом, вы можете изменить форму, чтобы она выглядела следующим образом: 

aside#Delete.is-visible
  form(method="post" action='/delete_process/' + restaurant.id)
    input(type='hidden' name='id' value= restaurant.id)
    input(type='submit')

Тогда ваш маршрут обработки удаления может подобрать его следующим образом: 

router.post('/delete_process', function (req, res) {
    // GET Delete ID from form field
    let id= req.body.id;

Первый методПередача идентификатора (в URL) является стандартной для запросов ajax, второй метод (как поле в форме) является стандартным для публикации формы.

...