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

个人中心

前端常见报错

出现下面这个报错，去找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-upload
            action = "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 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')
    }
  })
}
</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