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

时间:2020-01-19 18:52:21

标签: angular spring-boot openapi-generator

我终于设法通过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中发布的说明进行操作:

@

建筑物

要安装所需的依赖项并构建打字稿 来源运行:

npm install 
npm run build 

发布

首先构建软件包,然后运行npm publish

消费

导航到消耗项目的文件夹,然后运行下一个 命令。

已发布:

npm install @ --save

...

原因:没有package.json,因此也没有可以首先执行的“构建”脚本。

因此,我想知道是否有什么遗漏之处,或者我需要做些什么才能在Angular客户端中使用生成的代码。

1 个答案:

答案 0 :(得分:0)

我在Why does openapi-generator not create a package.json with typescript-angular?中找到了答案。

我必须为<npmName>tmsClientRest</npmName>设置openapi-generator-maven-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>                    
                <configOptions>
                    <!-- The missing part(s) -->
                    <npmName>restClientName</npmName>
                    <npmVersion>0.0.1</npmName>
                </configOptions>
            </configuration>
        </execution>
    </executions>
</plugin>

注意:就我而言,我还必须添加npmVersion使其“起作用” (它仍然不起作用,只是遇到下一个问题)

更新

如果您得到类似的东西

models.ts不是一个模块

这可能是因为您还没有任何DTO对象。就我而言,我只有一个简单的REST控制器,它返回了一个简单的String。只需确保您(至少)返回了一个虚拟对象,然后用代码填充了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!";
}