将 Swagger UI 嵌入到 Blazor 服务器端应用程序中

Question

我想将 swagger UI 嵌入到我的 blazor 应用程序的页面中。我很难找到如何使用剃刀页面执行此操作的示例。有人有这样做的例子吗？我通常是一名后端开发人员，所以在启动和运行这个前端方面有点困难。

Answer 1

虽然这是一个相当老的问题，但我决定尝试找到答案，因为我想自己将 Swagger UI 嵌入到我的一个页面中。 事实证明这很容易做到！
所有积分都转到此存储库 - 所有者“jsauve”。

他表明你可以做到：

为了使其显示在您的页面上，您需要执行以下步骤：

0. 在 Blazor 服务器上安装

   Swashbuckle.AspNetCore

   。
1. 在Startup.cs中，ConfigureServices添加：

            services.AddControllers();
            services.AddSwaggerGen(c =>
            {
                c.SwaggerDoc("v1", new OpenApiInfo { Title = "My API", Version = "v1" });
            });

2. 在Startup.cs中，配置添加：

            app.UseSwagger();
            app.UseSwaggerUI(c =>
            {
                c.SwaggerEndpoint("/swagger/v1/swagger.json", "v1");
            });

3. 简单地，创建 Razor 组件并添加：

            @page "/test"

            <iframe src="swagger" style="width:90%;height:1200px;border:none;" />

从您的例如导航至

/test

MainLayout.razor。我希望它可以帮助别人，因为它确实帮助了我。

Answer 2

这可以在渲染后通过 JS Interop 实现。

使用其文档在 Program.cs 中设置 Swagger。

然后像这样创建您的

.razor

页面

@inject NavigationManager NavigationManager

@page "/docs/view"

@inject IJSRuntime JS

<link rel="stylesheet" type="text/css" href="docs/swagger-ui.css">

<div id="swagger-ui"></div>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/swagger-ui.css" />
<script src="https://unpkg.com/[email protected]/swagger-ui-bundle.js" crossorigin></script>
<script>
        window.loadswagger = function () {
        const ui = SwaggerUIBundle({
            url: '@($"{NavigationManager.ToAbsoluteUri("docs/v1/swagger.json")}")',
            dom_id: '#swagger-ui',
            presets: [
                SwaggerUIBundle.presets.apis
            ]
        })
        window.ui = ui
    }
</script>

@code {
    private ElementReference divElement;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("loadswagger");
        }
    }
}

此页面将包含嵌入的 swagger。 为他们的样式表和您的应用程序之间可能存在的 CSS 冲突做好准备