推荐使用接入更简单的 浏览器插件版本

free-swagger-userscript

根据 swagger 文档自动生成前端接口代码片段

free-swagger-userscript 基于 free-swagger-core 开发的油猴脚本，增强浏览器端对于 swagger 文档的处理行为

下方的操作栏即 free-swagger-userscript 提供的扩展能力

功能介绍

api 搜索

复制 api 代码片段

复制/递归复制 interface/typedef

复制 api 路径

复制 mock 数据

复制全量 typedef

复制全量 interface

安装 & 使用

free-swagger-userscript 是基于 UserScript 用户脚本拓展插件 (跨平台的浏览器插件)开发的脚本工具. 因此使用前, 我们需要安装浏览器插件 Tampermonkey

安装油猴插件

在 chrome 的拓展工具中心搜索关键字 Tampermonkey

安装完成后, 浏览器状态栏应该会出现一个图标

安装 free-swagger-userscript

安装方式统一为引入 url 安装

脚本地址：https://cdn.jsdelivr.net/npm/free-swagger-userscript/dist/userScript.js

具体操作方式如下

使用

进入包含 swagger字段的网页， 你就会发现 Tampermonkey 图标亮了, 有一个小图标表示它在当前网页上注入了一个脚本

这时你会在网页下放发现多了一个操作栏, 祝贺您获得了 swagger-ui 的拓展能力.

匹配更多网址

油猴脚本通过脚本中 @include 字段判断当前网页是否需要注入脚本

添加 @include 字段，使得脚本匹配更多网址

至此，当访问网址包含 swagger / other-url 时，就会注入 free-swagger-exntends 脚本

更新

点击设置，勾选检查更新，输入更新 url https://cdn.jsdelivr.net/npm/free-swagger-userscript/dist/userScript.js 即可收到脚本更新消息

编辑模版

free-swagger-userscript 基于 free-swagger-core，通过模版生成代码片段

默认使用 axios 作为模版，生成的代码片段如下

通过编辑模版，可以自定义生成的代码片段，通过改变入参位置、切换请求库名来适配任意请求库的结构

例如将 axios.request 改成 request，示例如下

模版函数接受多个参数，可以自由组合成想要的代码片段，详细使用方式参考 free-swagger-core

源码调试

npm run serve

复制下面脚本到 tampermonkey

// ==UserScript==
// @author  yeyan1996
// @name  free-swagger-userscript
// @namespace  http://tampermonkey.net/
// @description  free-swagger for tampermonkey
// @version  5.3.4

// @include  /swagger
// @include  /doc.html

// ==/UserScript==


// 创建 DOM 节点
function createDom(type, props, style) {
    const dom = document.createElement(type)
    Object.assign(dom, props)
    Object.assign(dom.style, style)
    return dom
}


// 创建 script 标签
function createScripTag(src) {
    document.body.append(createDom("script", {src}));
}

createScripTag("http://localhost:8888/js/app.js") // 本地调试用

说明

由于网页读取失败，基于上诉内容修改，仅自用。

感谢

感谢原作者yeyan1996