在Angular中使用Swagger

如何解决在Angular中使用Swagger

我是Swagger的新手，据我所知，它用于自动生成API文档。除此之外，我认为它还可以通过使用Swagger Codegen来生成前端。在这一步，我对于正确地在项目中使用招摇摇头感到困惑。

我已经使用.NET Core创建了后端，并且API方法已经准备就绪。现在，我需要将swagger集成到我的项目中。我有一个最初的Angular前端应用程序，但是由于代码混合，我想从stratch创建前端，然后将Swagger集成到其中。所以；

1。。我应该使用必要的Swagger工具生成前端吗？似乎不太好，但是如果它被普遍使用并且随着项目的扩大而成为问题，那么我当然可以使用该选项。

2。。如果我从stratch创建Angular项目，该如何整合招摇工具？我应该使用相关组件的ts文件生成代码吗？

3。。如果我向前端添加了新组件，并向已经使用Swagger的API添加了相应的API方法。我应该做哪些修改？我尝试了一下，并在构建项目后生成了一个新的swagger配置文件。

解决方法

讨论我在问题下方发表的评论。

仅是为了澄清swagger和openApi是什么，swagger既是rest api规范（例如swaggerSpec.Json）又是一组用于处理该规范的工具。例如，swagger代码生成器，swagger UI等。现在，在某个时间点，该规范已从swagger重命名为OpenApi。

这意味着该规范称为OpenApi，而swagger是用于处理openApi的一组工具。

来源：https://swagger.io/blog/api-strategy/difference-between-swagger-and-openapi/

除了大张旗鼓之外，还有其他一些替代工具，例如NSwag和Swashbuckle，它们可以使openApi规范的使用更加容易。

有2个主要部分：

openApi规范的代码生成。您可以从OpenApi文档中为服务器（例如ASP.NET核心REST控制器）生成代码，并从OpenApi文档中生成客户端（例如C＃REST客户端，.TS REST客户端，用Java命名）。或者，您可以仅通过例如生成OpenApi规范本身（我的SwaggerSpec.json）。您的.net核心项目，带有一些工具。
（Web）Ui轻松托管文档。 Swagger具有webUI，NSwag甚至https://github.com/Redocly/redoc之类的替代工具，所有这些工具都可以轻松测试您定义的Api端点。通常，这些文档站点是独立的。它们可能是按样式配置的，但您通常不会对其进行改动。当然，您可以自己滚动-或克隆任何ui存储库并进行更改-但这就是另一个主题。

我已经研究了所有三个选项（Swagger，SwashBuckle和NSwag），因此选择了NSwag，因为当时a）它是我工作的那个，b）它具有最多的功能，并且c）社区相当活性。大约一年前。

我将解释我的工作流程，这将回答您遇到的大多数问题。我觉得这个问题范围越来越广，因此请深入研究，并尝试找到更适合您需求的具体问题。

就像我说过我使用NSwag工具链：

我在服务器应用程序中创建Asp.Net控制器。它包含控制器功能/端点的一些属性，因此可以更好地生成标准规范：
然后我使用NSWag studio创建一个openApi文档文件

输出：

在这一点上，您可以选择再次使用NSwag 生成一个打字稿客户端，然后将其用于您的angular / react w / e前端项目：

然后我将swagger文档添加到我的asp.net服务器项目中，并启用swagger UI：

Startup.cs中的某个地方：

        public void Configure(IApplicationBuilder app,IWebHostEnvironment env,IOptions<AppSettings> appSettingsAccessor,ILogger<Startup> logger,StaticFileConfigSection staticFileConfig)
        {
            // Add the openApi document and serve the swagger dashboard.
            app.UseOpenApi();
            app.UseSwaggerUi3(); // serve Swagger UI 
         ...

然后我可以去/ swagger查看Web用户界面：

就是这样。所有这些工具当然都可以自动化-但我选择不这样做。使其工作起来可能会很麻烦，而对于NSwag studio来说，无论如何我总是一个按钮。这迫使我在工作上更加小心。

使用Codegen是您的选择。您可以将生成的代码用作样板，从而直接开始您的API集成。您可以只复制生成的模型和服务并将其集成。这样可以节省大量的编码时间，还可以避免服务编码中的人为错误。但是前端的其余部分可以是您喜欢的任何东西，不一定是生成的项目。例如，您可以使用选择的Angular种子，然后仅集成Codegen的服务。
如前所述，您可以从Cogeden复制生成的服务和模型，以抢先一步。如果决定完全手动，则必须使用Angular HTTP向服务器（https://angular.io/guide/http）发出请求。您必须手动定义模型和服务才能与实体一起使用。在这种情况下，Swagger仅是该API的参考，与Angular完全没有集成。除非Codegen生成的库不足，否则我不建议使用此选项。如果Swagger设计正确完成（可惜很少见），遵循所有标准并提供完整的数据模型，您就可以信任生成的库。
这只是建议而非客观指导：如果对API的更新较小，请直接在代码中进行更新，并使用新更改对Swagger进行更新。如果更改是相关的，则需要具有不同端点的新的主要API版本。在这种情况下，生成一个新的Swagger Codegen库并将其替换为旧库将是一个好主意。为此，必须避免使用生成的库的服务内部结构，应尽可能“按原样”使用该库。

在Angular中使用Swagger

如何解决在Angular中使用Swagger

解决方法

相关推荐