java - 如何在 Angular 中调用 Java HTTP POST 方法

Question

我有以下问题:我使用 Spring boot 和 MyBatis 创建了一个 Java 项目，我有一些类(例如 DirezioneRegionale)，以及 MyBatis 的映射器接口(interface)(带有相应的 XML 文件)、他的服务类和 Controller 。我测试了 HTTP 调用并且它们有效(我能够看到查询结果并且它们是正确的)。

你可以在这里看到我是如何实现Java和MyBatis部分的:Return a List<MyClass> in MyBatis

现在的问题是，这是一个更大项目的一部分，在该项目中我使用 Angular 8，我应该能够调用 HTTP POST 方法并返回(我想使用 JSON)，相当于我的 Java 类，但是在 TypeScript 中。

为此，我尝试了以下操作:

在 app.component.ts 中我添加了:

allDirReg = this.piuService.getAllDirReg();

在 app.component.html 中我添加了:

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

所以我希望返回一个包含 DirezioneRegionale 对象的 id 值和描述值的列表，但只是

[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)})

}

Answer 1

您在那里看到的 JSON 是 Observable 的结构类

HttpClient.post方法返回 Observable<T>您必须调用 subscribe方法能够在收到服务器响应后对其进行处理。这是一种异步机制。

示例:

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

这是访问响应正文，但您可以访问响应本身。查看 HttpClient 方法定义。您可以提供一些选项来获得您想要的东西。

编辑:由于您没有为 post 方法提供选项，我假设默认 observe选项是 HttpResponse。看来是 body 本身。我已经编辑了结果中的示例。

EDIT2:查看您的组件类后，发现有些事情是错误的。应该有效的版本:

@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 入门教程。