woonizzooni

Swagger UI를 Vue UI로 구성해보기 본문

MISC

Swagger UI를 Vue UI로 구성해보기

woonizzooni 2021. 6. 2. 18:33

 

Swagger UI의 index.html을 참고해서, 

https://github.com/swagger-api/swagger-ui/blob/master/dist/index.html

<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Swagger UI</title>
    <link rel="stylesheet" type="text/css" href="./swagger-ui.css" />
    <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
    <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
    <style>
      html
      {
        box-sizing: border-box;
        overflow: -moz-scrollbars-vertical;
        overflow-y: scroll;
      }

      *,
      *:before,
      *:after
      {
        box-sizing: inherit;
      }

      body
      {
        margin:0;
        background: #fafafa;
      }
    </style>
  </head>

  <body>
    <div id="swagger-ui"></div>

    <script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
    <script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
    <script>
    window.onload = function() {
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        url: "https://petstore.swagger.io/v2/swagger.json",
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      });
      // End Swagger UI call region

      window.ui = ui;
    };
  </script>
  </body>
</html>

 

아래와 같이 작성하니, 일단(?) 된다...

$ npm install swagger-ui

 

./src/views/swagger/swagger.vue

<template>
  <div class="main-container">
    <div id="swagger-ui"></div>
  </div>
</template>

<script>
import SwaggerUIBundle from "swagger-ui";
import SwaggerUIStandalonePreset from "swagger-ui/dist/swagger-ui-standalone-preset";
import "swagger-ui/dist/swagger-ui.css";

export default {
  name: "swagger",
  mounted: function () {
    const ui = SwaggerUIBundle({
      urls: [
        {
          url: "https://****A.com/api/v1.0/docs/doc.json",
          name: "AAAA",
        },
        {
          url: "https://****B.com/api/v1.0/docs/doc.json",
          name: "BBBB",
        },
        {
          url: "https://****C.com/api/v1.0/docs/doc.json",
          name: "CCCC",
        },
        {
          url: "https://****D.com/api/v1.0/docs/doc.json",
          name: "DDDD",
        }
      ],
      dom_id: "#swagger-ui",
      deepLinking: true,
      presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
      plugins: [SwaggerUIBundle.plugins.DownloadUrl],
      layout: "StandaloneLayout",
    });

    window.ui = this.ui;
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>

 

저작자표시

'MISC' 카테고리의 다른 글

wireshark에서 tcp payload에 포함되어 있는 text로 필터링 방법 : contains operator  (0) 2023.08.18
Evernote 에버노트 기기 제한 / 장치 수 제한 회피 / Mac / Linux / Windows 데스크톱 앱 관련  (4) 2020.11.05
could not launch process: debugserver or lldb-server not found: install XCode's command line tools or lldb-server  (0) 2020.02.01
der인증서 pem 변환  (0) 2019.12.06
[VSCode] Python flask 디버깅 환경 구성 (Mac)  (0) 2019.12.06
'MISC' Related Articles more
Comments