6

给RapiDoc添加多接口支持

 3 years ago
source link: https://www.cnblogs.com/TianFang/p/14612825.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

今天试了一下用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的接口切换接口。随手写的，没有美化，先凑活着用吧。说不定下个版本就有支持官方的切换接口的界面了。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK