Question

对不起，如果这太明显了，但我是编码新手。我正在使用 node.js、express、mongoose 和 mongodb 尝试向我的应用程序添加更新功能，以通过添加编辑按钮使其成为 CRUD。每当我单击编辑按钮时，它仍然只是删除项目，就像我单击复选框一样。我想这是因为我从相同形式的“待处理项目”中调用该项目，但似乎我的更新代码甚至没有注册为 //Edit items 的 console.logs 未记录。

我希望它在提交编辑按钮时通过其 id 识别项目（然后将项目放入 newTask 输入中以进行编辑并作为更新重新提交，但我还没有弄清楚如何链接这两个）。我知道代码很奇怪，我只是想弄清楚如何将它们组合在一起，所以感谢您的帮助！

    <div class="box">
      <!-- Item add function -->
      <%  newListItems.forEach(function(item){ %>

      <!-- Form for pending items -->
      <form action="/update" method="post">
        <!-- Items -->
        <div class="item">
          <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form.submit()">
          <button type="submit" class="editItmbtn" name="editItembtn">E</button>
          <p><%=item.name%></p>
        </div>
        <input type="hidden" name="listName" value="<%= listTitle %>"></input>
      </form>
      <%  }) %>
      <!-- End pending items -->

      <!-- Form to add items -->
      <form class="item" action="/" method="post">
        <input type="text" name="newTask" id="id" placeholder="Add new task..." autocomplete="off">
        <button type="submit" name="list" value="<%= listTitle %>">+</button>
      </form>
    </div>

''//Requirements 
const express = require("express"); 
const session = require("express-session")//for sessions 
const favicon = require("serve-favicon"); //for favicon 
const path = require("path");// for favicon 
const bodyParser = require("body-parser"); 
const cookieParser = require("cookie-parser"); //for sessions 
const mongoose = require("mongoose"); const _ = require("lodash"); 
const MongoStore = require("connect-mongo")(session); 
const app = express();

// Edit items
app.put("/update", function(req, res) {
  const itemName = req.body.newTask;
  const taskID = req.body.editItmbtn;
  const userInput = req.body.id;

  Item.useFindAndModify(taskID), {
      $set: {"/update": userInput}}, {new: true},
    (err, result) => {
      if (err) {
        console.log("ERROR");
      } else {
        res.redirect("/");
        res.render("list", {
          listTitle: "Tasks",
          newListItems: foundItems
        });
      }
    }
});

// Delete checked items
app.post("/update", function(req, res) {
  const checkedItemId = req.body.checkbox;
  const listName = req.body.listName;

  if (listName === "Tasks") {
    Item.findByIdAndRemove(checkedItemId, function(err) {
      if (!err) {
        console.log("Successfully deleted checked item.");
        res.redirect("/");
      }
    });
  } else {
    List.findOneAndUpdate({
      name: listName
    }, {
      $pull: {
        items: {
          _id: checkedItemId
        }
      }
    }, function(err, foundList) {
      if (!err) {
        res.redirect("/" + listName);
      }
    });
  }
});

Answer 1

在您的表单中，您使用的是 method="post"，这意味着请求将提交给您的 app.post("/update" ..... )，这就是为什么您总是在那里登陆，并在那里删除您的项目。

你必须做两件事：

将 app.put('/update' ...) 更改为 app.post('/update' ...)
将用于删除项目的 app.post('/update' ... 更改为语义上更相关的内容，例如 app.post('/delete' ...，并分别更改删除方法所使用的前端。

Answer 2

您的表单始终使用“POST”方法提交 http 请求，但在您的代码中，app.post("update") 会删除该项目

Answer 3

您在 Express 中有 app.put("/update", function(req, res)，但在您的表单中有 <form action="/update" method="post">，这与您的删除路线相匹配。

对于您的第二个问题，有很多方法可以在 Javascript 中填充您的项目表单，但如果您告诉我们您是否使用了框架，那么可能会有更有效的方法。

添加更新功能

3 个答案: