浪花 - 用户信息展示＋更新

1. 用户登录获取登录凭证

已登录的用户才能获取个人信息
发送 Aixos 请求登录

const user = ref();

onMounted(async () => {
  const res = await myAxios.get('/user/current');
  if (res.code === 0) {
    console.log("获取用户信息成功");
    user.value = res.data;
  } else {
    console.log("获取用户信息失败")
  }
})

2. 获取登录用户的个人信息

点击个人页时加载个人信息

踩坑记录：前端发送请求后端无法识别已登录用户

原因：前端发送请求时没有携带登录时后端返回的 Cookie
解决：给 Axios 加上携带 Cookie 的配置，表示请求要携带 Cookie
javascript>javascript">myAxios.defaults.withCredentials = true;
携带 Cookie 成功

获取当前登录用户信息：后端通过 Cookie 识别到前端的登录态，获取成功✔

3. 展示用户信息

<template>
  <template v-if="user">
    <van-cell title="昵称" is-link :value="user.username" @click="toEdit('username', '昵称',user.username)"/>
    <van-cell title="账户" :value="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>
</template>

4. 更新用户信息

前端：

点击提交按钮，发送更新用户个人信息请求
收到后端更新成功的响应，返回信息展示页面

const onSubmit = async () => {
  const currentUser = await getCurrentUser();
  if (!currentUser) {
    console.log("用户未登录")
    return;
  }
  // 发送更新请求
  const res = await myAxios.post('/user/update', {
    'id': currentUser.id,
    [editUser.value.editKey as string]: editUser.value.currentValue,
  })
  if (res.code === 0 && res.data > 0) {
    router.back();
    console.log("修改成功！");
  } else {
    console.log("修改失败！");
  }
};

后端：

校验用户权限，满足权限则执行 UPDATE 语句更新个人信息

完善逻辑（校验参数）：前端传来的参数为空时，直接抛出异常，不执行 UPDATE 语句

java">
    /**
     * 更新用户信息
     * @param user 要更新的用户
     * @param loginUser 当前登录用户
     * @return
     */
    @Override
    public int updateUser(User user, User loginUser) {
        long userId = user.getId();
        if (userId <= 0) {
            throw new BusinessException(ErrorCode.PARAMS_ERROR);
        }
        // TODO 如果用户没有传递任何需要更新的值，直接报错，不执行 UPDATE 语句
        if(user == null) {
            throw new BusinessException(ErrorCode.PARAMS_ERROR);
        }
        // 管理员：更新任意用户的信息
        // 普通用户：只允许更新自己的信息
        if (!isAdmin(loginUser) && userId != loginUser.getId()) {
            throw new BusinessException(ErrorCode.NO_AUTH);
        }
        User oldUser = userMapper.selectById(userId);
         if (oldUser == null) {
            throw new BusinessException(ErrorCode.NULL_ERROR);
        }
        return userMapper.updateById(user);
    }