使用JavaScript实现用户信息管理与账号设置功能 | 豆包MarsCode AI刷题在当今的Web开发中，Java

在当今的Web开发中，JavaScript扮演着至关重要的角色，它能为网页赋予丰富的交互性和动态功能。今天，我们就通过一个完整的项目实例来深入了解如何使用JavaScript实现用户信息管理以及账号设置相关的功能。

一、项目概述

这个项目主要聚焦于用户个人信息的展示、编辑以及账号安全相关设置，比如修改手机号、密码等操作。它通过Vue.js框架进行构建，充分利用了JavaScript的各种特性来实现一个功能较为完备的用户设置页面。

二、页面结构与功能划分

（一）页面布局

项目的页面布局采用了左右结构，左边是导航栏，通过tab_item元素实现不同功能板块的切换，包括“我的信息”“我的头像”“账号安全”等选项。右边则是根据左边导航栏的选择，动态展示相应的内容区域。

（二）具体功能

我的信息板块：
- 用户可以查看和编辑自己的昵称、性别、出生日期、个性签名等基本信息。这里通过v-model指令实现了数据的双向绑定，使得用户在输入框中修改信息时，相应的user_info对象中的数据也会实时更新。例如，对于昵称的输入框：

<el-input v-model:readonly="isreadonly" 
    type="text"
    v-model="user_info.user_name"
    maxlength="30"
    show-word-limit
/>

- 编辑完成后，点击“保存”按钮可以将修改后的信息发送到服务器进行更新，这个过程通过`axios`库发起POST请求来实现，如`editUserInfo`函数：

function editUserInfo(){
    const [year, month, day] = user_info.birthday.split("-");

    axios.post('/api/edit_one_user', {
        user_id: my_id,
        mode: "all",
        name: user_info.user_name,
        saying: user_info.signature,
        gender:
            user_info.gender === "无性别"? 0 : user_info.gender === "男"? 1 : 2,
        birth: year + "年" + month + "月" + day+"日 "+"08时00分",
    }
    )  
   .then(async res =>{
        if (res.data === 200) {
            isreadonly.value=true;
            console.log("修改成功");
            infoVisible.value = true;
            info.value = "修改成功";
            cache.user_name = user_info.user_name;
            cache.signature = user_info.signature;
            cache.birthday = user_info.birthday;
            cache.gender = user_info.gender;

        } else {
            info.value = "修改失败";
            infoVisible.value = true;
            console.log(res,"修改失败");
        }
    }).catch((err)=>{
        console.log(err);
    });
}

我的头像板块：
- 允许用户上传新的头像和背景图片。在上传之前，会对图片的格式（必须是JPG格式）和大小（不能超过2MB）进行校验，通过AvatarUpload和bgcoverUpload函数来实现。以AvatarUpload函数为例：

function AvatarUpload(file) {
    const isJPG = file.type === "image/jpeg";
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
    }
    if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
    }
    if( isJPG && isLt2M){
        var imagepath = 'avatar/'+my_id+'/'+
            Math.random().toString(36).slice(-10)+'.jpg';
            put(imagepath,file).then((it)=>{
                axios.post('/api/update_user_avatar',{filepath:it!.name}).then((res)=>{
                    if(res.data === 200){
                        console.log('上传成功');
                        info.value = "修改成功";
                        infoVisible.value = true;
                        user_info.avatar = it!.url;
                    }else{
                        console.log('上传失败');
                    }
                })

            }).catch((err)=>{
                console.log('上传失败');
            })
    }
}

- 上传成功后，会更新页面上显示的头像或背景图片的链接，从而实现图片的实时更新展示。

3. 账号安全板块： - 提供了修改手机号和修改密码的功能。对于修改手机号，用户点击“修改”按钮后会弹出一个对话框，在对话框中输入新手机号和验证码等信息，通过showDialog函数来控制对话框的显示与隐藏以及相关数据的初始化：

const showDialog= (type) => {
    edit_type.value = type === 'phoneNumber'?1 : type === 'email'?2:3;
    if(type === 'phoneNumber'){
        dialogVisible_phone.value = true;
    }
    if(type === 'password'){
        dialogVisible_pw.value = true;
    }
    console.log(edit_type);
};

- 在输入验证码后，会通过`axios`发送请求到服务器进行验证，验证成功后才能进行手机号的更新操作，如`watch(phoneCode, (newPhoneCode) => {...})`函数中对验证码长度达到6位时的处理逻辑。
- 修改密码的功能类似，同样需要输入原密码、新密码、确认新密码以及验证码等信息，并且在点击“保存”按钮时，会对输入的密码进行MD5加密后发送到服务器进行更新，通过`updatePassword`函数实现：

function updatePassword(){
    const encryptedPw = md5(PWform.value.password)
    axios.post("/api/changePassword",{
        my_id:my_id,
        password:encryptedPw,
    }).then( res =>{
        edit_type.value = 0
        PWform.value.password = "";
        PWform.value.confirmPassword = "";
        console.log("success")
        info.value = "修改成功";
        infoVisible.value = true;
        dialogVisible_pw.value = false;
    })
}

三、数据获取与初始化

在页面加载时（通过onMounted钩子函数），会首先检查用户是否登录，如果未登录则提示并跳转到登录页面。若用户已登录，则会通过axios从服务器获取用户的初始信息，并填充到相应的user_info对象中，以便在页面上进行展示。例如：

onMounted(() => {
    //如果my_id为-1，说明用户未登录，跳转到登录页面
    if (my_id===-1) {
        info.value = "请先登录,即将跳转到首页";
        infoVisible.value = true;
        setTimeout(() => {
            window.location.href = "/activity";
        }, 2000);
    }
    client.options.refreshSTSToken().then((res) => {
        client.options.accessKeyId = res.accessKeyId;
        client.options.accessKeySecret = res.accessKeySecret;
        client.options.stsToken = res.stsToken;
    })
    axios
       .post("/api/get_one_user", {
            user_id: my_id,
        })
       .then(function (res) {
            // 处理获取到的用户信息
            const data  = res.data[0];
            if (res.status === 200) {
                // 更新用户信息
                user_info.user_name = data.name;
                user_info.signature = data.saying;
                user_info.gender = data.gender === 0? "无性别" : data.gender === 1? "男" : "女";
                user_info.birthday = data.birth;
                user_info.mobile = data.mobile;
                user_info.avatar = data.avatar;
                user_info.email = data.email;
                user_info.phone = data.phone;
                user_info.bgcover = data.bgcover; 
                console.log("user_info get success");
                cache.user_name = data.name;
                cache.signature = data.saying;
                cache.birthday = data.birth;
                cache.gender = user_info.gender;
                phoneNumber.value = data.phone;
            } else {
                console.log("获取用户信息失败");
            }
        });
});

四、总结

通过这个项目实例，我们可以看到JavaScript在实现用户信息管理和账号设置功能方面的强大能力。它借助Vue.js框架提供的各种指令和特性，如v-model、watch等，以及axios库进行数据的获取与更新操作，实现了一个交互性良好、功能较为丰富的用户设置页面。在实际开发中，我们可以根据类似的思路和方法，去拓展和完善更多与用户相关的功能模块，以满足不同项目的需求。

希望这个项目实例能让你对如何使用JavaScript实现此类功能有更清晰的理解和认识。