如何有选择地更新仅由用户在表单中填写的字段（个人资料详细信息）？

Question

我需要更新用户个人资料详细信息，但我的表单仅在所有输入字段都已填写时才有效，我该如何仅更新那些已填写在表单中的个人资料详细信息。

我的表单有 4 个可更新的字段：姓名、电子邮件、年龄、密码，我接受以下表单：

<h1>Update profile details</h1>
    <form action="" id="update-profile-form">
        <input type="text" id="update-name" placeholder="New Name"> 


        <input type="text" id="update-email" placeholder="New Email"> 


        <input type="text" id="update-age" placeholder="New Age"> 


        <input type="text" id="update-password" placeholder="New Password"> 


        <button id="update-button">Update Filled</button>
        <p id="update-details"></p>
    </form>

我的服务器端JS代码是：

const updateForm = document.querySelector( "#update-profile-form" );
updateForm.addEventListener( "submit", ( e ) => {
    const name = document.querySelector( "#update-name" ).value;
    const email = document.querySelector( "#update-email" ).value;
    const age = document.querySelector( "#update-age" ).value;
    const password = document.querySelector( "#update-password" ).value;

    console.log( 'Profile update request' );
    e.preventDefault();
    fetch( "http://localhost:3000/users/me", {
        method: 'PATCH',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json',
            "Authorization": `Bearer ` + `${ inMemoryToken }`
        },
        body: JSON.stringify( {
            "name": name,
            "email": email,
            "age": age,
            "password": password
        } )
    } ).then( res => res.json() )
        .then( res => {
            console.log( res );
            e.preventDefault();
            document.querySelector( "#update-details" ).innerHTML = JSON.stringify( res );
           
        }
        );
} );

我的后端 NodeJS 代码是：

router.patch( "/users/me", auth, async ( req, res ) => {
    const updates = Object.keys( req.body );
    const allowedUpdates = [ "name", "email", "password", "age" ];
    const isValidOperation = updates.every( ( update ) =>
        allowedUpdates.includes( update )
    );

    if ( !isValidOperation ) {
        return res.status( 400 ).send( { error: "Invalid updates" } );
    }

    try {
        updates.forEach( ( update ) => ( req.user[ update ] = req.body[ update ] ) );
        await req.user.save();

        res.status( 201 ).send( req.user );
    } catch ( e ) {
        res.status( 404 ).send( {
            e,
        } );
    }
} );

我们将不胜感激任何帮助。有问题欢迎随时提问

Answer 1

在您的后端代码中 updates.forEach( ( update ) => ( req.user[ update ] = req.body[ update ] ) ); 行之前放置一个 console.log(updates)。

在检查部分表单中的值后，您应该能够将其更改为如下内容：

updates.forEach(update => {
    if (req.body[update] != "") {
        req.user[update] = req.body[update] 
    }
});

以便它仅在请求不是空字符串时应用更新（取决于您表单上的默认“空”值）。

如何有选择地更新仅由用户在表单中填写的字段（个人资料详细信息）？

How to selectively update fields (profile details) only filled by the user in the form?

html

javascript

backend

serverside-javascript

node.js