html - 我的 PUT 方法即使在 Spring 有效，也无法正常工作

Question

我有一个显示登录用户信息的网页，该信息是使用 spring REST API 从数据库调用的。在每个用户属性旁边都有一个编辑按钮，单击它会显示一个输入字段，用户可以使用该输入字段来编辑该属性(到目前为止，我只将它添加到密码字段)。

出于某种原因，在我单击按钮并编辑属性后，即使它应该在控制台中显示“有效”，也没有任何反应。

这是处理更新的 spring Controller 方法:

@PutMapping("myProfile/edit")
public ResponseEntity<Object> updateProfile(@CurrentUser User currentUser, @RequestBody EditUserProfileRequest user){
    User updatedUser = userService.updateProfile(currentUser, user);
    return ResponseEntity.ok().body("Update Success!");
}

服务方法如下:

@Override
public User updateProfile(User currentUser, EditUserProfileRequest input) {
    User user = this.getUserByUsername(currentUser.getUsername());
    user.setEditedProfile(input);
    if(input.getPassword()!=null){
        user.setPassword(passwordEncoder.encode(input.getPassword()));
    }
    User saveMe = userRepository.save(user);
    return saveMe;
}

EditUserProfileRequest 类:

package com.example.demo.contract;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@AllArgsConstructor
@NoArgsConstructor
@Data
public class EditUserProfileRequest {
   private String firstName;
   private String lastName;
   private String password;
   private String email;
   private String location;
   private String bio;
   private Long phoneNumber;
   private Long zipCode;
}

这是密码字段的 html 代码，它首先显示普通密码，然后在单击编辑按钮后更改为输入字段:

<div style="margin-top: 3px; margin-bottom: 3px;">
        <h5 style="float: left; margin-left: 160px; margin-top: 18px;">
          <b>Password: </b>
        </h5>
        <div id="hashPassword" style="display: block">
          <div style="width: 100px; margin-left: 233px; float: left;">
              <span style="font-weight: 600">*********</span>
          </div>
          <mat-icon id="hashPassword" aria-label="EDIT" aria-hidden="false" (click)="editPassword()" style="cursor: pointer; margin-left: 446px">edit</mat-icon>
        </div>
        <div id="editPassword" style="display: none">
          <div style="width: 800px; margin-left: 233px; float: left;">
          <form [formGroup]="passwordEditForm" (ngSubmit)="onPasswordSubmit()">
            <div class="form-group">
              <label>Password</label>
              <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
              <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                  <div *ngIf="f.password.errors.required">Password is required</div>
                  <div *ngIf="f.password.errors.minlength">Password must be at least 4 characters</div>
              </div>
          </div>
          <div class="form-group">
              <label>Confirm Password</label>
              <input type="password" formControlName="confirmPassword" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }" />
              <div *ngIf="submitted && f.confirmPassword.errors" class="invalid-feedback">
                  <div *ngIf="f.confirmPassword.errors.required">Confirm Password is required</div>
                  <div *ngIf="f.confirmPassword.errors.mustMatch">Passwords must match</div>
              </div>
          </div>
          <div class="form-group">
            <button type="button" class="btn btn-primary">Confirm Edit</button>
          </div>
          </form>
        </div>
        </div>
      </div>

这是我的组件，用于处理编辑功能的调用:

import { Component, OnInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MediaMatcher } from '@angular/cdk/layout';
import { Router } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';
import { Observable } from 'rxjs';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { MustMatch } from '../must-match.validators';
import { UserService } from '../user.service';

@Component({
  selector: 'app-myacc',
  templateUrl: './myacc.component.html',
  styleUrls: ['./myacc.component.scss']
})
export class MyaccComponent implements OnInit {
  loginUser: any = {};
  imgSrc: any;
  submitted = false;
  passwordEditForm: FormGroup;
  constructor(private router: Router,
  private sanitizer: DomSanitizer,
  private http: HttpClient,
  private fb: FormBuilder,
  private service: UserService) {
}

ngOnInit() {
  console.log(window.URL);
  this.loginUser = JSON.parse(localStorage.getItem('currentUser'));
  console.log(this.loginUser);
  this.passwordEditForm = this.fb.group({
    password: ['', [Validators.required, Validators.minLength(4)]],
    confirmPassword: ['', Validators.required]
  }, {
    validator: MustMatch('password', 'confirmPassword')
  });
}

editPassword() {
  document.getElementById('hashPassword').style.display = 'none';
  document.getElementById('editPassword').style.display = 'block';
}

get f() {
  return this.passwordEditForm.controls;
}

onPasswordSubmit() {
  this.submitted = true;
  if (this.passwordEditForm.invalid) {
    return;
  } else {
  this.service.editUser(this.passwordEditForm.value, this.loginUser.token).subscribe(res => {
    console.log('works');
  }, err => {
    console.log(err);
  });
}
}

}

最后是具有编辑方法的用户服务:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {
    this.http = http;
  }

  getAllUsers(token: any): Observable<any> {
    // tslint:disable-next-line: object-literal-key-quotes
    const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
    return this.http.get('http://localhost:8082/users', {headers: headers});
  }

  getUser(token: any): Observable<any> {
    // tslint:disable-next-line: object-literal-key-quotes
    const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
    return this.http.get('http://localhost:8082/getuser', {headers: headers});
  }

  getAllOffer(): Observable<any> {
    return this.http.get('http://localhost:8082/getAllOffer');
  }

  getServices(): Observable<any> {
    return this.http.get('http://localhost:8082/services');
  }

  editUser(user, token): Observable<any> {
    const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
    return this.http.put('http://localhost:8082/myProfile/edit', user, token);
  }
}

Answer 1

HttpClient.put() 的第三个参数应该是一个选项对象。更新您的 editUser 方法，以便您将包含 headers 的对象作为第三个参数而不是 token 传递:

editUser(user, token): Observable<any> {
  const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
  return this.http.put('http://localhost:8082/myProfile/edit', user, { headers });
}

希望对您有所帮助!