This article is an upgraded version of the following previous articles. Connect Spring Boot and Angular2 to type-safe
I was afraid that the web backend and the web frontend were communicating loosely with JSON. I wanted to detect problems as much as possible during build. I wanted to be able to communicate type-safely like RPC.
Old | new | |
---|---|---|
backend language | Java8 | Java11 |
backend framework | Spring Boot 1 | Spring Boot 2 |
frontend framework | Angular5 | Angular7 |
Code generation tool | Swagger Codegen | OpenAPI Generator |
OpenAPI Generator and Swagger Codegen are tools that generate client code and server stub code based on the REST API specification. Unfortunately the operation of Swagger Codegen? There seemed to be a problem with OpenAPI Generator, which was forked by top contributors. Currently, OpenAPI Generator has more commits and contributors. This time, I switched to OpenAPI Generator.
This is a template project. https://github.com/chibat/spring-openapi-angular-starter
The OpenAPI Spec file is automatically generated by SpringFox and does not need to be created manually.
Let's take a simple addition application included in the template project as an example.
Web backends are created in Spring Boot. It is a Controller class that just receives two integers in a request, adds them, and responds.
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;
}
}
It should be noted that the ApiOperation annotation uses the client class name that generates the string specified by tags and the string specified by nickname as the method name. Also, nickname is treated as an OperationId of OpenAPI Spec, and it seems to be useless unless it is unique as a whole.
Perform Gradle tasks and generate client code.
$ cd backend
$ ./gradlew openApiGenerate
The test is executed and the API specifications output by SpringFox are output to a file. OpenAPI Generator reads the file and generates the client code.
Dependence on SpringFox is only for testing and does not increase the size of the application at runtime.
Web frontends are created in Angular. Create a Component class that uses the generated client code. CalculatorService is an automatically generated class.
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);
}
}
}
OpenAPI Generator Good. The generated Angular code is also good. As mentioned above, please enjoy a comfortable type safe life.
The OpenAPI Generator e-book is now on sale. If you are interested, why not purchase it?
Introduction to Code Generation for REST API (OpenAPI Generator)
Recommended Posts