给RapiDoc添加多接口支持

今天试了一下用RapiDoc替换项目中的SwaggerUI，发现它的现有接口中无法实现下拉式的接口切换，只能通过选择接口json文件的方式。翻看了一下它的接口文档，发现自己扩展一下还是比较简单的：

<!doctype html>
 <!-- Important: must specify -->
<html>
<head>
    <meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 charecters -->
    <!--<script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>-->
    <script type="module" src="/js/rapidoc-min.js"></script>
</head>
<body>
    <rapi-doc id="rapidoc" spec-url="/swagger/v1/swagger.json" allow-server-selection="false"
              heading-text="12345" schema-style="table" show-header="false" show-info="false">
        <header>
            <div class="root">
                <div class="header">TianFang Open API</div>
                <select name="" id="apis" class="list">
                    <option class="opt" value="/swagger/v1/swagger.json">/swagger/v1/swagger.json</option>
                    <option class="opt" value="/v3/api3-docs">/v3/api3-docs</option>
                </select>
            </div>

        </header>
    </rapi-doc>
    <script>
        const selector = document.getElementById('apis');
        selector.onchange = function (e) {
            const value = e.target.value;
            const docEl = document.getElementById('rapidoc');
            docEl.loadSpec(value);
        }
    </script>
    <style>
        .root {
            padding: 8px 4px 8px 4px;
            color: var(--header-fg);
            background-color: var(--header-bg);
            display: flex;
            align-items:center;
            flex-direction: row;
        }

        .header {
            font-size: 20px;
            padding: 0px 8px;
        }

        .list {
            background: var(--header-color-darker);
            color: var(--header-fg);
            padding:4px;
            width:500px;
        }

    </style>
</body>
</html>

简单来说，就是将RapiDoc的Head隐藏起来，自己注入了一个下拉框作为Head，下拉选项改变时，调用RapiDoc的接口切换接口。随手写的，没有美化，先凑活着用吧。说不定下个版本就有支持官方的切换接口的界面了。

posted on 2021-04-02 23:36 天方阅读(471) 评论(0) 编辑收藏举报