[JAVA] Verbinden Sie Spring Boot und Angular typsicher mit OpenAPI Generator

Dieser Artikel ist eine aktualisierte Version der folgenden vorherigen Artikel. Verbinden von Spring Boot und Angular2 mit typsicher

Es war ein Problem

Ich hatte Angst, dass das Web-Backend und das Web-Frontend lose mit JSON kommunizieren. Ich wollte während des Builds so viele Probleme wie möglich erkennen. Ich wollte typsicher wie RPC kommunizieren können.

Verschiedene Versions-Upgrades von der vorherigen Konfiguration

OpenAPI Generator und Swagger Codegen sind Tools, die Clientcode und Server-Stub-Code basierend auf den REST-API-Spezifikationen generieren. Leider ist der Betrieb von Swagger Codegen? Der OpenAPI-Generator wurde geboren, nachdem er von einem Top-Mitarbeiter gegabelt wurde. Derzeit hat OpenAPI Generator mehr Commits und Mitwirkende. Dieses Mal wechselte ich zu OpenAPI Generator.

Was ich gemacht habe

Dies ist ein Vorlagenprojekt. https://github.com/chibat/spring-openapi-angular-starter

Projektstruktur

Die OpenAPI Spec-Datei wird automatisch von SpringFox generiert und muss nicht manuell erstellt werden.

Entwicklungsfluss

Nehmen wir als Beispiel eine einfache Zusatz-App, die im Vorlagenprojekt enthalten ist.

1. Erstellen eines Web-Backends

Web-Backends werden mit Spring Boot erstellt. Es ist eine Controller-Klasse, die einfach zwei Ganzzahlen in einer Anforderung empfängt, diese hinzufügt und antwortet.

package app.backend.web;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import io.swagger.annotations.ApiOperation;
import lombok.Data;
import lombok.Value;

@RestController
public class CalculatorController {

    @PostMapping("/rest/api/add")
    @ApiOperation(value = "", tags = "calculator", nickname = "add")
    public Response add(@RequestBody final Request request) {
        return new Response(request.getArg1() + request.getArg2());
    }

    @Data
    public static class Request {
        private Integer arg1;
        private Integer arg2;
    }

    @Value
    public static class Response {
        private final Integer result;
    }
}

Es ist zu beachten, dass die ApiOperation-Annotation den Klassennamen des Clients verwendet, der die durch Tags angegebene Zeichenfolge und die durch den Kurznamen angegebene Zeichenfolge als Methodennamen generiert. Außerdem wird der Spitzname als operationId von OpenAPI Spec behandelt und scheint nutzlos zu sein, es sei denn, er ist insgesamt eindeutig.

2. Generierung des Web-Front-End-Client-Codes

Führt Gradle-Aufgaben aus und generiert Client-Code.

$ cd backend
$ ./gradlew openApiGenerate

Der Test wird ausgeführt und die von SpringFox ausgegebenen API-Spezifikationen werden in eine Datei ausgegeben. OpenAPI Generator liest die Datei und generiert den Clientcode.

Die Abhängigkeit von SpringFox dient nur zu Testzwecken und erhöht die Größe der Anwendung zur Laufzeit nicht.

3. Erstellen eines Web-Frontends

Web-Frontends werden in Angular erstellt. Erstellen Sie eine Komponentenklasse, die den generierten Clientcode verwendet. CalculatorService ist eine automatisch generierte Klasse.

import { Component } from '@angular/core';
import { CalculatorService } from './client/api/calculator.service';

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

  arg1: number;
  arg2: number;
  result: number;

  constructor(private  calculatorService: CalculatorService) {
  }

  add() {
    if (this.arg1 || this.arg2) {
      this.calculatorService
        .add({arg1: this.arg1, arg2: this.arg2})
        .subscribe(data => this.result = data.result);
    }
  }
}

Zusammenfassung

OpenAPI Generator Gut. Der generierte Winkelcode ist auch gut. Wie oben erwähnt, genießen Sie bitte ein komfortables, sicheres Leben.

Das E-Book von OpenAPI Generator ist jetzt im Verkauf! (Hinzugefügt am 2019-09-19)

Ein E-Book von OpenAPI Generator wurde veröffentlicht. Wenn Sie interessiert sind, warum nicht kaufen?

Einführung in die Codegenerierung für die REST-API (OpenAPI Generator)