Как вызвать Java HTTP POST метод в Angular - PullRequest
Новая
       8

Как вызвать Java HTTP POST метод в Angular

0 голосов
/ 26 февраля 2020

У меня следующая проблема: я создал Java проект с использованием Spring boot и MyBatis, у меня есть несколько классов (например, DirezioneRegionale), с его интерфейсом отображения для MyBatis (с соответствующим файлом XML), его сервисом класс и контроллер. Я проверил HTTP-вызовы, и они работают (я могу видеть результат моих запросов, и они верны).

Вы можете увидеть, как я реализовал части Java и MyBatis здесь: Возврат списка в MyBatis

Теперь проблема в том, что это часть большого проекта, в котором я использую Angular 8, я должен иметь возможность вызывать метод HTTP POST и чтобы вернуть, используя JSON я полагаю, эквивалент моего Java класса, но в TypeScript.

Чтобы сделать это, я попробовал следующее:

В app.component .ts Я добавил: 

allDirReg = this.piuService.getAllDirReg();

В app.component. html Я добавил: 

<p>{{ allDirReg }}</p>

Так что я ожидал получить список со значениями id и значения описания моего объекта DirezioneRegionale, но отображается только 

[object Object]

.

Я даже пытался изменить в файле app.component.ts строку следующим образом: 

allDirReg = JSON.stringify(this.piuService.getAllDirReg());

Но результат: 

{
   "_isScalar": false,
   "source": {
      "_isScalar": false,
      "source": {
         "_isScalar": false,
         "source": {
            "_isScalar": true,
            "value": {
               "url": "localhost:8081/getAllDirRegs",
               "body": null,
               "reportProgress": false,
               "withCredentials": false,
               "responseType": "json",
               "method": "POST",
               "headers": {
                  "normalizedNames": {},
                  "lazyUpdate": null,
                  "headers": {}
               },
               "params": {
                  "updates": null,
                  "cloneFrom": null,
                  "encoder": {},
                  "map": null
               },
               "urlWithParams": "localhost:8081/getAllDirRegs"
            }
         },
         "operator": {
            "concurrent":1
         }
      },
      "operator": {}
   },
   "operator": {}
}

Код моей службы в Angular следующий: 

  getAllDirReg() {
    const doneCallback = this.loadingService.startLoading();
    return this.http.post<any>(`localhost:8081/getAllDirRegs`, {}).pipe(finalize(doneCallback))
  }

РЕДАКТИРОВАТЬ: Это мой Java DirezioneRegionaleController: 

@RestController
public class DirezioneRegionaleController {

    @Autowired
    private DirezioneRegionaleService direzioneRegionaleService;

    @PostMapping("getAllDirRegs")
    @ResponseBody
    public ResponseEntity<?> getAllDirRegs() {
        List<DirezioneRegionale> allDirRegs = direzioneRegionaleService.getAllDirRegs();
        if (null == allDirRegs) {
            return ResponseEntity.notFound().build();
        }

        List<JSONObject> allDirRegsJSON = new ArrayList<JSONObject>();
        for (DirezioneRegionale dr : allDirRegs) {
            JSONObject drJSON = new JSONObject();
            drJSON.put("id", dr.getID());
            drJSON.put("description", dr.getDescription());
            allDirRegsJSON.add(drJSON);
        }

        return new ResponseEntity<List<JSONObject>>(allDirRegsJSON, HttpStatus.OK);

        // return ResponseEntity.ok(allDirRegs);
    }
}

РЕДАКТИРОВАТЬ 2:

То, что я ожидаю быть возвращается: 

