检索到的 mysql 数据库对象中的字段都是未定义的

Question

我正在尝试使用 angular 4 制作登录组件。在后端 Spring 引导中，使用了 Spring 数据 Rest 和 MySQL 数据库。当我想用检索到的帐户的登录凭据检查提交的登录详细信息时，我无法这样做，因为检索到的帐户对象中的所有字段都是未定义的，而对象本身不是未定义的（我用 if 结构检查这个).有人可以看看我的代码并告诉我问题出在哪里吗？我将从 angular 4 classes 和服务开始，然后是帐户 pojo 和 Spring REST 存储库。

Angular 4 classes:

import {Person} from "./Person";
import {Role} from "./Role";
export class Account {
  id: number;
  username: string;
  password: string;
  person: Person;
  roles: Role[];

}

export class LaborPeriod{
    id: number
    beginDate: Date
    endDate: Date
    hours: number
}

import {LaborPeriod} from "./LaborPeriod";
export class Person{
    id:number
    name:string
    laborPeriods:LaborPeriod[]
}


export class Role{
    id: number
    name: string
}

登录组件class:

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [AccountService]
})
export class LoginComponent {
  title: string;
  loginForm: FormGroup;

  constructor(private fb: FormBuilder,
              private accountService: AccountService,
              private router: Router) {
    this.title = "Inloggen";
    this.loginForm = fb.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', Validators.required]
    });
  }

  onSubmit() {
    const formModel = this.loginForm.value;

    const account: Account = this.accountService.authenticate(formModel.email, formModel.password);
    console.log(account.id + " " + account.password + " " + " " + account.username)
    console.log(account !== undefined)
    // if (account !== undefined) {
    //   this.router.navigate(["account/update", account.id]);
    // }
    // else{/*username or password doesent exist*/}
  }
}

accountservice中的相关方法

  authenticate(username: string, password: string): Account {
    return this.restapi.postCredentials(username, password);
  }

restApi:

@Injectable()
export class RestApiService {
  apiUrl: string = "/api/accounts";
  apiPostUrl: string = "api/accounts/search/findByUsernameAndPassword";
  data: Account;


  constructor(private http: Http) {}

  getData(){
    return this.http.get(this.apiUrl).map((res: Response) => res.json())
  }

  getContacts(){
    this.getData().subscribe(data=> {console.log(data); this.data = data})
  }

  postCredentials(username:string, password:string): Account {
    let params = new URLSearchParams();
    params.append("username", username);
    params.append("password", password);
    // params.set("username", "henk@gmail.com");
    // params.set("password", "12345");
    this.http.get(this.apiPostUrl, {params: params}).map((res: Response) => res.json()).subscribe(data=> { this.data = data});
    console.log(this.data);
    return this.data;
  }

}

现在后端的所有内容

@Entity
public class Account {
    @Id
    @GeneratedValue
    private Long id;
    private String username;
    private String password;
    @ManyToMany(cascade = CascadeType.ALL)
    private List<Role> roles;
    @OneToOne(cascade = CascadeType.ALL)
    private Person person;

@Entity
public class LaborPeriod {
    @Id
    @GeneratedValue
    private Long id;
    private Instant beginDate;
    private Instant endDate;
    private Integer hours;

@Entity
public class Role {
    //
    @Id
    @GeneratedValue
    private Long id;
    private String name;

@Entity
public class Person {
    @Id
    @GeneratedValue
    private Long id;
    private String name;
    @OneToMany(cascade = CascadeType.ALL)
    private Collection<LaborPeriod> laborPeriods;

帐户存储库

@RepositoryRestResource
public interface AccountRepository extends JpaRepository<Account, Long> {
    Account findByUsername(@Param("username") String username);
    Account findByUsernameAndPassword(@Param("username") String username, @Param("password") String password);
}

不胜感激。

Answer 1

使用 interface 而不是 class 并按如下方式输入您的回复，

getData(){
    return this.http.get(this.apiUrl).map((res: Response) => <Account> res.json())
  }

注意：如果您使用class，您应该有一个构造函数来设置属性。

Answer 2

您需要从您的 post 请求中 return 一个 Observable。这是异步，因此您的响应可以在回调中使用。即使您尝试从回调 subscribe 中执行此操作，这也是不可能的，因为这又是异步的。所以你需要从你的 post 请求中 return 是一个 Observable:

return this.http.get(this.apiPostUrl, {params: params})
  .map((res: Response) => res.json())

在这里你实际上可以跳过中间的 authenticate 方法，我在这里看不出它对你有什么用。但是如果你想保留它，当然可以:)

那么您接下来要做的就是在您的组件中订阅此 post 请求。

constructor(private restApiService: RestApiService /** **/) { }

onSubmit() {
  const formModel = this.loginForm.value;
  this.restApiService.postCredentials(formModel.email, formModel.password);
    .subscribe(.....)
}

值得一读：

检索到的 mysql 数据库对象中的字段都是未定义的

fields in retrieved mysql database object are all undefined

java

spring-data-rest

spring-boot

angular