15. Vue个人信息修改、修改密码、重置密码

915 字约 2 分钟读完2092 次阅读更新于 2026/5/3

个人中心

注意：
// 触发父级的数据更新
this.$emit('update:user', this.user)
<router-view @update:user="updateUser" />

updateUser(user) {   // 获取子组件传过来的数据  更新当前页面的数据
  this.user = JSON.parse(JSON.stringify(user))  // 让父级的对象跟子级的对象毫无关联
},

Person.vue

错误： 重复点击当前路由的时候会出现这个错误
image.png
在 router/index.js 里面加入下面的代码即可解决

// 解决导航栏或者底部导航tabBar中的vue-router在3.0版本以上频繁点击菜单报错的问题。
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

修改密码

忘记密码

前台

<el-dialog title="忘记密码" :visible.sync="forgetPassDialogVis" width="30%">
      <el-form :model="forgetUserForm" label-width="80px" style="padding-right: 20px">
        <el-form-item label="用户名">
          <el-input v-model="forgetUserForm.username" autocomplete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="forgetUserForm.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="forgetPassDialogVis = false">取 消</el-button>
        <el-button type="primary" @click="resetPassword">确 定</el-button>
      </div>
    </el-dialog>

data() {
  return {
     forgetUserForm: {},   // 忘记密码的表单数据
      forgetPassDialogVis: false,
  }
}


handleForgetPass() {   //  初始化表单的数据
  this.forgetUserForm = {}
  this.forgetPassDialogVis = true
},
resetPassword() {
  this.$request.put('/password', this.forgetUserForm).then(res => {
    if (res.code === '200') {
      this.$message.success('重置成功')
      this.forgetPassDialogVis = false
    } else {
      this.$message.error(res.msg)
    }
  })
},

后台

/**
 *  Controller重置密码
 */
@AuthAccess
@PutMapping("/password")
public Result password(@RequestBody User user) {
    if (StrUtil.isBlank(user.getUsername()) || StrUtil.isBlank(user.getPhone())) {
        return Result.error("数据输入不合法");
    }
    userService.resetPassword(user);
    return Result.success();
}


//  Service代码：
public void resetPassword(User user) {
    User dbUser = userMapper.selectByUsername(user.getUsername());
    if (dbUser == null) {
        // 抛出一个自定义的异常
        throw new ServiceException("用户不存在");
    }
    if (!user.getPhone().equals(dbUser.getPhone())) {
        throw new ServiceException("验证错误");
    }
    dbUser.setPassword("123");   // 重置密码
    userMapper.updateUser(dbUser);
}

小手一抖 就写错了，应该写 dbUser
image.png