Блог

Главная - Вопросы по программированию - Отправить post-запрос с Angular 2 и весенней загрузкой

Отправить post-запрос с Angular 2 и весенней загрузкой

#javascript #java #spring #angular #spring-boot

#javascript #java #spring #angular #весенняя загрузка

Вопрос:

Я использую Angular 2 и Spring Boot. Из html-формы я хочу отправить данные в локальную базу данных mongo. Форма имеет функцию отправки, которая должна отправлять данные в файл 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>

PersonController

 @Autowired
PersonRepository personRepository;

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

Комментарии:

1. Что в этом не работает? Получаете ли вы ошибки / исключения? Какого рода отладку вы выполнили? «Не работает» вряд ли достаточно, чтобы помочь вам.

2. У меня общая проблема с пониманием. Прежде всего, функция http.post angular 2 по-прежнему не отправляет post-запрос на сервер spring boot. В дополнение к этому я все еще не могу получить данные формы через angular 2, чтобы сохранить данные в mongodb. Заранее благодарю вас.

Ответ №1:

sa, в вашем коде spring ваш код по умолчанию @RequestMapping("/saveUser") по умолчанию отображается как GET . таким образом, вы все равно добавляете одно свойство, как указано ниже.

можете ли вы передать свойство метода в этом сопоставлении и можете ли вы проверить его.

@RequestMapping(значение=»/saveUser» , метод=RequestMethod.Публикация

Ответ №2:

вы должны установить тип запроса. также вы должны установить, как вы будете получать эти входные данные. если вы отправляете их в виде тела запроса, то вы должны получить их следующим образом, поскольку вы передаете входные данные person для сохранения напрямую.

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

Ответ №3:

Ваш запрос Spring — это запрос GET, и вы пытаетесь вызвать метод POST из angular. И в 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);