我正在尝试在 express 中构建一个简单的待办事项列表，但我无法使用“删除”按钮

Question

I'm trying to make a simple to do list and I can't figure out the "delete" button.我正在尝试制作一个简单的待办事项列表，但我无法弄清楚“删除”按钮。 I don't get any errors, the buttons just doesn't do anything.我没有收到任何错误，按钮只是没有做任何事情。 I tried a lot of things but just can't seem to get it working.我尝试了很多东西，但似乎无法正常工作。 I'm not sure if the problem is with form action in the ejs file or with the app.delete in my index.js or both.我不确定问题是出在 ejs 文件中的表单操作还是出在我的 index.js 中的 app.delete 或两者。 Thank you in advance!先感谢您！

ejs file: ejs文件：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
</head>

<body>
    <h1>To Do List</h1>
    <form action="/todo" method="post">
        <input type="text" name="task">
        <button>Add</button>
    </form>
    <ul>
        <% for(let c of todos) { %>
            <li>
                <%= c.task %>
                    <form action="/todo/<%=c.id%>?_method=DELETE" method="POST"><button>Delete</button></form>
                    <%= c.id%>

            </li>
            <% } %>

    </ul>
</body>

</html>

index.js file: index.js 文件：

const express = require('express');
const app = express();
const path = require('path');
const methodOverride = require('method-override');
const { v4: uuid } = require('uuid');
uuid();

app.use(methodOverride('_method'));
app.use(express.urlencoded({ extended: true }));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

let todos = [
    {
        id: uuid(),
        task: '1st task, testing'
    }
]

//TO DO INDEX
app.get('/todo', (req, res) => {
    res.render('todo', { todos });

})

//CREATE NEW TASK
app.post('/todo', (req, res) => {
    const { task, id } = req.body;
    todos.push({ task, id: uuid() });
    res.redirect('todo')

})

//DELETE TASK
app.delete('/todo/:id', (req, res) => {
    const { id } = req.body;
    todos = todos.filter(c => c.id !== id);
    console.log(todos);
    res.redirect('/todo')
})

app.listen(3000, () => {
    console.log('LISTENING ON PORT 3000')
})

Answer 1

You have configured the delete route in your express app with method type DELETE that is app.delete(…), but in your html form您已经在 Express 应用程序中配置了删除路由，方法类型为 app.delete(...)，但在您的 html 表单中

<form action="/todo/<%=c.id%>?_method=DELETE" method="POST">

The method is mentioned as POST.该方法称为 POST。 So express is not accepting it.所以快递是不接受的。

Form in html allows only GET and POST request. html 中的表单只允许 GET 和 POST 请求。

You'll need to trigger those delete api calls using fetch api or jquery or ajax.您需要使用 fetch api 或 jquery 或 ajax 来触发那些 delete api 调用。

Also i am not sure why that _method=DELETE is written in form action.我也不确定为什么 _method=DELETE 写在表单操作中。 According to me it not need there if your frontend is jinja/Django.根据我的说法，如果您的前端是 jinja/Django，则不需要。 If it's something else then I'm not sure.如果是其他原因，那么我不确定。

To get more insights about why it isn't working, open the.network tab in the browsers console and click your button.要进一步了解它为何不起作用，请在浏览器控制台中打开 .network 选项卡并单击您的按钮。 It should send a.network call to you backend and you should be able to see there why backend isn't doing anything for that call.它应该向你的后端发送一个.network 调用，你应该能够看到为什么后端没有为该调用做任何事情。

Answer 2

SOLVED IT解决了

I just had to change const { id } = req.body;我只需要更改const { id } = req.body; to const { id } = req.params; const { id } = req.params;

我正在尝试在 express 中构建一个简单的待办事项列表，但我无法使用“删除”按钮

问题描述

2 个解决方案

解决方案1
0 2022-03-15 19:27:29

解决方案2
0 2022-03-15 22:30:49

我正在尝试在 express 中构建一个简单的待办事项列表，但我无法使用“删除”按钮

问题描述

2 个解决方案

解决方案1 0 2022-03-15 19:27:29

解决方案2 0 2022-03-15 22:30:49

解决方案1
0 2022-03-15 19:27:29

解决方案2
0 2022-03-15 22:30:49