Express Router CRUD 更新和删除数据答案

【问题标题】：Express Router CRUD Update and Delete dataExpress Router CRUD 更新和删除数据
【发布时间】：2017-03-27 00:31:05
【问题描述】：

我在我的 web 应用程序中实现 CRUD 时遇到问题，数据使用 FORM 成功存储在云上的 mongoDB 中，还设法为用户显示数据。但我的问题是更新插入的数据以删除它们。请看看我的代码。当我单击更新/删除链接时，我得到无法获取/删除/或无法获取/更新/。如果有人可以帮助我，我将不胜感激。

server.js

    app.get("/guestbook", function(req,res){

         // res.render("pages/guestbook",{
        db.collection('newmessage').find().toArray(function (err, result)  {
      if (err) return console.log(err)
      res.render('pages/guestbook', {newmessage: result});

    });

          });
//Form to insert Guest book messages
      app.get("/newmessage", function(req,res){
          res.sendFile(__dirname  + "/pages/newmessage");

          res.render("pages/newmessage",{
              add_newMessage:"Add Your info & message!"
          });

      });
//Accepts users inputs and saves to mongoDB
      app.post("/newmessage" , function(req,res){
        var guestMessage = {
          username:req.body.username,
          country:req.body.country,
          message:req.body.message,
          date:req.body.date
        };
        //assert.equal(null, err);
  db.collection('newmessage').insertOne(guestMessage, function(err, result) {
      if (err) return console.log(err);
      console.log('Message saved to database');
      res.redirect('/guestbook');
    });

      });
  app.post("/update/:id", function (req,res){
    var guestMessage = {
          username:req.body.username,
          country:req.body.country,
          message:req.body.message,
          date:req.body.date
        };
        var Gid = req.params.id;

    db.collection('newmessage').findById(Gid, {$set: guestMessage}, function(err, result) {
      if (err) return console.log(err);
      result.save(function (err,result) {
       console.log('Message Updated');
          res.redirect('/guestbook');
      })


    });


      });

  app.get("/delete/: id" , function (req, res) {
     var Gid = req.params.id.toString();

     db.collection('newmessage').findById( Gid, function(err, result) {
  result.remove(function (err, result) {
      res.redirect('/guestbook');
  });


    });

});

newmessage.ejs

 <!DOCTYPE html>
<html lang="en">
<head>

    <% include ../partials/head %>
</head>

<body class="container">

    <header>
        <% include ../partials/header %>
    </header>
    <main>
        <div class="jumbotron">

        <form class="messageForm" method="post" action="/newmessage">
            <fieldset>
            <legend><%= add_newMessage %></legend>

    <div class="form-group">
      <label for="username">Username:</label>
      <input type="text" class="form-control" id="username" name ="username" placeholder="Enter Username">
    </div>
    <div class="form-group">
      <label for="country">Country:</label>
      <input type="text" class="form-control" id="country"name="country" placeholder="Enter country">
    </div>
    <div class="form-group">
      <label for="message">Message:</label>
      <input type="text" class="form-control" id="message" name= "message" placeholder="Enter message">
    </div>
    <div class="form-group">
      <label for="date">Date:</label>
      <input type="date" class="form-control" id="date"name="date" placeholder="Enter date">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>


    </fieldset>

</form>

        </div>
    </main>

    <footer>
<% include ../partials/footer %>
</footer>
</body>

</html>

guestbook.ejs

    <!DOCTYPE html>
<html lang="en">
<head>

    <% include  ../partials/head %>
</head>

<body class="container">

    <header>
        <% include  ../partials/header  %>


    </header>
    <main>
        <div class="jumbotron">

           <table  border = "1">
               <tr>

                    <th>Name</th>
                    <th>Country</th>
                    <th>Message</th>
                     <th>Date</th>
                       <th>Edit</th>
                       <th>Delete</th>
                </tr>

            <% for(var i=0; i<newmessage.length; i++) {%>


                <tr>

                    <td class="userInput"><%= newmessage[i].username %></td>
                    <td class="userInput"><%= newmessage[i].country %></td>
                    <td class="userInput"><%= newmessage[i].message %></td>
                    <td class="userInput"><%= newmessage[i].date %></td>
                    <td class="userInput"><a href="/update/<%= newmessage._id %>">Update</a></td>
                    <td class="userInput"><a href="/delete/<%= newmessage._id %>">Delete</a></td>
                </tr>


            <%} %>
            </table>


</div>
    </main>

     <footer>
<%  include  ../partials/footer  %>
</footer>

</body>

</html>

Sample OutPut/image

【问题讨论】：

标签： node.js express ejs

【解决方案1】：

首先，正如前面的答案所说，更新数据库中的条目传统上涉及使用 HTTP PUT 方法，如 on MDN here 所示，删除数据库中的实体传统上涉及使用 HTTP DELETE 方法，如看到on MDN here。话虽如此，您可能希望通过声明 app.put 和 app.delete 在您的 Express 应用程序中使用这些方法，如上一个答案所示。

现在使用这些方法的问题是这些方法不能很好地用于 HTML 页面，出于某种我现在不记得的原因。因此，开发人员不得不想出巧妙的方法来使用这些方法，其中最简单的方法就是在查询字符串中指定方法。

要将它与 Express 一起使用，您需要一些中间件，例如 method-override，它会告诉您的应用您将如何声明 HTTP 方法，这样 Express 就知道使用您定义为 app.put 的路由或任何。为了使用这个特定的包，您需要使这些更新和删除按钮成为具有 POST 方法的表单，并在操作中使用查询参数来指定方法。例如，在您的 server.js 中：

// ...
const methodOverride = require('method-override');
// ...
const app = express();
// ...
app.use(methodOverride('_method');

然后，要用于更新按钮，您需要将按钮从 a 标记更改为 form，如下所示：

<form method="POST" action="/update?_method=PUT">
  // inputs to change the data go here
  <button type="submit">Update</button>
</form>

这样，当用户点击按钮时，Express 会将 POST 请求解析为 PUT 请求，并调用适当的中间件。请记住将app.use(methodOverride('_method')) 行放在所有路由的声明之前。

作为对您的问题的更直接的回答，您收到“无法获取/更新”的原因是因为a 标签根据定义是仅发出 GET 请求的 HTML 元素，而您没有为“/update”的 GET 请求定义 Express 路由。当然，您可以忽略方法覆盖的内容，只需使用 POST 方法将这两个 a 标记切换为标准 form 元素（因为我看到这就是您在 server.js 中定义路由的方式），然而，这远非最佳实践，应该避免。

【讨论】：

【解决方案2】：

供更新和删除使用

app.put('/your_route/:id',function(e,r){});
app.delete('/your_route/:id',function(e,r){});

您不应请求 app.get 进行创建、更新或删除操作。

【讨论】：