[{"description":"DIR REG CAMPAN BASIL CALABR PUGLIA","direzioniCommerciali":null,"id":"09560"},{"description":"DBT DIREZIONE MILANO E PROVINCIA","direzioniCommerciali":null,"id":"09546"},{"description":"DBT DIR V FVG TR AA","direzioniCommerciali":null,"id":"09547"},{"description":"DBT DIR MILANO E PROVINCIA","direzioniCommerciali":null,"id":"09546"},{"description":"DR EM RO MAR ABR MOL","direzioniCommerciali":null,"id":"09548"},{"description":"DBT DIR V FVG  TR AA","direzioniCommerciali":null,"id":"09547"},{"description":"DBT DIREZIONE PIEMONTE V D'AOSTA LIGURIA","direzioniCommerciali":null,"id":"09544"},{"description":"DR FINAN INST","direzioniCommerciali":null,"id":"11471"},{"description":"DIREZIONE RETE SANPAOLO","direzioniCommerciali":null,"id":"00FIT"},{"description":"DR CAM BA CAL PU SIC","direzioniCommerciali":null,"id":"09560"},{"description":"DIR.GEN.BANCA APULIA","direzioniCommerciali":null,"id":"00FIT"},{"description":"DR TOSC UMB LAZ SARD","direzioniCommerciali":null,"id":"09549"},{"description":"DIREZIONE GENERALE -  BANCO DI NAPOLI","direzioniCommerciali":null,"id":"00FIT"},{"description":"COORDINAMENTO SERVIZIO GESTORE REMOTO","direzioniCommerciali":null,"id":"20233"},{"description":"DBT DIREZIONE LOMBARDIA","direzioniCommerciali":null,"id":"09545"},{"description":"DIREZIONE GENERALE","direzioniCommerciali":null,"id":"00FIT"},{"description":"DBT DIR CAMP BASIL CAL E PUG","direzioniCommerciali":null,"id":"09560"},{"description":"DBT DIR VEN FVG E TR AA","direzioniCommerciali":null,"id":"09547"},{"description":"DBT DIR MI E PROV","direzioniCommerciali":null,"id":"09546"},{"description":"DIR REG TOSCANA E UMBRIA","direzioniCommerciali":null,"id":"09549"},{"description":"DIR REG LAZIO SARDEGNA E SICILIA","direzioniCommerciali":null,"id":"09590"},{"description":"DIREZIONE GENERALE CRFORLI' E ROMAGNA","direzioniCommerciali":null,"id":"00FIT"},{"description":"DR CAM BA CAL PU","direzioniCommerciali":null,"id":"09560"},{"description":"DR GLOBAL CORPORATE","direzioniCommerciali":null,"id":"11474"},{"description":"DR TOS UMB LAZ E SAR","direzioniCommerciali":null,"id":"09549"},{"description":"D.R.CA.BA.CAL.PU.","direzioniCommerciali":null,"id":"09560"},{"description":"DBT DIREZIONE VEN FRIULI VG E TRENTIN AA","direzioniCommerciali":null,"id":"09547"},{"description":"DR TOS E UMB","direzioniCommerciali":null,"id":"09549"},{"description":"DIREZ. S. PAOLO B.CO DI NAPOLI","direzioniCommerciali":null,"id":"00FIT"},{"description":"DR GLOB CORP","direzioniCommerciali":null,"id":"11474"},{"description":"DBT DIR PIEM VAL D'AOS E LIG","direzioniCommerciali":null,"id":"09544"},{"description":"DIR REG EMILIA R,MARCHE,ABRUZZO,MOLISE","direzioniCommerciali":null,"id":"09548"},{"description":"DIREZIONE GENERALE CARISBO","direzioniCommerciali":null,"id":"00FIT"},{"description":"DBT DIR PIEM VDA LIG","direzioniCommerciali":null,"id":"09544"},{"description":"DBT DIR EMIL MAR ABR E MOL","direzioniCommerciali":null,"id":"09548"},{"description":"DIREZIONE GENERALE CR VENETO","direzioniCommerciali":null,"id":"00FIT"},{"description":"DIREZIONE GENERALE CR FVG","direzioniCommerciali":null,"id":"00FIT"},{"description":"DR LAZIO SAR E SIC","direzioniCommerciali":null,"id":"09590"},{"description":"DBT DIR LOMBARDIA","direzioniCommerciali":null,"id":"09545"}]

РЕДАКТИРОВАТЬ 3: Мой app.component.ts: 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  constructor(
    private piuService: PiuService) {
  }
  title = "PIU Versione 2";

  allDirReg = this.piuService.getAllDirReg().subscribe(bodyRes => { this.allDirReg = JSON.stringify(bodyRes)})

}

1 Ответ

0 голосов
/ 26 февраля 2020

JSON, который вы видите там, - это структура Observable класса

HttpClient.post, возвращающая Observable<T>, для которой необходимо вызвать метод subscribe, чтобы иметь возможность обработайте ответ сервера после его получения. Это асинхронный механизм.

пример: 

...
this.piuService.getAllDirReg().subscribe(bodyRes=> { this.allDirReg = bodyRes });
...

это для доступа к телу ответа, но вы можете получить доступ к самому ответу. Взгляните на определения методов HttpClient. Вы можете предоставить некоторые опции, чтобы получить то, что вы хотите.

РЕДАКТИРОВАТЬ: Поскольку вы не предоставили опции для метода post, я предположил, что по умолчанию observe опция была HttpResponse. Кажется, это само тело. Я отредактировал пример в следствиях.

РЕДАКТИРОВАТЬ 2: После просмотра вашего класса компонентов некоторые вещи там не так. Версия, которая должна работать: 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  constructor(private piuService: PiuService) {
  }
  title = "PIU Versione 2";
  allDirReg = "";

  ngOnInit() {
    this.piuService.getAllDirReg().subscribe(bodyRes => { this.allDirReg = JSON.stringify(bodyRes)})
  }
}

Но в этом случае вы работаете с строковой моделью, которая не является главной целью. Вы должны использовать определенные модели классов при работе с TS и Angular. Я предлагаю вам следовать Angular учебнику. Вы можете попробовать Tour of Heroes, который является вводным руководством Google для Angular.

...