快速获取网址并删除某些对象

时间:2018-10-08 10:57:04

标签: javascript node.js express pug

现在,我正在使用Express和LowDB开发CRUD(创建,读取,更新,删除)应用程序。

我成功开发了创建和读取功能,但是删除功能不起作用。

有这样的详细页面

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)及其DB ID

并删除流程代码是这样的。

/* 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文件中找到具有ID的数据。但它不起作用。当我尝试管理req.params.id时,它说未定义

我认为与“查看详细信息”页面存在冲突,因为“详细信息”页面代码是这样的。

/* 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 :(得分:2)

帕格对您的缩进非常明确。您的按钮未包含在表单内-这是一个同级。当您希望一个元素包含在另一个元素中时,请确保始终有两个空格。

将哈巴狗模板更改为此,按钮将正确提交:

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

但是等等!您不会将表单的餐厅ID传递回来。

我看不到您在哈巴狗中如何使用餐厅ID,但是您也需要以某种方式将其添加到表单中。假设它是在pug模板中称为restaurant.id的变量。

您的node.js路由处理程序尝试读取req.params.id,这意味着它将查找url以获取餐厅的ID。您可以将id添加到请求中,如下所示:

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

然后,您还需要修改路由以包含id参数:

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

执行此操作的另一种方法是添加一个隐藏的表单字段,该字段将ID与表单一起发送(说明此概念的here's an article)。如果您采用这种方式,则可以将表单更改为如下形式:

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;

第一种传递id(在url中)的方法是ajax请求的标准方法,第二种方法(作为表单中的字段)是发布表单的标准。