个人中心
前端常见报错
出现下面这个报错，去找xxx.username看xxx是不是没有定义
main 部分的数据传递
Person.vue
<template><div class="card" style="width: 50%"><div style="font-size: 15px">个人中心</div><el-form ref="formRef":model="data.user" label-width="80px" style="padding: 20px 30px 10px 0"><el-form-item prop="username" label="账号"><el-input v-model="data.user.username" autocomplete="off" placeholder="请输入账号"/></el-form-item><el-form-item prop="name" label="名称"><el-input v-model="data.user.name" autocomplete="off" placeholder="请输入名称"/></el-form-item><el-form-item prop="phone" label="电话"><el-input v-model="data.user.phone" autocomplete="off" placeholder="请输入电话"/></el-form-item><el-form-item prop="email" label="邮箱"><el-input v-model="data.user.email" autocomplete="off" placeholder="请输入邮箱"/></el-form-item><el-form-item prop="avatar" label="头像"><el-uploadaction = "http://localhost:9999/files/upload":headers="{ token:data.user.token}":on-success="handleFileSuccess"list-type="picture"><el-button type="primary">上传头像</el-button></el-upload></el-form-item></el-form><div style="text-align: center"><el-button type="primary" style="padding: 18px 35px" @click="update">保存</el-button></div></div>
</template>
<script setup>
import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import {formToJSON} from "axios";const data = reactive({user:JSON.parse(localStorage.getItem('code_user') || '{}'),
})const handleFileSuccess = (res) => {data.user.avatar = res.data
}const emit = defineEmits(['updateUser'])const update = () => {let urlif (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')}})
}
</script>
Manager.vue
<RouterView @updateUser="updateUser"/>const updateUser = () => {data.user = JSON.parse(localStorage.getItem("code_user") || "{}")
}修改密码
UpdatePassword.vue
<template><div class="card" style="width: 50%"><div style="font-size: 15px">修改密码</div><el-form ref="formRef" :rules="data.rules" :model="data.user" label-width="80px" style="padding: 20px 30px 10px 0"><el-form-item prop="password" label="原密码"><el-input show-password v-model="data.user.password" autocomplete="off" prefix-icon="Lock" placeholder="请输入密码"/></el-form-item><el-form-item prop="newPassword" label="新密码"><el-input show-password v-model="data.user.newPassword" autocomplete="off" prefix-icon="Lock" placeholder="请输入密码"/></el-form-item><el-form-item prop="new2Password" label="确认密码"><el-input size="large" show-password v-model="data.user.new2Password" autocomplete="off" prefix-icon="Lock" placeholder="请输入密码"/></el-form-item></el-form><div style="text-align: center"><el-button type="primary" style="padding: 18px 35px" @click="updatePassword">保存</el-button></div></div>
</template><script setup>
import {reactive,ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";const data = reactive({user:JSON.parse(localStorage.getItem('code_user') || '{}'),rules:{password:[{required:true,message:'请填写原密码',trigger:'blur'}],newPassword:[{required:true,message:'请填写新密码',trigger:'blur'}],new2Password:[{required:true,message:'请确认新密码',trigger:'blur'}],}
})
const formRef = ref()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)}})}})
}
</script>
在 Account 里面添加相关字段和 get、set 方法
service.java
public void updatePassWord(Account account) {//先判断新密码和确认密码是否一致if (!account.getNewPassword().equals(account.getNew2Password())) {throw new CustomerException("500","您两次输入的密码不一致");}//校验原密码是否正确Account currentUser = TokenUtils.getCurrentUser();if (!account.getPassword().equals(currentUser.getPassword())){throw new CustomerException("500","原密码输入错误");}//开始更新密码User user = userMapper.selectById(account.getId().toString());user.setPassword(account.getNewPassword());userMapper.updateById(user);}
WebController.java
@PostMapping("/updatePassword")public Result updatePassword(@RequestBody Account account){if ("ADMIN".equals(account.getRole())){adminService.updatePassword(account);}if ("USER".equals(account.getRole())){userService.updatePassWord(account);}return Result.success();}
添加路由
index.js
import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{ path: '/',redirect:'/manager/home'},{ path: '/manager', component: () => import('../views/Manager.vue'),children:[{path:'home',meta:{name:'主页'},component:() => import('../views/Home.vue')},{path:'admin',meta:{name:'管理员信息'},component:() => import('../views/Admin.vue')},{path:'user',meta:{name:'普通用户信息'},component:() => import('../views/User.vue')},{path:'person',meta:{name:'个人中心'},component:() => import('../views/Person.vue')},{path:'updatePassword',meta:{name:'修改密码'},component:() => import('../views/UpdatePassword.vue')},]},{ path: '/login', component: () => import('../views/Login.vue'),},{ path: '/register', component: () => import('../views/Register.vue'),},{ path: '/notFound', component: () => import('../views/404.vue'),},{ path: '/:pathMatch(.*)', redirect:'/notFound'},],
})export default router