为什么 express 调用我的 get 路线而不是我的 put 路线？

Question

我的快速申请中有以下路线：

router.get('/edit/:id', (req, res)=> {
    let searchQuery = {_id : req.params.id};
    console.log(searchQuery)
    Address.findOne(searchQuery)
        .then(address => {
            res.render('myForm', {address:address});
        })
        .catch(err => {
            console.log(err);
        });

});

我的表格是：

 <form action="/edit/<%= address.id %>?_method=put" method="POST">
      <input type="hidden" name="_method" value="PUT">
      <br>
      <input type="text" value="<%= address.name %>" name="name" class="form-control">
      <br>
      <input type="text" value="<%= address.email %>" name="email" class="form-control">
      <br>

      <button type="submit" class="btn btn-info btn-block mt-3">Update User</button>
  </form>

它工作正常，我可以看到从 mongodb 到 myForm 的数据。 现在，在我更新此表单中的一些数据并单击 udpdate 按钮后，我得到： Cannot POST /edit/62185a7efd51425bbf43e21a

注意到我有以下路线：

router.put('/edit/:id', (req, res)=> {
    let searchQuery = {_id : req.params.id};
    console.log(`searchQuery = ${searchQuery}`)
    Address.updateOne(searchQuery, {$set: {
        name: _.extend(name, req.body),
        email: req.body.email,

    }})
    .then(address => {
        res.redirect('/');
    })
    .catch(err => {
        res.redirect('/');
    });
});

在我的情况下，它看起来像是 express 调用 get 而不是 put 。 有什么建议吗？

Answer 1

浏览器本身只会从<form>执行 GET 和 PUT。 因此，您的浏览器正在发送一个 POST，而您的服务器没有该 POST 的处理程序。

您添加到 URL 的?_method=put看起来您希望在服务器上使用某种方法转换或覆盖工具，以便它能够识别该表单 POST，就好像它是一个 PUT。 您没有显示任何服务器端代码来识别覆盖查询参数，因此显然您的服务器只是接收 POST 并且没有处理程序，因此您收到错误CANNOT POST /edit/62185a7efd51425bbf43e21a 。

有几种不同的中间件解决方案可以执行此覆盖。 这是 Express 中的一个：http: //expressjs.com/en/resources/middleware/method-override.html ，您可以在该文档中查看如何部署/配置它。

基本上，您将使用以下命令安装模块：

npm install method-override

然后将其添加到您的服务器：

const methodOverride = require('method-override')

// override with POST having ?_method=PUT
app.use(methodOverride('_method'));

这将使用?_method=PUT查询字符串查看传入的 POST 请求，并将根据查询字符串中的参数修改方法，以便app.put()然后匹配它。

当客户端只能执行 GET 或 POST 而不能执行其他有用的方法（例如 PUT 或 DELETE）时，将使用此选项。

作为演示，这个简单的应用程序可以工作并且输出got it! 当我按下 HTML 表单中的更新用户按钮时，返回浏览器并/edit/123456789?_method=put在服务器控制台中。

const app = require('express')();
const path = require('path');
const methodOverride = require('method-override');


app.use(methodOverride('_method'));

app.get("/", (req, res) => {
    res.sendFile(path.join(__dirname, "temp.html"));
});

app.put('/edit/:id', (req, res) => {
    console.log(req.url);

    res.send("got it!");
});

app.listen(80);

而且， temp.html是这样的：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <form action="/edit/123456789?_method=put" method="POST">
         <br>
         <input type="text" value="hello" name="name" class="form-control">
         <br>
         <input type="text" value="hello@gmail.com" name="email" class="form-control">
         <br>

         <button type="submit" class="btn btn-info btn-block mt-3">Update User</button>
     </form>
</body>
</html>

Answer 2

您可以使用 app.route() 为路由路径创建可链接的路由处理程序。 因为路径是在单个位置指定的，所以创建模块化路由是有帮助的，因为这有助于减少冗余和拼写错误。 注意：您必须将表单标签中的方法更改为 PUT

<form action="/edit/<%= address.id %>" method="put">
//Backend.js
router.route('/edit/:id')
 .get((req, res) => {
    res.send('Get a random book')
 })
.put((req, res) => {
  res.send('Update the book')
})

为什么 express 调用我的 get 路线而不是我的 put 路线？

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-03-10 04:09:47

解决方案2
-1 2022-03-10 04:14:27

为什么 express 调用我的 get 路线而不是我的 put 路线？

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-03-10 04:09:47

解决方案2 -1 2022-03-10 04:14:27

解决方案1
1 已采纳 2022-03-10 04:09:47

解决方案2
-1 2022-03-10 04:14:27