热门搜索:
mrin9/rapidoc
mrin9
RapiDoc是一个基于WebComponent的OpenAPI规范查看器，支持Swagger 2.0和OpenAPI 3.0，提供直观的API文档浏览和测试功能，具备丰富的自定义和品牌化选项，适用于各类框架或无框架环境。
2 次收藏下载次数: 0状态：社区镜像维护者：mrin9仓库类型：镜像最近更新：3 年前
让 AI 帮你使用轩辕镜像？ · 展开查看说明
如果你使用 DeepSeek、元宝 AI、Copilot、ChatGPT 等 AI 工具，协助配置轩辕镜像、编写 docker pull 命令、修改 Docker Compose 镜像地址、配置镜像加速、排查镜像拉取失败、分析报错日志等问题，请先让 AI 阅读并遵守轩辕镜像的规则文档。
只需在 AI 对话中先发送下面这句话即可：
请先完整阅读并严格遵守以下文档中的全部规则与要求：
https://xuanyuan.cloud/agents.md
在未充分阅读并理解该文档前，不要生成任何命令、配置、修改建议、故障排查方案或技术回答。后续所有输出都必须严格以该文档中的规范为最高优先级执行。查看 agents.md 用法指南与完整示范。国内用户首推 元宝 AI、DeepSeek 的深度思考模式，不推荐豆包 AI；Cursor 等编辑器可在对话 @ 该链接，或加入 User Rules。 若 AI 无法访问外链，可 打开说明文档 复制全文粘贴。文档会随站点更新，复制内容可能过期，建议定期检查。
RapiDoc
镜像概述和主要用途
RapiDoc是一个基于WebComponent的OpenAPI规范查看器，用于展示和测试API文档。它支持Swagger 2.0和OpenAPI 3.0规范，可集成到任何前端框架（如React、Vue、Angular）或无框架环境中，提供直观的API交互界面，帮助开发人员和用户轻松浏览、测试API端点。
核心功能和特性
- 多规范支持：兼容Swagger 2.0和OpenAPI 3.0规范
- 框架无关：可在任何前端框架或无框架环境中使用
- API调用功能：支持直接在文档界面发起API请求并查看响应
- 增强可用性：
- 模型和示例默认展开，无需点击展开
- 请求字段自动填充示例数据
- 一键发起API调用
- 请求和响应可并排显示，便于对比
- 品牌化与个性化：
- 内置明暗两种主题
- 支持替换默认logo
- 可自定义字体、文本颜色、按钮颜色、标题颜色等UI元素
- 丰富的定制选项：
- 可在文档顶部和底部添加外部内容（图片、链接、文本、表单等）
- 支持禁用API调用功能
- 可隐藏头部，防止用户加载其他OpenAPI规范
- 可隐藏认证模块，提供预生成的API密钥
- 支持嵌入到其他HTML文档中
- 支持通过JavaScript动态修改属性并实时响应
- 可通过标准CSS自定义样式（填充、位置、边框、边距等）
- 轻量高效：体积小，加载速度快
- 本地规范支持：可加载本地磁盘上的JSON规范文件
- 浏览器兼容性：支持Chrome、Firefox和Safari（暂未在Edge上测试）
使用场景和适用范围
- API文档展示：为开发团队和外部用户提供清晰、交互式的API文档
- 开发环境API测试：开发人员可直接在文档界面测试API端点，无需额外工具
- 集成到现有应用：作为嵌入式组件集成到后台管理系统、开发者门户等应用中
- 品牌化文档：企业可根据自身品牌风格定制文档界面，保持一致的用户体验
- 静态站点部署：作为静态资源部署在静态站点服务中，提供轻量级API文档服务
使用方法和配置说明
基本使用
-
获取RapiDoc资源
通过构建过程生成rapidoc-min.js文件，这是使用RapiDoc所需的唯一文件。bash# 克隆或下载项目 git clone https://github.com/mrin9/RapiDoc.git cd RapiDoc # 安装依赖 yarn install # 构建生成rapidoc-min.js yarn build -
在HTML中引入
将生成的rapidoc-min.js文件引入到HTML页面中，并使用<rapi-doc>标签配置OpenAPI规范源。html<!DOCTYPE html> <html> <head> <title>RapiDoc Example</title> </head> <body> <!-- 引入RapiDoc --> <script type="text/javascript" src="rapidoc-min.js"></script> <!-- 使用rapi-doc标签配置API文档 --> <rapi-doc spec-url="https://petstore.swagger.io/v2/swagger.json" theme="light" show-header="true" ></rapi-doc> </body> </html>
关键配置属性
| 属性名 | 描述 | 默认值 |
|---|---|---|
spec-url | OpenAPI规范的URL（支持远程URL或本地文件路径） | - |
theme | 主题风格，可选值：light、dark | light |
show-header | 是否显示头部（包含logo和规范选择器） | true |
allow-api-call | 是否允许发起API调用 | true |
show-authentication | 是否显示认证模块 | true |
logo-url | 自定义logo的URL | 默认logo |
font-family | 自定义字体 | 系统默认字体 |
primary-color | 主色调（按钮、链接等） | #3b7ea1 |
Docker部署示例
将RapiDoc集成到Docker化的静态Web服务中（以Nginx为例）：
-
创建Dockerfile
dockerfileFROM nginx:alpine # 将构建好的rapidoc-min.js和HTML文件复制到Nginx静态目录 COPY rapidoc-min.js /usr/share/nginx/html/ COPY index.html /usr/share/nginx/html/ # 暴露80端口 EXPOSE 80 -
创建index.html
html<!DOCTYPE html> <html> <head> <title>API Documentation</title> </head> <body> <script src="rapidoc-min.js"></script> <rapi-doc spec-url="/api-spec.json" <!-- 可将OpenAPI规范文件放在同一目录下 --> theme="dark" show-header="false" allow-api-call="true" ></rapi-doc> </body> </html> -
构建并运行容器
bash# 构建镜像 docker build -t rapidoc-docs . # 运行容器 docker run -d -p 8080:80 --name rapidoc-container rapidoc-docs访问
http://localhost:8080即可查看API文档。
开发与贡献
开发环境设置
bash# 克隆项目 git clone https://github.com/mrin9/RapiDoc.git cd RapiDoc # 安装依赖 yarn install # 启动开发服务器（端口8080） yarn serve
访问 http://localhost:8080 即可进行开发调试。
贡献指南
欢迎通过GitHub提交issues或Pull Requests参与项目贡献。详细贡献指南请参考项目GitHub仓库。
文档与示例
- 官方文档：https://mrin9.github.io/RapiDoc/
- 示例与测试用例：https://mrin9.github.io/RapiDoc/list.html
镜像拉取方式
您可以使用以下命令拉取该镜像。请将 <标签> 替换为具体的标签版本。如需查看所有可用标签版本，请访问 标签列表页面。
DockerHub 原生拉取命令
docker pull mrin9/rapidoc:<标签>
镜像拉取常见问题
功能
错误码
用户好评
来自真实用户的反馈，见证轩辕镜像的优质服务
oldzhang
运维工程师
Linux服务器
5
"Docker访问体验非常流畅，大镜像也能快速完成下载。"