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

Question

我使用Angular 2和Spring Boot。从HTML表单中，我想将数据发送到本地Mongo数据库。该表单具有Submit功能，应将数据发送到PersonController Java文件。但是POST请求无法工作。 我希望你可以帮助我，非常感谢。

onSubmit()函数

    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 代码：

 <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>

人员控制器

@Autowired
PersonRepository personRepository;

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

- E.Sa

---

有哪些问题？您是否收到错误/异常？您做了什么样的调试？"不起作用"很难帮助您解决问题。 - Paul Samsotha

我有一个理解上的一般问题。首先，Angular 2的http.post函数仍然无法将POST请求发送到Spring Boot服务器。此外，我还不能通过Angular 2获取表单数据以将数据保存在MongoDB中。提前感谢您的帮助。 - E.Sa

Answer 1

在你的Spring代码中，@RequestMapping("/saveUser")默认被映射为GET。因此，你仍需要添加一个属性，如下所示。

你可以在这个映射中传递方法属性并进行检查。

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

- ayaz kodiya

Answer 2

你需要设置请求类型。同时，你还需要设置如何接收这些输入数据。如果你将它们作为请求体发送，那么你需要按照以下方式接收它们，因为你正在直接将输入数据转换为要保存的人员。

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

- Amr Alaa

Answer 3

您的Spring请求是GET请求，而您正在尝试从Angular调用POST方法。在Angular中，您需要订阅以触发http调用。

更改为@PostMapping('/users') 在创建CRUD操作时，良好的命名惯例是将方法类型和名称设置为复数域的名称。

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);

- Alin Bizau