Vue项目实战系列（一）：如何修改个人信息

Vue项目实战系列（一）：如何修改个人信息

当你登录网站的时候，那么你肯定会有自己的个人信息，比如昵称，账户名，头像，性别以及电话等等。

那么当我们想修改这些数据的时候，背后究竟做了那些东西，使用了那些技术点。

如下是示意图，从后台获取个人信息下来，点击各项信息，可以对其进行编辑，然后进行修改。

那么我们是如何向下一个页面传递数据的呢？我们需要传递那些信息，应该如何实现呢？

本章学习重点：

1. 页面之间传递数据。
2. 创建多个页面。
3. 数据修改成功后，跳转回去

实现思路

1. 首先，创建一个路由页面。当点击每项的时候，则传递过去。【跳转制定页面，并携带数据：携带参数名，选项名，本来的参数，因为页面只有一个，肯定是根据你传递不同的数据，先展示不同的内容，并且发送给后台不同的内容。】
2. 那么id呢？id这是通过获取当前用户来获取到的，所以我们可以通过发送一个请求来拿到，或者传递过来也行（减少一个请求量）。
3. 修改数据后，直接跳转到个人信息页

具体代码实现

1. 创建布局一

<template>
       <van-cell title="昵称" is-link to='/user/edit' :value="user.username"
       @click="toEdit('username','昵称',user.username)"/>
       <van-cell title="账号"  :value="user.userAccount" />
       <van-cell title="头像" is-link to='/user/edit'>
           <img style="height: 48px" :src="user.avatarUrl"/>
       </van-cell>
       <van-cell title="性别" is-link to='/user/edit' :value="user.gender"
                 @click="toEdit('gender','性别',user.gender)"/>
       <van-cell title="电话" is-link to='/user/edit' :value="user.phone"
                 @click="toEdit('phone','电话',user.phone)"/>
</template>

<script setup>
    import {useRouter} from "vue-router"
    import myAxios from "../plugins/myAxios"
    import {getCurrentUser } from "../service/user";

    import {ref,onMounted} from 'vue'
    const router = useRouter()
    const user = ref({})
    const toEdit=(editKey,editName,currentValue)=>{
        router.push({
            path:'/user/edit',
            query:{
                editKey,editName,currentValue
            }
        })
    }

    onMounted(async ()=>{
           user.value = await getCurrentUser()

    })
</script>

使用的路由的query参数：向指定路径传递参数。

   router.push({
        path:'/user/edit',
        query:{
            editKey,editName,currentValue
        }
    })

2. 创建布局二

<template>
    <van-form @submit="onSubmit">
        <van-field
                v-model="editUser.currentValue"
                :name="editUser.editKey"
                :label="editUser.editName"
                :placeholder="'请输入${editUser.editName}`'"
        />
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>
</template>

<script setup lang="ts">
    import {useRoute,useRouter} from "vue-router";
    import {getCurrentUser } from "../service/user";
    import myAxios from "../plugins/myAxios"

    import {ref} from "vue";
    const route = useRoute();
    const router =useRouter();

    /*获取路由参数*/
    const editUser = ref({
        editKey: route.query.editKey,
        currentValue: route.query.currentValue,
        editName: route.query.editName,
    })
    const onSubmit = async () => {
        // 异步方法必须添加 await 才可以拿到数据, 否则拿到的是 promise 对象
        const res = await myAxios.post("/user/update", {
            "id": currentUser.id,
            [editUser.value.editKey]: editUser.value.currentValue // 动态取值，参数名不固定
        })
        console.log("修改用户信息", res);
        if (res.data.code == 0 && res.data.data > 0) {
            alert("修改成功");
            router.replace("/user");
        } else {
            alert("修改失败");
        }
    };
</script>

接受使用query传递的参数

const editUser = ref({
    editKey: route.query.editKey,
    currentValue: route.query.currentValue,
    editName: route.query.editName,
})

[editUser.value.editKey]: editUser.value.currentValue // 动态取值，参数名不固定
，中括号内的editUser.value.editKey是一个属性名，它需要从一个对象中动态地获取属性的值。

const foo = {bar: 'hello world'}
const prop = 'bar'

console.log(foo[prop]) // 输出 "hello world"

以上代码中，prop变量存储了属性名bar，然后使用foo[prop]来访问foo对象的bar属性，这里中括号内的prop变量会被动态解析并作为属性名来访问。