使用PUT方法更新输入字段

Question

我正在尝试使用PUT方法将用户的一些详细信息从我网站的输入字段更新到数据库。

从数据库获取数据的GET方法正在工作。通过工作，我的意思是它正在从输入字段中的数据库接收数据。

下面您可以从后端查看我的html组件，settings.component.ts和一些代码

我从其他服务器收到错误：

javax.ws.rs.ProcessingException: Error deserializing object from entity stream.

settings.component.html：

<div class="container py-5">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-6 mx-auto">
          <div class="card rounded-0">
            <div class="card-header">
              <h3 class=  "mb-0">Personal Details</h3>
            </div>
            <div class="card-body">
              <p>Here you can edit your personal information</p>
              <form>
                <ol class="field-list" style="list-style-type:none">
                  <li class="text-break">
                      <label>Username:</label>
                      <input type="text" id="username"  value="{{settings.username}}">

                  </li>
                  <hr>
                  <li class="text-break">
                    <label>E-mail:</label>
                    <input value="{{settings.email}}">
                  </li>
                  <hr>
                  <li class="text-break">
                    <label>Password:</label>
                    <input value="{{settings.password}}">
                    <label for="togglePassword">show password</label>
                    <input type="checkbox" id="togglePassword">
                  </li>
                </ol>
                <button
                  type="submit"
                  class="btn btn-outline-warning float-left"
                >Edit Details</button>

                <button (click)="updateUser()"
                  type="submit"
                  class="btn btn-outline-success float-right"
                >Save</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

settings.component.ts：

import { Component, OnInit } from '@angular/core';
import {HttpClient, HttpHeaders, HttpResponse} from '@angular/common/http';


@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.css']
})
export class SettingsComponent implements OnInit {

  settings = {
    username: '',
    email: '',
    password: ''
  };

  constructor(private http: HttpClient) { }

  baseUrl = 'http://localhost:8080/aquadine-jee/resources/user';


  ngOnInit() {
    //Get data from baseUrl(variable above url to the backend)
    this.http.get(this.baseUrl)
      .subscribe(
        val => {
          const usernameField = val;
          // @ts-ignore
          const usernameNaam = JSON.stringify(usernameField[usernameField.length - 1].username);
          console.log(usernameField);
          console.log(usernameField[0].username);
          this.settings.username = usernameNaam.slice(1, usernameNaam.length - 1);
        }
      );

    this.http.get(this.baseUrl)
      .subscribe(
        val => {
          const emailField = val;
          // @ts-ignore
          const emailNaam = JSON.stringify(emailField[emailField.length - 1].email);
          console.log(emailField);
          console.log(emailNaam);
          this.settings.email = emailNaam.slice(1, emailNaam.length - 1);
        }
      );

    this.http.get(this.baseUrl)
      .subscribe(
        val => {
          const passwordField = val;
          // @ts-ignore
          const passwordNaam = JSON.stringify(passwordField[passwordField.length - 1].password);
          console.log(passwordField);
          console.log(passwordNaam);
          this.settings.password = passwordNaam;
          this.settings.password = passwordNaam.slice(1, passwordNaam.length - 1);
        }
      );

  }


  updateUser() {

    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };

    const username: HTMLInputElement = document.getElementById('username') as HTMLInputElement;

    this.http.put(this.baseUrl, username, httpOptions)
      .subscribe(
        val => {
          console.log(val);
        }
      );
  }

}

user.java（后端）：

package nl.aquadine.model;


import javax.persistence.*;

/**
 * @author huipvandenende
 */
@Entity
@Table(name = "user")
public class User {

    @Id private String email;
    private Integer isOrganizer; // 0 = false, 1 = true
    private String username;
    private String password;

    public User() {
    }

    public User(String email, String username, String password){
        this.email = email;
        this.username = username;
        this.password = password;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    // salt is used for password security
    private String salt;
    public String getSalt() {
        return salt;
    }
    public void setSalt(String salt) {
        this.salt = salt;
    }

}

userResource.java（后端说明）：

 /**
     * Updates individual user
     * @param user
     * @return updated user
     */
    @PUT
    @Consumes("application/json")
    public Response update(User user){
        repositoryService.update(user);
        return Response
                .status(200)
                .entity(user)
                .build();
    }

我还尝试过的是：

const username = (<HTMLInputElement>document.getElementById('username')).value;

    this.http.put(this.baseUrl,  JSON.parse(JSON.stringify(username)) , httpOptions)