為什么 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