11. Springboot3+vue3实现个人中心、修改密码

312 字约 1 分钟读完5945 次阅读更新于 2026/5/3

前端常见的报错

Cannot read properties of undefined (reading 'username')

xxx.username

main部分的数据传递

const emit = defineEmits(['updateUser'])

const update = () => {
  let url
  if (data.user.role === 'ADMIN') {
    url = '/admin/update'
  }
  if (data.user.role === 'USER') {
    url = '/user/update'
  }
  request.put(url, data.user).then(res => {
    if (res.code === '200') {
      ElMessage.success('更新成功')
      localStorage.setItem("code_user", JSON.stringify(data.user))
      emit('updateUser')
    }
  })
}

<RouterView @updateUser="updateUser"/>

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem("code_user") || '{}')
}

修改密码

点击页面没反应怎么办？

  1. 打开F12看看前端控制台有没有报错，有报错就看一下，没有就下一步
  2. 要确定一下有没有调用到后端接口（打断点），如果没有走到那就排查一下接口，如果走到了，跟着断点跟到逻辑那里看看是不是正确的走向。
  3. 再打开F12网络，看看该接口返回的数据。
const updatePassword = () => {
  formRef.value.validate(valid => {
    if (valid) {
      request.post('/updatePassword', data.user).then(res => {
        if (res.code === '200') {
          ElMessage.success('修改成功')
          setInterval(() => {
            localStorage.removeItem('code_user')
            location.href = '/login'
          }, 500)
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}