浪花 - 用户信息编辑页

1. 创建用户信息编辑页

• 创建 UserEditPage.vue
• 配置路由

{
  path: '/user/edit',
  name: 'edit',
  component: UserEditPage
},

2. 点击单元格跳转页面

• 使用 Cell 单元格组件提供的 click 点击事件
• 更新：之前是在 <router-link> 中通过 to 属性来制定跳转的路由，现在需要获取当前所需修改表单项的信息，通过 @click 方法来记录用户点击行为

• 传递三个参数：要修改的字段名，修改标签（提示修改项），当前的单元格的值

• 作用：在点击该单元格时，告诉 UserEditPage 页面我们要修改哪一项

• 点击触发路由跳转并记录路径参数：使用 vue-router 提供的 useRouter 进行路由跳转

  • 使用 push() 方法进行页面跳转

    • 通过 path 记录要跳转的路由

    • 通过 query 记录路径参数：editKey、currentValue

<template>
  <van-cell title="昵称" is-link :value="user.username" @click="toEdit('username', '昵称',user.username)"/>
  <van-cell title="账户" :value="user.userAccount" @click="toEdit('userAccount', '账户',user.userAccount)"/>
  <van-cell title="头像" :value="user.avatarUrl" @click="toEdit('avatarUrl', '头像',user.avatarUrl)">
    <img :src="user.avatarUrl"/>
  </van-cell>
  <van-cell title="性别" is-link :value="user.gender" @click="toEdit('gender', '性别',user.gender)"/>
  <van-cell title="手机号" is-link :value="user.phone" @click="toEdit('phone', '手机号',user.phone)"/>
  <van-cell title="邮箱" is-link :value="user.email" @click="toEdit('email', '邮箱',user.email)"/>
  <van-cell title="星球编号" :value="user.planetCode" />
  <van-cell title="标签信息" is-link :value="user.tags" @click="toEdit('tags', '标签信息',user.tags)" />
  <van-cell title="注册时间" :value="user.createTime" />

</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const user = {
    id: 1,
    username: "Ghost",
    userAccount: "Ghost",
    avatarUrl: "https://himg.bdimg.com/sys/portraitn/item/public.1.e137c1ac.yS1WqOXfSWEasOYJ2-0pvQ",
    gender: '男',
    phone: '18056743536',
    email: '20890470@qq.com',
    planetCode: '1',
    tags: 'Java,大三',
    createTime: '2023-12-03 16:18:43',
};

const router = useRouter();

const toEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      editKey,
      editName,
      currentValue,
    }
  })
}

</script>

<style scoped>

</style>

3. 路由路径参数传递

• 目的：用户信息编辑页需要取到要修改项的数据
• 使用 vue-router 提供的 useRoute() 钩子函数，可以获取到当前的路由信息和参数

useRouter() 和 useRoute() 的区别：

• useRouter() ：返回路由器实例 router。相当于在模板中使用 $router
  • 可以通过该实例访问路由对象和方法，如 router.push("/user/edit")
  • 进行编程式导航、获取当前路由信息等操作
• useRoute() ：返回当前的路由地址。相当于在模板中使用 $route
  • 返回当前路由信息的响应式对象，包含了当前路由的路径、参数、查询字符串和元数据等信息

• 通过控制台打印输出判断传递过来的值是否正确

import { useRoute } from 'vue-router';

const route = useRoute();

console.log(route.query);

4. 引入 Form 表单组件

• 参考官方文档：Form 表单 - Vant 3 (gitee.io)
• 在表单中，每个 Field 组件 代表一个表单项，使用 Field 的 rules 属性定义校验规则
• 提交表单：提交用户修改的数据

<van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="username"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
      提交
    </van-button>
  </div>
</van-form>

import { ref } from 'vue';

export default {
  setup() {
    const username = ref('');
    const password = ref('');
    const onSubmit = (values) => {
      console.log('submit', values);
    };

    return {
      username,
      password,
      onSubmit,
    };
  },
};

• 查看页面效果

5. 表单数据绑定路由参数进行展示

• 初始化要编辑的用户对象 editUser = ref( { } )
  • ref 定义可动态交互的数据

• 从 route 中取出路由参数封装到 editUser 中

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

• 表单项动态展示 route 中的参数

<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>

6. 向后台提交用户要修改的数据

• TODO：向后台发送要修改的用户数据
• onSubmit()：暂时先在控制台打印输出要提交的数据

注意：有些数据不允许用户自定义修改，比如用户账户、星球编号、注册时间等字段

• 不设置跳转链接即可实现

7. 修复返回跳转的 Bug

• 点击返回图标之后直接返回到主页了，期望的应该是返回到上一个页面
• 使用路由器实例 router 的back() 方法

// 点击返回按钮触发事件
const onClickLeft = () => {
  router.back();
};