swagger-ui 读取后端json
时间: 2025-02-08 11:07:28 AIGC 浏览: 120
### 配置 Swagger-UI 从后端读取 JSON 文件
为了使 Swagger-UI 正确加载并显示由后端提供的 OpenAPI (以前称为 Swagger) 规范文档,通常有两种主要方式来实现这一功能:
#### 方法一:通过 URL 加载远程 API 定义
当 Swagger-UI 和提供 API 描述的服务器位于不同位置时,可以通过指定 `url` 参数指向该资源的位置。此参数告知 Swagger-UI 去哪里获取最新的 API 文档。
```javascript
// index.html 中配置 swagger-ui 的初始化选项
window.onload = function() {
const ui = SwaggerUIBundle({
url: "/v2/api-docs", // 后端返回 json 地址, 如 http://localhost:8080/v2/api-docs
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
]
})
}
```
这种方法适用于大多数场景,在实际部署环境中也较为常用[^1]。
#### 方法二:利用 Docker Compose 挂载本地文件夹至容器内
如果希望直接挂载包含静态 JSON 文件的目录到正在运行的 Swagger-UI 实例中,则可以采用如下 docker-compose.yml 设置。这种方式适合开发阶段快速测试或调试目的。
```yaml
version: '3.4'
services:
desktop:
image: swaggerapi/swagger-ui
container_name: swagger-ui
ports:
- "8082:8080"
environment:
SWAGGER_JSON_URL: /usr/share/nginx/html/swagger/openapi.json # 映射后的路径下的json文件地址
volumes:
- ./path/to/local/json/files:/usr/share/nginx/html/swagger # 主机上的绝对路径替换为自己的真实路径
```
注意这里的环境变量 `SWAGGER_JSON_URL` 应设置为目标 JSON 文件相对于挂载点的具体相对路径[^2]。
以上两种方案都可以有效地让 Swagger-UI 展示来自后端的数据定义,具体选择取决于应用场景和个人偏好。
阅读全文
相关推荐


















