Skip to content

Latest commit

 

History

History
161 lines (89 loc) · 5.16 KB

README.md

File metadata and controls

161 lines (89 loc) · 5.16 KB

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

free-swagger-userscript

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

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

image-20200710125155851

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

功能介绍

api 搜索

复制 api 代码片段

复制/递归复制 interface/typedef

复制 api 路径

复制 mock 数据

复制全量 typedef

复制全量 interface

安装 & 使用

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

安装油猴插件

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

image.png

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

img

安装 free-swagger-userscript

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

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

具体操作方式如下

image-20200710132840013

image.png

image.png

image-20200710133402091

使用

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

image-20200710141155411

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

image-20200710141538427

匹配更多网址

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

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

image-20200710141651665

image-20200710141735750

image-20200710141815365

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

更新

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

image-20210411155119953

编辑模版

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

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

image-20200710151113242

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

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

image-20210320170732104

image-20210320170350749

模版函数接受多个参数,可以自由组合成想要的代码片段,详细使用方式参考 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") // 本地调试用