使用 Angular 2 和 Spring Boot 发送 post 请求

Question

I use Angular 2 and Spring Boot. From an html form I want to send data to a local mongo db. The form has a Submit Function which should send the data to the PersonController Java file. But the post request does not work. I hope you can help me. Thanks in advance.

onSubmit() Function

    private serverUrl = 'http://localhost:8080/saveUser';

onSubmit() {

    let headers = new Headers({'Content-Type': 'application/json'});
    this.http.post(this.serverUrl,
        {firstName: 'name.firstname',lastName: 'name.lastname'},
        {headers:headers})
        .map((res: Response) => res.json());

    this.name = {
        firstname: '',
        lastname: ''
    }

HTML Code:

 <form (ngSubmit)="onSubmit()" #nameForm="ngForm" >
  <div class="form-group">
    <label for="Firstname">Firstname</label>
    <input type="text" class="form-control" id="firstname"
    required
    [(ngModel)]="name.firstname" name="firstname">
  </div>

  <div class="form-group">
    <label for="Lastname">Lastname</label>
    <input type="text" class="form-control" id="lastname"
    [(ngModel)]="name.lastname" name="lastname">
  </div>
  <button type="submit" class="btn btn-default" >Submit</button>
</form>

PersonController

@Autowired
PersonRepository personRepository;

@RequestMapping("/saveUser")
public String personForm(){
    Person person1 = new Person("Hans", "Meiser");
    personRepository.save(person1);
    return "saved";
}

Answer 1

sa, in your spring code your @RequestMapping("/saveUser") is bydefault mapped as GET . so you still add one property as given bellow.

can you pass method property in this mapping and can check it.

@RequestMapping(value="/saveUser" , method=RequestMethod.POST

Answer 2

you have to set the request type. also you have to set how you will recieve these input data. if you are sending them as a request body then you have to recieve them as the following as you are casting the input data to person to be saved directly.

@RequestMapping(value="/saveUser", method=RequestMethod.POST)
public String personForm(@RequestBody Person person){
    personRepository.save(person);
    return "saved";
}

Answer 3

Your Spring request is a GET one and you are trying to call a POST method from angular. And in angular you need to subscribe in order for the http call to be fired.

Change to @PostMapping('/users') When creating CRUD operation is a good naming practice to have the method type and the name is the name of the domain on plural.

Spring

@PostMapping('/users')
public Person saveUser(@RequestBody Person person) {
 return personRepository.save(person);
}

Angular

private baseUrl= 'http://localhost:8080';

const user = {firstName: this.name.firstname, lastName: this.name.lastname};
this.http.post(`${this.baseUrl}/user}`, user).subscribe(value => this.user = user);