如何使用 Node 和 Mongoose 添加具有更新功能的按钮

Question

我创建了一个带有事件的 mongoose 数据库，每个事件都在一个引导卡内。我正在尝试找出一种方法如何将管理员重定向到一个页面，他可以在其中更新事件卡并保存到我的mongoose db。

我遇到的问题是，我已经有一张用于该卡的带有删除操作的表格，我需要能够拥有另一个表格。我的想法是添加一个链接，该链接将重定向到update_page.ejs，管理员可以在其中更改该事件的形式并保存它们。

admin.ejs 页面代码

<% events.forEach( function (event) { %>
      <form class="form-events" action="/delete" method="post">

        <div class="card col-lg-3" style="width: 18rem;">

          <img class="card-img-top">
          <div class="card-body">

            <h5 class="card-title"><%= event.title %></h5>
            <p class="card-text"><%= event.description %></p>
            <p class="card-text"><%= event.date %> </p>
            <p class="card-text"><%= event.capacity %></p>

            <a href="/create_event" class="btn btn-primary">Update</a>
            <button name="deleteBtn" value="<%=event._id%>" type="submit" class="btn btn-danger">Delete</button>
          </div>
        </div>

        <% }); %>
      </form>

目前update button 重定向到这里：

where 基本上是一个事件的创建。

我认为一个简单的解决方案就是在创建页面附近添加另一个按钮，例如更新。 所以我的第一个问题是，从我的admin.ejs 重定向到create_page.ejs 按下事件是否完成了 from 否则表单内容将为空，我必须使用 app.() method ( POST, PATCH ) 最后甚至可以在一个表单中添加 2 个操作吗？

app.js 代码

//Create new event route.
app.post("/create_event", function (req, res) {

  const event = new Event({
    title: req.body.ev_title,
    description: req.body.ev_desc,
    date: req.body.ev_date,
    capacity: req.body.ev_cap,
  });

  event.save(function (err) {
    if (err) {
      console.log(err);
    } else {
      res.redirect("/admin");
    }
  });
});

// Delete an event
app.post("/delete", function (req, res) {

  const deletedItemId = req.body.deleteBtn;

  Event.findByIdAndDelete(deletedItemId, function (err) {
    if (!err) {
      console.log("Successfully deleted");
      res.redirect("/admin");
    } else {
      console.log(err);
    }
  });
});

P.S 我对DELETE route 的解决方案是否正确？ 我对所有细节感到抱歉，但我对此完全陌生，并且这个项目的截止日期即将到来 谷歌搜索了所有这些方法，但这些文档现在对我来说似乎有点太技术性了。

Answer 1

您可以简单地向节点应用程序添加另一个路由，例如

// Update an event.
app.post("/update/:id", function (req, res) {
  const _id = req.params.id;
  const event = new Event({
    title: req.body.ev_title,
    description: req.body.ev_desc,
    date: req.body.ev_date,
    capacity: req.body.ev_cap,
  });

  event.findOne({ _id }, '_id title description date capacity', function (err, data) {
    if (err) {
      console.log(err);
    } else {
      res.render('path to create_data.ejs', { event : data });
    }
  });
});

在 create_data.ejs 文件中，用事件的值填充所有表单元素，例如 value=""。

注意：如果您在 create_data.ejs 文件中进行上述更改，请确保在 create_event 路由中传递一个空白事件属性，就像

// Create an event.
app.post("/create", function (req, res) {
  res.render('path to create_data.ejs', { event : {});
});

现在，
在 create_event.ejs 文件中添加关于创建按钮的条件，例如

<% if(_event.id){ %>
... Update button to save the updated event
<% }else{ %>
... Create button to create a new event
<% } %>

最后，在您的 admin.ejs 文件中更改

<a href="/create_event" class="btn btn-primary">Update</a>

到

<a href="/update/<%=event._id%>" class="btn btn-primary">Update</a>

希望这能回答你的问题。