ghcr.io/rookie-luochao/openapi-ui:1.11.0

OpenAPI UI

OpenAPI/Swagger UI 文档，可快速生成模拟参数并调用 API，同时也是简化版的 Postman 工具

English | 简体中文

截图

网站域名

• 中国：[***] http、https
• 美国：doc.openapi-ui.com
• 美国2：docs.openapi-ui.com

使用方法

通过 CDN

spec-url 为 完整路径

openAPI UI

spec-url 为 路径

openAPI UI

通过 React（或 Vue）

import { useEffect } from "react";

const SetUpOpenApiUI = () => {
useEffect(() => {
import("openapi-ui-dist")
}, []);

return (

);
}

export const openapiRoutes = {
path: "/openapi",
id: "openapi",
element: ,
};

通过 Go Web 框架

• https://github.com/rookie-luochao/go-openapi-ui

通过 Nodejs Web 框架

• https://github.com/openapi-ui/nodejs-openapi-ui

快速开始

# node 版本 >= 18
# 下载 node_modules
pnpm install
# 或执行 make install

# 启动
npm run dev
# 或执行 make dev

部分脚本

# 构建
npm run build
# 或执行 make build

# 制作 Docker 镜像
make docker-build

# 运行 Docker 镜像
make docker-run

# 制作并运行 Docker 镜像
make docker-build-run

支持的数据格式

• swagger2.json/swagger2.yml
• openapi3.json/openapi3.yml

使用方式

• 输入 swagger2/openapi3 API 网关 URL，刷新页面以更新接口
• 上传 swagger2/openapi3 文件
• 输入 swagger2/openapi3 文本

全局配置

• 支持配置请求超时时间，默认请求超时时间为 2 分钟
• 支持配置请求 Authorization，当前请求中可覆盖 Authorization

分享 URL

• 仅在通过 URL 模式导入时可分享 URL
• 复制 URL 并分享给需要的人，他们可通过该 URL 直达指定接口

模拟请求参数

1. 若 schema 包含 format 字段，则使用 https://github.com/Redocly/openapi-sampler 生成模拟请求参数
2. 若 schema 不包含 format 字段，则使用 faker 生成模拟请求参数

请求错误消息显示规则

1. 若返回结构包含 message 字段，则显示 message 字段
2. 若返回结构包含 msg 字段，则显示 msg 字段
3. 若返回结果为字符串，则显示该字符串
4. 显示 AxiosResponse.statusText 字段
5. 显示 AxiosError.message 字段

连接内网 API

• 若无法连接内网 API，可在本地运行本项目，或使用 Docker 在本地或服务器上部署本项目

支持多个 API 网关 URL

• 使用的缓存策略为 session storage，因此可同时打开多个页面

Docker 部署，支持环境变量注入

# 拉取 Docker 镜像
docker pull ghcr.io/rookie-luochao/openapi-ui:latest

# 启动容器，nginx 反向代理自定义端口，例如：docker run -d -p 8081:80 ghcr.io/rookie-luochao/openapi-ui:latest
docker run -d -p 80:80 -e APP_CONFIG=env=zh,appNameZH=简洁美观的接口文档 ghcr.io/rookie-luochao/openapi-ui:latest

Node 版本

node >= 18