Nodejs app.put点击无效

Nodejs app.put点击无效

app.put(’/users/:name’,function(req,res){
var b = req.body;
Users.update(
{name:req.params.name},
{name:b.name,age:b.age,email:b.email},
function(err){
res.redirect("/users/"+b.name);


});

});

h1 new User

form(method=“POST”,action="/users")

p Name: input#name(type=“text”, name=“name”) p Email: input#email(type=“email”, name=“email”) p Age: input#age(type=“number” ,name=“age”) p: button(type=“submit”) Create

其他的添加删除都行就是修改不行不知道错在哪


5 回复

要解决“Node.js app.put点击无效”的问题，我们需要确保以下几点：

  1. 请求方法：你需要使用PUT请求来更新用户信息，而不是POST。
  2. 表单提交：HTML表单默认只支持GET和POST方法。你可以通过JavaScript库（如axios或fetch API）发送PUT请求。

示例代码

Node.js服务器端代码

首先，确保你已经安装了Express和body-parser中间件：

npm install express body-parser

然后，更新你的服务器端代码：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// 使用body-parser中间件解析请求体
app.use(bodyParser.json());

app.put('/users/:name', function(req, res) {
    const { name, age, email } = req.body;
    const updatedUser = {
        name,
        age,
        email
    };

    Users.update({ name: req.params.name }, updatedUser, function(err) {
        if (err) {
            return res.status(500).send("Error updating user");
        }
        res.redirect(`/users/${req.params.name}`);
    });
});

// 模拟的Users模型
let Users = {
    update: function(filter, updatedUser, callback) {
        // 这里可以替换为实际的数据库操作
        console.log(`Updating user with filter: ${JSON.stringify(filter)}, updatedUser: ${JSON.stringify(updatedUser)}`);
        callback(null); // 假设没有错误
    }
};

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

客户端HTML和JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit User</title>
</head>
<body>
    <h1>Edit User</h1>
    <form id="editForm">
        <p>Name:</p>
        <input id="name" type="text" name="name">
        <p>Email:</p>
        <input id="email" type="email" name="email">
        <p>Age:</p>
        <input id="age" type="number" name="age">
        <button type="submit">Update</button>
    </form>

    <script>
        document.getElementById('editForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData(event.target);
            const data = Object.fromEntries(formData.entries());

            fetch(`/users/${data.name}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(result => {
                window.location.href = `/users/${data.name}`;
            })
            .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

解释

  1. 服务器端：

    • 使用body-parser中间件解析请求体中的JSON数据。
    • app.put('/users/:name')处理PUT请求，更新指定用户名的用户信息。
    • Users.update模拟数据库更新操作，实际应用中应替换为真实的数据库操作。

  2. 客户端：

    • 表单提交时阻止默认行为，使用JavaScript的fetch API发送PUT请求。
    • 将表单数据转换为JSON格式，并发送PUT请求到服务器。
    • 根据响应重定向到用户详情页面。

这样，你应该能够成功更新用户信息。


form(method="POST",action="/users")

form method是POST，对应是app.post，而非app.put

action是/users，无后缀，只能对应app.post(’/users’,function(req,res){… 若action是/users/alice，才能对应app.post(’/users/:name’,function(res,res){…

h1 update User

form(method=“POST”,action=’/users/#{user.name}’)

input(type=“hidden”, name="_method", value=“put”) p Name: input#name(type=“text”, name=“name”, value="#{user.name}") p Email: input#email(type=“email”, name=“email”, value="#{user.email}") p Age: input#age(type=“number” ,name=“age”, value="#{user.age}") p: button(type=“submit”) Update 这样的话还是不行的说

哦 我是新手啊 不知道怎么去表达，我加入日志功能了 我点击其他页面的时候有路径提示和时间，但是点击update更新按钮的时候什么反映都没。demo.js

从你的描述来看，问题可能出现在PUT请求的处理上。在HTML表单中，默认的提交方法是POST，而不是PUT。为了使PUT请求有效，你可以通过一些方式模拟PUT请求。以下是几种常见的解决方案：

解决方案 1: 使用method-override中间件

你可以使用method-override中间件来模拟HTTP方法。首先安装这个中间件：

npm install method-override --save

然后在你的应用中配置它：

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

const app = express();
app.use(methodOverride('_method'));

// 确保你的表单有一个隐藏字段来指定模拟的HTTP方法
app.put('/users/:name', function (req, res) {
    var b = req.body;
    Users.update(
        { name: req.params.name },
        { name: b.name, age: b.age, email: b.email },
        function (err) {
            if (err) {
                return res.status(500).send(err);
            }
            res.redirect("/users/" + b.name);
        }
    );
});

// 更新你的表单以包含隐藏的_method字段
<form method="POST" action="/users">
    <input type="hidden" name="_method" value="PUT">
    <p>Name:</p>
    <input id="name" type="text" name="name">
    <p>Email:</p>
    <input id="email" type="email" name="email">
    <p>Age:</p>
    <input id="age" type="number" name="age">
    <button type="submit">Update</button>
</form>

解决方案 2: 直接使用POST

如果你不想使用method-override中间件，也可以直接将表单的method设置为POST，并在服务器端根据请求体中的某个字段（如_method: 'PUT'）来处理PUT逻辑。

选择适合你的方案，确保客户端和服务器端都能正确处理HTTP方法。

回到顶部