我是后端的新手，目前使用Node/Express/MongoDB，前端使用EJS模板。我正在尝试构建一个简单的todo列表应用程序，用于在不使用Mongoose的情况下练习CRUD操作，只使用本地MongoDB。很难找到如何通过单击按钮使用ObjectID来删除/更新列表中的项目。一个月来，我一直在尝试不同的方法并寻找解决方案，但仍然没有成功。到目前为止，我已经找到了如何通过ObjectID删除和更新它，方法是在快速删除请求过滤器中输入实际ID，或者将其添加到提取url的末尾，并在快速删除要求中使用req.params.ID来捕获从提取url传来的ID。但这不会起作用，因为我不知道添加的ObjectID的新项目是什么。那么，在事先不知道新Id是什么的情况下，我如何通过点击按钮来删除/更新每个项目的ObjectID呢？我做错了什么？我似乎需要以某种方式将ID传递到获取url的末尾，但我不知道如何获取和附加它。请原谅收藏名称，哈哈，这是我的动机。
这是我的代码：
//EJS CODE (index.ejs)
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Conquering</title>
<meta charset="UTF-8">
</head>
<body>
<form action="/kickass" method="POST">
<input type="text" placeholder="Name" name="name">
<input type="number" placeholder="Age" name="age">
<input type="text" placeholder="Location" name="location">
<button type="submit">Submit</button>
</form>
<ul>
<% for(let i = 0; i < kickass.length; i++) {%>
<li>
<span><%= kickass[i].name + kickass[i].age + kickass[i].location %></span>
<button type="button" class="delUserBtn">X</button>
</li>
<% } %>
</ul>
<script src="main.js"></script>
</body>
</html>
//EXPRESS CODE (app.js)
require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const ejs = require('ejs');
const ObjectID = require('mongodb').ObjectID;
const MongoClient = require('mongodb').MongoClient;
const dbUrl = process.env.DATABASE_URL;
const port = process.env.PORT || 7000;
const app = express();
// SERVER
app.listen(port, () => {
console.log(`Server is listening on port ${port}..`);
});
// DATABASE
MongoClient.connect(dbUrl, { useUnifiedTopology: true }, (err, client) => {
// CHECK FOR ERRORS & CONNECTION
if (err) throw err;
console.log('Database connection established..');
// DATABASE & COLLECTION CONFIG
const db = client.db('mydb');
const dbCollection = db.collection('kickass');
// MIDDLWARES
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(express.static('public'));
// READ ROUTES
app.get('/', (req, res) => {
dbCollection.find().toArray()
.then(results => {
res.render('index.ejs', { kickass: results });
})
.catch(error => console.error(error))
});
// CREATE ROUTES
app.post('/kickass', (req, res) => {
dbCollection.insertOne(req.body)
.then(results => {
console.log(`1 document added`);
res.redirect('/');
})
.catch(error => console.error(error))
})
// DELETE ONE ROUTES
app.delete('/kickass/:id', (req, res,) => {
let o_id = ObjectID(req.params.id);
dbCollection.findOneAndDelete({ _id: o_id }, (err, result) => {
if (err) throw err;
res.send('user deleted')
})
})
});
DELETE CONTROLLER (main.js)
const delUserBtn = document.querySelectorAll('.delUserBtn');
for(let i = 0; i < delUserBtn.length; i++) {
delUserBtn[i].addEventListener('click', delUser);
};
function delUser() {
fetch('/kickass/:id', {
method: 'delete',
headers: { 'Content-Type': 'application/json' },
})
.then(res => {
if(res.ok) {
res.status(200)
}
})
.then(window.location.reload())
.catch(console.error)
};
这段代码目前不起作用，但如果您在获取URL的末尾传递一个ID，或者用实际的ID替换req.params.ID，它就会起作用。经过3-4周的研究和尝试，这正是我现在的处境。
查看此网站：
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
您可以在EJS文件中的按钮中设置自定义数据属性。该自定义数据属性可以包含待办事项列表项的对象ID。点击后，您可以使用"；这个"；关键字。