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

Posted 2023-02-27

【中文标题】使用 Angular 2 和 Spring Boot 发送发布请求

【英文标题】：Send post request with Angular 2 and Spring Boot

【发布时间】：2017-03-03 21:29:08

【问题描述】：

我使用 Angular 2 和 Spring Boot。我想从 html 表单将数据发送到本地 mongo db。该表单有一个提交函数，它应该将数据发送到 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>

人员控制器

@Autowired
PersonRepository personRepository;

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

【问题讨论】：

有什么不好的？您是否收到错误/异常？你做了什么样的调试？不起作用不足以帮助您。

我有一个普遍的理解问题。首先，angular 2 http.post 函数仍然不会将 post 请求发送到 spring boot 服务器。除此之外，我仍然无法通过 angular 2 获取表单数据以将数据保存在 mongodb 中。提前谢谢你。

【参考方案1】：

sa，在您的 Spring 代码中，您的 @RequestMapping("/saveUser") 默认映射为 GET。所以你仍然添加一个属性，如下所示。

你能在这个映射中传递方法属性并且可以检查它。

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

【参考方案2】：

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

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

【参考方案3】：

您的 Spring 请求是 GET 请求，并且您正尝试从 Angular 调用 POST 方法。在 Angular 中，您需要订阅才能触发 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);