如何使用从 Spring Boot REST API 生成的 Angular 客户端？

Question

我终于设法使用 openapi-generator-maven-plugin.

使用 this tutorial 生成了一个 Angular 客户端

我不得不做一些调整，例如使用不同的依赖项

<!-- Spring Docs (Swagger) -->

<!-- TODO After version upgrades check https://github.com/springdoc/springdoc-openapi/issues/133 -->

<dependency>
    <groupId>org.springdoc</groupId>
    <artifactId>springdoc-openapi-core</artifactId>
    <version>1.1.49</version>
    <exclusions>
        <exclusion>
            <groupId>io.github.classgraph</groupId>
            <artifactId>classgraph</artifactId>
        </exclusion>
    </exclusions>
</dependency>

<dependency>
    <groupId>org.springdoc</groupId>
    <artifactId>springdoc-openapi-ui</artifactId>
    <version>1.1.49</version>
</dependency>

<dependency>
    <groupId>io.github.classgraph</groupId>
    <artifactId>classgraph</artifactId>
    <version>4.8.44</version>
</dependency>

并且还必须添加更多参数，例如对于数据库驱动程序等：

<profile>
    <id>angular</id>
    <build>
        <plugins>

            <!-- Code Generation -->

            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>build-helper-maven-plugin</artifactId>
                <version>3.0.0</version>
                <executions>
                    <execution>
                        <id>reserve-tomcat-port</id>
                        <goals>
                            <goal>reserve-network-port</goal>
                        </goals>
                        <phase>process-resources</phase>
                        <configuration>
                            <portNames>
                                <portName>tomcat.http.port</portName>
                            </portNames>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <!-- Spring Boot Maven plugin -->

            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <id>pre-integration-test</id>
                        <goals>
                            <goal>start</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>post-integration-test</id>
                        <goals>
                            <goal>stop</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <addResources>true</addResources>
                    <arguments>
                        <!--suppress MavenModelInspection -->
                        <argument>--server.port=${tomcat.http.port}</argument>
                        <argument>--spring.profiles.active=angular</argument>
                    </arguments>
                    <environmentVariables>
                        <JDBC_DATABASE_URL>jdbc:postgresql://localhost/mydatabase</JDBC_DATABASE_URL>
                        <JDBC_DATABASE_USERNAME>postgres</JDBC_DATABASE_USERNAME>
                        <JDBC_DATABASE_PASSWORD>root</JDBC_DATABASE_PASSWORD>
                    </environmentVariables>
                </configuration>
            </plugin>


            <plugin>
                <groupId>org.openapitools</groupId>
                <artifactId>openapi-generator-maven-plugin</artifactId>
                <version>4.2.2</version>
                <executions>
                    <execution>
                        <id>angular-client-code-generation</id>
                        <phase>integration-test</phase>
                        <goals>
                            <goal>generate</goal>
                        </goals>
                        <configuration>
                            <!--suppress MavenModelInspection -->
                            <inputSpec>http://localhost:${tomcat.http.port}/v3/api-docs</inputSpec>
                            <output>${project.build.directory}/generated-sources/angular-client</output>
                            <generatorName>typescript-angular</generatorName>
                            <!--
                                Use this option to dump the configuration help for the specified generator
                                instead of generating sources:
                                <configHelp>true</configHelp>
                            -->
                            <configOptions>
                                <!--
                                    Put generator-specific parameters here, e.g. for typescript-angular:
                                    <apiModulePrefix>Backend</apiModulePrefix>
                                 -->
                            </configOptions>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

        </plugins>
    </build>
</profile>

但是现在，在生成代码之后，我无法按照（生成的）README.md:

中发布的说明进行操作

@

Building

To install the required dependencies and to build the typescript sources run:
npm install 
npm run build 
publishing

First build the package then run npm publish

consuming

Navigate to the folder of your consuming project and run one of next commands.

published:

npm install @ --save

...

原因：没有 package.json，因此也没有 "build" 可以首先执行的脚本。

因此，我想知道是否遗漏了什么或者我必须做什么才能在我的 Angular 客户端中使用生成的代码。

Answer 1

我在中找到了答案。

我必须为 openapi-generator-maven-plugin 设置 <npmName>tmsClientRest</npmName>:

<plugin>
    <groupId>org.openapitools</groupId>
    <artifactId>openapi-generator-maven-plugin</artifactId>
    <version>4.2.2</version>
    <executions>
        <execution>
            <id>angular-client-code-generation</id>
            <phase>integration-test</phase>
            <goals>
                <goal>generate</goal>
            </goals>
            <configuration>
                <!--suppress MavenModelInspection -->
                <inputSpec>http://localhost:${tomcat.http.port}/v3/api-docs</inputSpec>
                <output>${project.build.directory}/generated-sources/angular-client</output>
                <generatorName>typescript-angular</generatorName>                    
                <configOptions>
                    <!-- The missing part(s) -->
                    <npmName>restClientName</npmName>
                    <npmVersion>0.0.1</npmName>
                </configOptions>
            </configuration>
        </execution>
    </executions>
</plugin>

Note: In my case I also had to add npmVersion to make it "work" ~~(it's still not working, just running into the next issue)~~

更新：

如果你得到类似

的东西

models.ts is not a module

可能是因为您还没有任何 DTO 对象。在我的例子中，我只有一个简单的 REST 控制器 returned 一个简单的字符串。只要确保你 return（至少）一个虚拟对象并且 model.ts 填充了代码并且 npm install && npm run build 最终应该可以工作，例如：

public static class HealthInfoDto {
    public String message = "I am alive, you see?";
}

@RequestMapping(value = "/health", method = RequestMethod.GET)
public @ResponseBody HealthInfoDto getHealth() {
    return new HealthInfoDto();
}

而不仅仅是

@RequestMapping(value = "/health", method = RequestMethod.GET)
public @ResponseBody String getHealth() {
    return "Hello World!";
}

如何使用从 Spring Boot REST API 生成的 Angular 客户端？

How to use generated Angular client from Spring Boot REST API?

spring-boot

angular

openapi-generator

@

Building

publishing

consuming