根据服务器端口更改路由列表（swagger）

问题描述 投票：0回答：1

我想通过“选定的服务器”共享已经通过标签链接的路线。澄清：

{
  "openapi": "3.1.0",
  "info": {
    "title": "blue_traktor_api",
    "description": "This API handles various functionalities for USEPI, Icons, Dashboard, Settings, Patterns, Devices, Widgets, and more.",
    "version": "0.1.0",
    "contact": {
      "name": "API Support",
      "url": "",
      "email": ""
    }
  },
  "servers": [
    {
      "url": "http://localhost:8000",
      "description": "TCP server for main operations"
    },
    {
      "url": "ws://localhost:8080",
      "description": "WebSocket server for updated parameters"
    }
  ],
  "paths": {...},
  "components":{...}
}

这是我的 openal file.json 的第一部分，其中列出了服务器。它看起来像这样：enter image description here

enter image description here

我还有几条路线，例如：

  "paths": {
    "/api/usepi/patterns/create": {
      "post": {
        "tags": ["patterns"],
        "summary": "Create a new pattern",
        "operationId": "createPattern",
        "requestBody": {
          "required": true,
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/RequestStructure_PatternRequest"
              },
              "examples": {
                "PatternExample": {
                  "summary": "An example of a PatternRequest",
                  "value": {
                    "data": {
                      "id": null,
                      "title": "test",
                      "description": "test desc",
                      "icon": "http://localhost:8000/api/icons/test.svg",
                      "createDate": null,
                      "updateDate": null,
                      "favourite": false,
                      "data": {
                        "ID": {},
                        "QR-Code": {},
                        "Position": {},
                        "DeviceParams": {}
                      }
                    }
                  }
                }
              }
            }
          }
        },
        "responses": {
          "200": {
            "description": "Pattern created.",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/GoodResponse_Id"
                }
              }
            }
          },
          "500": {
            "description": "Internal Server Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorResponse"
                }
              }
            }
          }
        }
      }
    }, ...
}

仍然有这样的路线，但带有不同的标签：

"/api/widgets/get": {
      "post": {
        "tags": ["widgets"],
        "summary": "Get widget details",
        "operationId": "getWidget",
        "requestBody": {
          "required": true,
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/RequestStructure_Id"
              }
            }
          }
        },
        "responses": {
          "200": {
            "description": "Widget details.",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/GoodResponse_GetWidgetResponse"
                }
              }
            }
          },
          "500": {
            "description": "Internal Server Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorResponse"
                }
              }
            }
          }
        }
      }
    },

我希望在选择服务器时，仅显示与其关联的路由。例如，如果 http://localhost:8000 则 /api/usepi/patterns/create ...

在我需要的地方，我还以这种方式摆脱了“尝试”按钮和参数块：

<script>
window.onload = function() {
    const ui = SwaggerUIBundle({
      url: "http://localhost:8000/openai.json",
      dom_id: '#swagger-ui',
      deepLinking: true,
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset
      ],
      plugins: [
        SwaggerUIBundle.plugins.DownloadUrl
      ],
      layout: "StandaloneLayout"
    });

    window.ui = ui;

    function hideTryItOutButtons() {
      const pathsToDisable = [

        '#operations-patterns-createPattern > div.no-margin > div > div.opblock-section > div.opblock-section-header > div.try-out > button',
        '#operations-patterns-createPattern > div.no-margin > div > div.opblock-section > div.opblock-section-header',
        '#operations-patterns-createPattern > div.no-margin > div > div.opblock-section > div.parameters-container', ];

      pathsToDisable.forEach(selector => {
        const button = document.querySelector(selector);
        if (button) {
          button.style.display = 'none';
        }
      });
    }
    const observer = new MutationObserver(hideTryItOutButtons);
    observer.observe(document.getElementById('swagger-ui'), { childList: true, subtree: true });

    hideTryItOutButtons();
  };
</script>

这就是它的样子：

enter image description here

如果（据我记得）你不能为标签做子标签，我怎样才能只显示必要的路线（比如过滤器）？选择服务器时显示路线，还按标签分组*

swagger swagger-ui
1个回答
0
投票

我解决了这个问题，这样我就不必处理错误，当隐藏列表并从服务器列表切换到另一个选项时，该元素完全消失。

"paths": {
    "/api/usepi/patterns/create": {
      "post": {
        "tags": ["patterns"],
        "summary": "http://localhost:8000",
        "operationId": "createPattern",
        "requestBody": {
          "required": true,
          "content": {
            "application/json": {
              "schema": {
                "$ref": "#/components/schemas/RequestStructure_PatternRequest"
              },
              "examples": {
                "PatternExample": {
                  "summary": "An example of a PatternRequest",
                  "value": {
                    "data": {
                      "id": null,
                      "title": "test",
                      "description": "test desc",
                      "icon": "http://localhost:8000/api/icons/Cтатическое оборудование/Статическое оборудование.svg",
                      "createDate": null,
                      "updateDate": null,
                      "favourite": false,
                      "data": {
                        "ID": {},
                        "QR-Code": {},
                        "Position": {},
                        "DeviceParams": {}
                      }
                    }
                  }
                }
              }
            }
          }
        },
        "responses": {
          "200": {
            "description": "Pattern created.",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/GoodResponse_Id"
                }
              }
            }
          },
          "500": {
            "description": "Internal Server Error",
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/ErrorResponse"
                }
              }
            }
          }
        }
      }
    },

