如何有选择地更新仅由用户填写表格的字段配置文件详细信息？

问题描述

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

我的表单有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,} );
    }
} );

任何帮助将不胜感激。 请随时提出有关该问题的任何问题。

解决方法

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

在检查了值的部分形式后，您应该可以将其更改为：

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

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