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.iddata.form.role=data.user.roleformRef.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>