Question

我有问题将CRUD实现到我的webapp，数据使用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

Answer 1

首先，正如之前的回答所说，更新数据库中的条目传统上涉及使用HTTP PUT方法，如on MDN here所示，并且删除数据库中的实体传统上涉及使用HTTP {{ 1}}方法，见on MDN here。话虽如此，您可以在Express应用中使用这些方法，方法是声明DELETE和app.put，如上一个答案所示。

现在使用这些方法的问题是这些方法对于HTML页面不能很好地工作，因为我现在还记不起来了。因此，开发人员不得不想出聪明的方法来使用这些方法，其中最简单的方法就是在查询字符串中指定方法。

要在Express中使用它，您需要一些中间件，例如method-override，告诉您的应用程序将如何声明HTTP方法，这样Express知道如何利用您定义的路由{{ 1}}或其他什么。要使用此特定包，您需要使用POST方法将这些更新和删除按钮设置为表单，并在操作中使用查询参数指定方法。例如，在您的server.js中：

app.delete

然后，要使用更新按钮，您需要将按钮从app.put标记更改为// ... const methodOverride = require('method-override'); // ... const app = express(); // ... app.use(methodOverride('_method');，如下所示：

这样，当用户单击该按钮时，Express会将POST请求解析为PUT请求，并调用正确的中间件。只需记住在声明所有路线之前放置form行。

作为对您的问题的更直接的回答，您获得“无法获取/更新”的原因是因为根据定义，<form method="POST" action="/update?_method=PUT"> // inputs to change the data go here <button type="submit">Update</button> </form>标记仅是生成GET请求的HTML元素，并且您没有为GET请求定义一条Express路由以'/ update'。当然，您可以忽略方法覆盖内容，只需使用POST方法切换标准app.use(methodOverride('_method'))元素的两个a标记（因为我看到这就是您在服务器中定义路由的方式） .js），但这远非最佳做法，应该避免。

Answer 2

使用

进行更新和删除

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

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

Express Router CRUD更新和删除数据

2 个答案: