Question

我使用Angular 2和Spring Boot。从html表单我想将数据发送到本地mongo db。表单有一个Submit Function，它应该将数据发送到PersonController Java文件。但是帖子请求不起作用。我希望你能帮助我。提前谢谢。

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>

PersonController

@Autowired
PersonRepository personRepository;

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

Answer 1

sa，在您的春季代码中，您的@RequestMapping("/saveUser")被默认映射为GET。所以你仍然按照给定的方式添加一个属性。

可以在此映射中传递方法属性并可以检查它。

@RequestMapping（value =“/ saveUser”，method = RequestMethod.POST

Answer 2

您必须设置请求类型。您还必须设置如何接收这些输入数据。如果您将它们作为请求主体发送，那么当您将输入数据转发给要直接保存的人时，您必须按以下方式接收它们。

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

Answer 3

您的Spring请求是一个GET请求，您正尝试从angular调用POST方法。而且在有角度的情况下，您需要订阅才能触发http调用。

更改为@PostMapping('/users') 创建CRUD操作时，最好使用方法类型，并且名称是复数形式的域名。

春天

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

角度

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

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

3 个答案: