抱歉，如果这是超级明显的，但我是新的编码。我使用node.js, express, mongoose和mongodb尝试添加更新功能到我的应用程序，使其通过添加编辑按钮CRUD。每当我点击编辑按钮时，它仍然只是删除项目，就像我点击复选框一样。我认为这是因为我调用的项目与"待处理项目"的形式相同。但似乎我的更新代码甚至没有注册到我的主机上。//编辑项的日志没有记录。
我希望它通过它的id识别项目时，它的编辑按钮提交(然后把项目在newTask输入进行编辑和重新提交作为更新，但我还没有弄清楚如何链接那些2)。我知道代码是不稳定的，我只是想弄清楚如何把这个放在一起，所以感谢任何帮助!
<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);
}
});
}
});
在您的表单中，您使用的是method="post"，这意味着请求将提交给您的app.post("/update" ..... )，这就是为什么您总是在那里登陆，在那里删除您的项目。
你必须做两件事:
- 将
app.put('/update' ...)更改为app.post('/update' ...) - 将
app.post('/update' ...更改为语义上更相关的内容，如app.post('/delete' ...，并分别更改删除方法的前端。
您在Express中有app.put("/update", function(req, res)，但在您的表单中有<form action="/update" method="post">，这与您的删除路由匹配。
关于你的第二个问题，有很多方法可以在Javascript中填充项目表单，但如果你告诉我们你是否使用框架，可能会有更有效的方法。
您的表单总是在提交http请求时使用"POST"方法，但在代码中，app.post("update")会删除
项。