在“摘要”中，我写下了列表中的一个变体，以确定该路线属于列表的哪个元素。接下来，我在绘制时在列表中查找匹配项，并删除与所选列表值不匹配的内容：

enter image description here

具体实现方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Swagger UI</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.3/swagger-ui.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    body { background-color: #ffffff; font-family: Arial, sans-serif; }
  </style>
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.3/swagger-ui-bundle.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.10.3/swagger-ui-standalone-preset.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  window.onload = function() {
    const ui = SwaggerUIBundle({
      url: "http://localhost:8000/openai.json",
      dom_id: '#swagger-ui',
      deepLinking: true,
      presets: [
        SwaggerUIBundle.presets.apis,
        SwaggerUIStandalonePreset
      ],
      plugins: [
        SwaggerUIBundle.plugins.DownloadUrl
      ],
      layout: "StandaloneLayout"
    });
    window.ui = ui;

    let isFiltering = false;

    function filterElements() {
      const selectElement = document.querySelector("#swagger-ui>section>div.swagger-ui>div:nth-child(2)>div.scheme-container>section>div>div>div>label>select");
      if (selectElement) {
        const selectedValue = selectElement.options[selectElement.selectedIndex].textContent.split(' - ')[0];
        console.log("Selected value from dropdown:", selectedValue);

        const parentCatalogs = document.querySelectorAll("#swagger-ui>section>div.swagger-ui>div:nth-child(2)>div:nth-child(4)>section>div>span> div > h3");
        console.log("Parent catalogs found:", parentCatalogs.length);

        parentCatalogs.forEach(parent => {
          const parentElement = parent.closest('div.opblock-tag-section');
          if (parentElement) {
            let childVisible = false;
            const childElements = parentElement.querySelectorAll("[id^='operations-']:not([id^='operations-tag'])");
            childElements.forEach(childElement => {
              const summaryControl = childElement.querySelector("button.opblock-summary-control > div > div");
              if (summaryControl) {
                const summaryText = summaryControl.textContent.trim();
                if (summaryText === selectedValue) {
                  childElement.style.display = '';
                  childVisible = true;
                  console.log(`---/Child Element ID: ${childElement.id} = ${summaryText}`);
                } else {
                  childElement.style.display = 'none';
                  console.log(`Hiding element with Child Element ID: ${childElement.id} as it does not match the selected value`);
                }
              } else {
                console.log(`Summary control not found for child element: ${childElement.id}`);
              }

              const elementsToRemove = childElement.querySelectorAll('.opblock-summary-description');
              elementsToRemove.forEach(element => {
                element.style.display = "none";
              });

              if (childElement.querySelectorAll('.no-margin').length > 0) {
                const opblock = childElement

                setTimeout(() => {
                  const elementToClear = opblock.querySelectorAll('.opblock-summary-path')
                  elementToClear.forEach(el => {
                    const dataPath = el.getAttribute('data-path').split('/').at(-1)
                    try { opblock.querySelectorAll('.opblock-description-wrapper')[0].remove() } catch {}
                    if (dataPath !== 'list' && dataPath !== 'icons' && dataPath !== '{path}') {
                      opblock.querySelectorAll('.opblock-section-header')[0].remove()
                    }
                  })
                }, 30)
              }
            });

            if (isFiltering) {
              if (!childVisible) {
                parentElement.style.display = 'none';
                console.log(`Hiding parent element as all child elements are hidden: ${parent.textContent}`);
              } else {
                parentElement.style.display = '';
              }
            }
          } else {
            console.log("Parent element not found for:", parent.textContent);
          }
        });
      } else {
        console.log("Select element not found.");
      }
    }

    document.addEventListener('change', function(event) {
      const selectElement = document.querySelector("#swagger-ui > section > div.swagger-ui > div:nth-child(2) > div.scheme-container > section > div > div > div > label > select");
      if (event.target === selectElement) {
        isFiltering = true;
        filterElements();
        isFiltering = false;
      }
    });

    document.addEventListener('click', () => {
        filterElements();
    });
    const observer = new MutationObserver(() => {
      const selectElement = document.querySelector("#swagger-ui > section > div.swagger-ui > div:nth-child(2) > div.scheme-container > section > div > div > div > label > select");
      if (selectElement) {
        isFiltering = true;
        filterElements();
        isFiltering = false;
        observer.disconnect();
      }
    });

    observer.observe(document.querySelector('#swagger-ui'), { childList: true, subtree: true });
  };
</script>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.