基于静态Swagger JSON文件

如果你已经有一个静态的Swagger JSON文件（通常由工具自动生成或手动编写），并且想要基于这个JSON文件展示和测试API，你可以使用Swagger UI来实现这一需求，而不需要直接集成到代码中。下面是基于静态JSON文件使用Swagger UI的基本步骤：

1. 准备Swagger JSON文件

确保你有一个有效的Swagger/OpenAPI规范的JSON文件。这个文件通常命名为swagger.json或openapi.json，并放置在你的web服务器的可访问目录下。例如，文件路径可能是http://yourdomain.com/api/swagger.json。

2. 下载并部署Swagger UI

Swagger UI是一个开源项目，可以直接从GitHub上下载或者通过npm安装。下载后，将Swagger UI的静态文件部署到你的web服务器上。这些文件通常包括一个HTML文件（如index.html）和其他必要的CSS、JS资源。

3. 配置Swagger UI

打开Swagger UI的index.html文件，找到如下配置部分：

<!-- 在这里配置Swagger UI -->
<script>
window.onload = function() {
  // 初始化Swagger UI
  SwaggerUIBundle({
    url: "https://petstore.swagger.io/v2/swagger.json", // 修改为你的Swagger JSON文件URL
    dom_id: '#swagger-ui',
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    layout: "BaseLayout",
    deepLinking: true,
    showExtensions: true,
    showCommonExtensions: true
  })
}
</script>

将url属性的值替换为你第一步中准备好的Swagger JSON文件的实际URL。

4. 访问Swagger UI

部署好Swagger UI及其依赖资源后，通过浏览器访问Swagger UI的入口页面（通常是index.html），你就可以看到根据JSON文件生成的API文档界面了。你可以浏览API、阅读描述、尝试调用等。

这种方法适用于那些不想或不能直接在代码中集成Swagger的情况，比如对已有API文档进行快速可视化展示，或者是对第三方API文档进行本地浏览和测试。