Vue3管理系统开发个人信息，修改密码页面

把默认路由先重定向到/login，用户每次启动项目重新登录

{path:'/',redirect:'/login'},

个人中心页面

子组件发送请求更新父组件内容

const emit =defineEmits(['updateUser'])

//更新缓存数据
localStorage.setItem('pro1-user',JSON.stringify(data.form))

emit('updateUser')

 父级

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

个人信息页面

<template>
  <div class="card" style="width: 50%; padding: 40px 20px">
    <el-form ref="formRef" :rules="data.rules" :model="data.form" label-width="80px" style="padding-right: 40px;padding-bottom: 20px">
      <el-form-item label="账号" prop="username">
        <el-input v-model="data.form.username" autocomplete="off" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-input disabled v-model="data.form.role" autocomplete="off" placeholder="请输入角色" />
      </el-form-item>
      <div v-if="data.user.role === '租客'">
        <el-form-item label="租客姓名">
          <el-input v-model="data.form.xingMing" autocomplete="off" placeholder="请输入租客姓名" />
        </el-form-item>
        <el-form-item label="职业">
          <el-input v-model="data.form.zhiYe" autocomplete="off" placeholder="请输入租客职业" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="data.form.xingBie">
            <el-radio value="男" label="男"></el-radio>
            <el-radio value="女" label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="data.form.shouJi" autocomplete="off" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="data.form.shenFenZheng" autocomplete="off" placeholder="请输入身份证" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="data.form.youXiang" autocomplete="off" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="照片">
          <el-input v-model="data.form.zhaoPian" autocomplete="off" placeholder="请输入照片" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="data.form.diZhi" autocomplete="off" placeholder="请输入地址" />
        </el-form-item>
      </div>
    </el-form>
    <div style="text-align: center">
      <el-button @click="updateUser" type="primary" style="padding: 20px 30px">更新个人信息</el-button>
    </div>
  </div>
</template>
<script setup>
import {reactive,ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
const formRef = ref()
const data = reactive({
  form:{},
  user:JSON.parse(localStorage.getItem('pro1-user') || "{}"),
  rules:{
    username:[
      {required:true,message:'请输入账号',trigger:'blur'}
    ]
  }
})
const emit =defineEmits(['updateUser'])
if (data.user.role === '用户'){
  request.get('/zuke/selectById'+data.user.id).then(res=>(
      data.form=res.data
  ))
}else {
  data.form=data.user
}
const updateUser = () => {
  if (data.user.role === '租客'){
    request.put('/zuke/update',data.form).then(res=>{
      if (res.code === '200'){
        ElMessage.success("信息更新成功")
        //更新缓存数据
        localStorage.setItem('pro1-user',JSON.stringify(data.form))
        //触发父级从缓存里面取到最新数据
        emit('updateUser')
      }else {
        ElMessage.error(res.msg)
      }
    })
  }else {
    request.put('/user/update',data.form).then(res=>{
      if (res.code === '200'){
        ElMessage.success("信息更新成功")
        //更新缓存数据
        localStorage.setItem('pro1-user',JSON.stringify(data.form))
        //触发父级从缓存里面取到最新数据
        emit('updateUser')
      }else {
        ElMessage.error(res.msg)
      }
    })
  }
}
</script>

修改密码

public void updatePassword(Account account) {
        Integer id=account.getId();
        ZuKe zuKe=this.selectById(String.valueOf(id));
        if (!zuKe.getPassword().equals(account.getPassword())){
            throw new CustomException("500","对不起，原密码错误");
        }
        zuKe.setPassword(account.getPassword());
        this.update(zuKe);
    }

public void updatePassword(Account account) {
        Integer id=account.getId();
        User user=this.selectById(String.valueOf(id));
        if (!user.getPassword().equals(account.getPassword())){
            throw new CustomException("500","对不起，原密码错误");
        }
        user.setPassword(account.getPassword());
        this.update(user);
    }

修改密码Vue页面

 

<template>
  <div class="card" style="width:50%;padding: 40px 20px">
    <el-form ref="formRef" :rules="data.rules" :model="data.form" label-width="100px" style="padding-right: 40px;padding-bottom: 20px">
      <el-form-item label="原密码" prop="password">
        <el-input show-password v-model="data.form.password" autocomplete="off" placeholder="请输入原密码" />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input show-password v-model="data.form.newPassword" autocomplete="off" placeholder="请输入新密码" />
      </el-form-item>
      <el-form-item label="确认新密码" prop="confirmPassword">
        <el-input show-password v-model="data.form.confirmPassword" autocomplete="off" placeholder="请再次确认新密码" />
      </el-form-item>
    </el-form>
    <div style="text-align: center">
      <el-button @click="updatePassword" type="primary" style="padding: 20px 30px">立即修改</el-button>
    </div>
  </div>
</template>
<script setup>
import {reactive,ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
const validatePass = (rule, value, callback) => {
  if (!value){
    callback(new Error('请再次确认新密码'))
  }else if (value!==data.form.newPassword){//value是用户输入的确认密码
    callback(new Error('两次输入密码不一致'))
  }else{
    callback()
  }
}
const formRef = ref()
const data = reactive({
  form:{},
  user:JSON.parse(localStorage.getItem('pro1-user') || "{}"),
  rules:{
    password:[
      {required:true,message:'请输入原密码',trigger:'blur'}
    ],
    newPassword:[
      {required:true,message:'请输入新密码',trigger:'blur'}
    ],
    confirmPassword:[
      {required:true,message:'请再次确认新密码',trigger:'blur'},
      {validator: validatePass,trigger:'blur'}
    ]
  }
})
const updatePassword =()=>{
  data.form.id=data.user.id
  data.form.role=data.user.role
  formRef.value.validate((valid)=>{
    if (valid){
      request.put('/updatePassword',data.form).then(res=>{
        if (res.code === '200'){
          ElMessage.success("密码修改成功")
          localStorage.removeItem('pro1-user')
          setTimeout(()=>{
            location.href='/login'
          },500)
        }else {
          ElMessage.error(res.msg)
        }
      })
    }
  })
}
</script>