Отправка запроса на получение с HttpParams в angular

Question

Это отображение GET в моем бэкэнде:

@GetMapping(value = "search")
public List<Cat> search(@RequestBody CatDto catDto) {
    return catService.search(catDto);
}

Я хочу отправить запрос GET, чтобы получить список обратно в Angular HttpClient. Я знаю, что не могу отправить тело запроса с моим запросом GET, и я сделал это в моем component.ts:

search(cat: Cat): Observable<Cat[]> {
   let params = new HttpParams();
   params = params.append('name', cat.name);
   params = params.append('rating', (cat.rating).toString());
   params = params.append('birtday', (cat.birthday).toLocaleDateString());
   return this.httpClient.get<Cat[]>(this.messageBaseUri+'/search', {responseType: 'json', params});
}

Конечно, я получаю:

Required request body is missing

От мой бэкэнд Могу ли я сделать это как-то без изменения моего бэкэнда или мне нужно, чтобы конечная точка бэкэнда выглядела так:

@GetMapping(value = "search")
public List<Cat> search(@RequestParam String name,
                        @RequestParam Integer rating,
                        @RequestParam Date birthday) {

    return catService.search(name, rating, birthday);
}

Answer 1

Я считаю, что вы просите:

Java Контроллер:

            @GetMapping("/search")
            public List<Cat> search(
                                    @RequestParam("name") String name,
                                    @RequestParam("rating") Integer rating,
                                    @RequestParam("birthday") Date birthday) {
                       return catService.search(name, rating, birthday);
            }

В Angular Сервис:

            searchCat(params: HttpParams): Observable<any> {
                return this.http.get<any>("/searchUrlHere", { params });
             }

Наконец, вызвать метод поиска в th-ом файле с параметрами:

          onSearch(): void {
            const params = new HttpParams()
              .set('name', "yourName")
              .set('rating', "rating");
              .set('birthday', "birthday");
            this.gotToSearchDate(params);
          }

          gotToSearchDate(params: HttpParams) {
            this.catService.searchCat(params).subscribe(
              res => {
                console.log('List Date: ', res);
              },
              err => {
                console.log('Http error occurred');
              });
          }

ИЛИ

         onSearch() {
            const catParams = new HttpParams().set('name', "yourName").set('rating', "rating").set('birthday', "birthday");
            this.catService.searchCat(catParams).subscribe(
              resp => {
                  console.log('List Date: ', res);
              },
              err => {
                console.log('Http error occurred');
              });
          }

Answer 2

GET-запросы помещают свои параметры в URL, поэтому

Контроллер:

public List<Cat> search(@RequestParam CatDto catDto) {
    return catService.search(catDto);
}

ViewModel:

public class CatDto {
  String name;
  Integer rating;
  Date birthday;
}

Angular:

search(cat: Cat): Observable<Cat[]> {
  let params = {
    name: cat.name, // also try "catDto.name": cat.name
    rating: cat.rating.toString(),  // also try "catDto.rating": cat.rating.toString()
    birthday: cat.birthday.toLocaleDateString() // also try "catDto.birthday": cat.birthday.toLocaleDateString()
  }

  return this.httpClient.get<Cat[]>(this.messageBaseUri+'/search', {
    responseType: 'json',
    params: params
  });
}

Answer 3

GET-запросы обычно не имеют тела HTTP.

Изменение вашего Back-End для приема параметров запроса, а не тела запроса, кажется самым чистым решением. Однако вы можете просто изменить его следующим образом:

@GetMapping(value = "search")
public List<Cat> search(CatDto catDto) {
    return catService.search(catDto);
}