Springboot + Vue integrates personal center, avatar modification, data linkage and password modification

Source code ：https://gitee.com/xqnode/pure-design/tree/master

Learning video ：https://www.bilibili.com/video/BV1U44y1W77D

Start to explain

Drop down menu of personal information ：

<el-dropdown style="width: 150px; cursor: pointer; text-align: right">
 <div style="display: inline-block">
    <img :src="user.avatarUrl" alt="" style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px">
    <span>{
   { user.nickname }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
  </div>
  <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
    <el-dropdown-item style="font-size: 14px; padding: 5px 0">
      <router-link to="/password"> Change Password </router-link>
    </el-dropdown-item>
    <el-dropdown-item style="font-size: 14px; padding: 5px 0">
      <router-link to="/person"> Personal information </router-link>
    </el-dropdown-item>
    <el-dropdown-item style="font-size: 14px; padding: 5px 0">
      <span style="text-decoration: none" @click="logout"> sign out </span>
    </el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

Routing settings （ static state ）

const manageRoute = {
     path: '/', name: 'Manage', component: () => import('../views/Manage.vue'), redirect: "/home", children: [
        {
     path: 'person', name: ' Personal information ', component: () => import('../views/Person.vue')},
        {
     path: 'password', name: ' Change Password ', component: () => import('../views/Password.vue')},
      ] }

newly build Person.vue page

<template>
  <div>
    <el-card style="width: 600px">
      <el-form label-width="80px" size="small">
        <div style="text-align: center; margin: 10px 0">
          <el-upload class="avatar-uploader" action="http://localhost:9090/file/upload" :show-file-list="false" :on-success="handleAvatarSuccess" >
            <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <el-form-item label=" user name ">
          <el-input v-model="form.username" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label=" nickname ">
          <el-input v-model="form.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label=" mailbox ">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label=" Telephone ">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label=" Address ">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div style="text-align: center">
        <el-button type="primary" @click="save"> indeed   set </el-button>
      </div>
    </el-card>
  </div>
</template>

Then write the request interface JS:

<script>
export default {
    
  name: 'Person',
  data() {
    
    return {
    
      form: {
    },
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {
    }
    }
  },
  created() {
    
    this.load()
  },
  methods: {
    
    load() {
    
      const username = this.user.username
      if (!username) {
    
        this.$message.error(" Currently unable to get user information ！")
        return
      }
      this.request.get("/user/username/" + username).then(res => {
    
        this.form = res.data
      })
    },
    save() {
    
      this.request.post("/user", this.form).then(res => {
    
        if (res.code === '200') {
    
          this.$message.success(" Saved successfully ")
          this.dialogFormVisible = false
          this.load()

          this.$emit('refreshUser')
        } else {
    
          this.$message.error(" Save failed ")
        }
      })
    },
    handleAvatarSuccess(res) {
    
      // res Is the path of the file 
      this.form.avatarUrl = res
    }
  }
}
</script>

I ask you to check your request interface , This will prevent 404 Error of ！

Manage.vue Changes that need to be made ：

//   Pass in  user Object to  Header Inside the component 
 <Header :collapseBtnClass="collapseBtnClass" @asideCollapse="collapse" :user="user" />


data() {
	return {
		 user: {}
	}
}
created() {
    //  Get the latest from the background User data 
    this.getUser()
  },

//  stay methos Write a function in it ,  Get the latest data of the user 
    getUser() {
      let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
      if (username) {
        //  Get... From the background User data 
        this.request.get("/user/username/" + username).then(res => {
          //  Reassign the latest in the background User data 
          this.user = res.data
        })
      }
    }

Header.vue Changes that need to be made

//  Define a user Attribute accept from Manage.vue incoming user object 
props: {
    user: Object
  },

//  And then in Header This place of use ：

 <el-dropdown style="width: 150px; cursor: pointer; text-align: right">
      <div style="display: inline-block">
        <img :src="user.avatarUrl" alt="" style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px">
        <span>{
   { user.nickname }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
      </div>
      <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
        <el-dropdown-item style="font-size: 14px; padding: 5px 0">
          <router-link to="/password"> Change Password </router-link>
        </el-dropdown-item>
        <el-dropdown-item style="font-size: 14px; padding: 5px 0">
          <router-link to="/person"> Personal information </router-link>
        </el-dropdown-item>
        <el-dropdown-item style="font-size: 14px; padding: 5px 0">
          <span style="text-decoration: none" @click="logout"> sign out </span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

The last step , stay Person.vue The trigger method is written in it ：

this.$emit('refreshUser')

And then in Manage Make corresponding modifications in it ：

   <router-view @refreshUser="getUser" />

Change Password ：

<template>
  <el-card style="width: 500px;">
    <el-form label-width="120px" size="small" :model="form" :rules="rules" ref="pass">

      <el-form-item label=" Original password " prop="password">
        <el-input v-model="form.password" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item label=" New password " prop="newPassword">
        <el-input v-model="form.newPassword" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item label=" Confirm the new password " prop="confirmPassword">
        <el-input v-model="form.confirmPassword" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save"> indeed   set </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script> export default {
       name: "Password", data() {
       return {
       form: {
      }, // username, password, newPassword, confirmNewPassword  this 4 Attributes  user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {
      }, rules: {
       password: [ {
       required: true, message: ' Please enter the original password ', trigger: 'blur' }, {
       min: 3, message: ' Not less than in length 3 position ', trigger: 'blur' } ], newPassword: [ {
       required: true, message: ' Please enter the new password ', trigger: 'blur' }, {
       min: 3, message: ' Not less than in length 3 position ', trigger: 'blur' } ], confirmPassword: [ {
       required: true, message: ' Please input a password ', trigger: 'blur' }, {
       min: 3, message: ' Not less than in length 3 position ', trigger: 'blur' } ], } } }, created() {
       this.form.username = this.user.username }, methods: {
       save() {
       this.$refs.pass.validate((valid) => {
       if (valid) {
       // legal  if (this.form.newPassword !== this.form.confirmPassword) {
       this.$message.error("2 The new password you entered is different ") return false } this.request.post("/user/password", this.form).then(res => {
       if (res.code === '200') {
       this.$message.success(" Modification successful ") this.$store.commit("logout") } else {
       this.$message.error(res.msg) } }) } }) }, } } </script>

<style> .avatar-uploader {
       text-align: center; padding-bottom: 10px; } .avatar-uploader .el-upload {
       border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover {
       border-color: #409EFF; } .avatar-uploader-icon {
       font-size: 28px; color: #8c939d; width: 138px; height: 138px; line-height: 138px; text-align: center; } .avatar {
       width: 138px; height: 138px; display: block; } </style>

backstage ：

import lombok.Data;

@Data
public class UserPasswordDTO {
    
    private String username;
    private String phone;
    private String password;
    private String newPassword;
}

Controller Interface

 @PostMapping("/password")   // /user/password
    public Result password(@RequestBody UserPasswordDTO userPasswordDTO) {
    
        userService.updatePassword(userPasswordDTO);
        return Result.success();
    }

Business class UserServiceImpl.java：

 @Override
    public void updatePassword(UserPasswordDTO userPasswordDTO) {
    
        int update = userMapper.updatePassword(userPasswordDTO);
        if (update < 1) {
    
            throw new ServiceException(Constants.CODE_600, " Wrong password ");
        }
    }

data Mapper layer ：

   @Update("update sys_user set password = #{newPassword} where username = #{username} and password = #{password}")
    int updatePassword(UserPasswordDTO userPasswordDTO);

well , thus Personal center 、 Modify the head image 、 Data linkage 、 The four contents of password modification are integrated ！ And the flower ~