vue springboot 修改密码

在Vue.js和Spring Boot项目中修改用户密码通常涉及到前端和后端两个部分的操作。

前端部分（Vue.js）：

1. 用户界面设计：创建一个表单，包含旧密码、新密码和确认密码的输入字段。你可以使用HTML、CSS和Vue组件来构建这个表单。

<template>
  <div>
    <form @submit.prevent="changePassword">
      <input v-model="oldPassword" type="password" placeholder="请输入旧密码"/>
      <input v-model="newPassword" type="password" placeholder="请输入新密码"/>
      <input v-model="confirmPassword" type="password" placeholder="请再次输入新密码"/>
      <button type="submit">保存</button>
    </form>
  </div>
</template>

2. 视图模型 (ViewModel)：在Vue实例中定义数据属性并处理表单提交事件，验证密码一致性，并调用API进行密码更新。

export default {
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    };
  },
  methods: {
    changePassword(event) {
      if (!this.validatePasswords()) return;
      this.$axios.post('/api/users/password', { oldPassword: this.oldPassword, newPassword: this.newPassword })
        .then(response => {
          // 更新成功后提示用户或者重定向到登录页
        })
        .catch(error => {
          console.error('Failed to update password:', error);
        });
    },
    validatePasswords() {
      return this.newPassword === this.confirmPassword;
    }
  }
};

后端部分（Spring Boot）：

1. 创建REST API：在Spring Boot项目中，你需要创建一个处理密码更新请求的控制器方法，如`UserController`中的`updatePassword`方法。这通常需要校验旧密码是否匹配，然后更新数据库中的密码信息。

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/users")
public class UserController {

    @PostMapping("/password")
    public ResponseEntity<?> updatePassword(@RequestBody PasswordChangeRequest request) {
        // 验证旧密码、加密新密码并更新数据库
        boolean isMatch = validateOldPassword(request.getOldPassword());
        if (!isMatch) return new ResponseEntity<>(HttpStatus.UNAUTHORIZED);

        // 更新密码...
        // 如果成功返回HTTP状态码200，否则返回错误响应
    }

    private boolean validateOldPassword(String oldPassword) {
        // 这里应该查询数据库并检查旧密码是否匹配
        // 如果匹配则返回true，否则false
    }
}