Question

通过设置从我的HTML5文档到Postgres数据库的简单路由来理解CRUD基础。我的GET和POST按钮可以使用，但我的DELETE却没有从数据库中删除。我意识到路由看起来都很相似（并尝试重命名它们以查看它是否会击中链接到数据库的回调函数，但没有用）。谁能告诉我为什么我的HTML5表单无法与我的到达数据库DELETE的路线一起使用？谢谢！

由于我所有其他代码都运行良好，因此我将仅包含我所指的代码。首先显示showing脚的HTML，然后显示index.js和路由，然后显示querys.js和数据库查询。（///////分离要提取代码的文档:)）

 <h1>Let's DELETE ONE Human</h1>
    <form action="/users/:id" method="delete">
        ID:<input type="number" name="id">
        <input type="submit" name="">
    </form>

    /////////////////////////////////////////////////////////////////

    app.get('/', (request, response) => {
      response.sendFile(path.join(__dirname + '/html/homepage.html'))
    }, db.getUsers)

    app.get('/newHuman.html', (request, response) => {
      response.sendFile(path.join(__dirname + '/html/newHuman.html'))
    })
    app.get('/users', db.getUsers)
    app.get('/users/:id', db.getUserById)
    app.post('/users', db.createUser)
    app.put('/users/:id', db.updateUser)
    app.delete('/users/:id', db.deleteUser)

    app.listen(port, () => {
      console.log(`App running on port ${port}.`)
    })
  ////////////////////////////////////////////////////////////////////////

const deleteUser = (request, response) => {
      const id = parseInt(request.query.id)

      pool.query('DELETE FROM users WHERE id = $1', [id], (error, results) => {
        if (error) {
          throw error
        }
        response.status(200).send(`User deleted with ID: ${id}`)
      })
    }

TL; DR
当app.delete和app.put具有完全相同的路由时，如何从HTML发送到正确的路由（即使仅两次发布）？尝试过重命名路线，但没有用，但我知道您无需重命名即可使用。这是路线：

app.put（' / users /：id '，db.updateUser） app.delete（' / users /：id '，db.deleteUser）

Answer 1

HTML表单方法仅支持GET和POST方法。

要么必须使用GET或POST，要么可以使用ajax或诸如request或axios之类的库来发出DELETE请求。 / p>

例如，如果您使用axios，请尝试以下代码。

如果已经导入jQuery和axios，请忽略它们。

<!-- import jQuery -->
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<!-- import axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<h1>Let's DELETE ONE Human</h1>
<form id='myFormId' action="/users/:id" method="delete">
    ID:<input type="number" name="id" id='deleteId'>
    <input type="submit" name="">
</form>


<script>
    $( document ).ready(function() {
        const myForm = $('#myFormId');
        myForm.submit((event) => {
            event.preventDefault();
            const id = $('#deleteId').val();
            const url = `/users/${id}`;
            axios.delete(url)
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        });
    });
</script>

Answer 2

另一种更简单的方法是使用名为 method-override 的npm模块。

在服务器的主入口点文件中，添加以下行：

const express = require('express');
const app = express();
const methodOverride = require('method-override');
app.use(methodOverride('_method'));

现在，在HTML表单中，您可以轻松使用PUT或DELETE请求：例如：

    <h1>Let's DELETE ONE Human</h1>
<form id='myFormId' action="/users/:id?_method=DELETE" method="delete">
    ID:<input type="number" name="id" id='deleteId'>
    <input type="submit" name="">
</form>

请注意表单的action属性，您现在要做的就是添加简单的行，您就完成了！

NodeJS（Express）-app.delete路由不起作用

2 个答案: