在Flask上显示Swagger UI，不进行任何联播

Question

有人知道我可以在不创建或连接API的情况下在.yml上提供swagger UI .yml文件的方法吗？ 我只想在网站上显示swagger文件，以便人们可以看到如何使用API，但是我不想创建API或连接任何东西，因为该API是私有的，因此无论如何都无法调用。

该API来自AWS API Gateway，因此我无法使用flask连接任何东西。

我研究了连接，但是我需要连接我的API方法才能使用它，但无法使用。

我可以使用openapi编辑器将api规范转换为html，然后提供html，但我想尝试使用swagger ui提供的漂亮布局。

Answer 1

您可以利用Swagger UI npm软件包，该软件包发布了可与规范文档一起使用的JavaScript捆绑包。

您可能需要通过将规范文件加载到UI对象中来进行一些小的操作。

编辑

当我做完全相同的事情时，我发现了一些代码。 我创建了一个JavaScript文件，该文件将从服务器加载规范并以SwaggerUI包显示它，以替换指定的HTML标签。 这还利用了一个库将YAML解析为JSON。

我使用webpack捆绑了所有内容，但是您可能会使用其他Web捆绑器。

JavaScript： index.js

const jsYAML = require('js-yaml');
const SwaggerUI = require('swagger-ui');

function httpGetAsync(url, callback) {
    let xmlHttp = new XMLHttpRequest();

    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState === 4 && xmlHttp.status === 200)
            callback(xmlHttp.responseText);
    };

    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}

function parseYamlSpec(yaml) {
    try {
        return jsYAML.safeLoad(yaml);
    } catch (error) {
        console.error('Error parsing OpenAPI YAML to JavaScript object');
        console.error(error);
        return null;
    }
}

function displayOpenApiSpec() {
    httpGetAsync('./openapi.yaml', function (yamlSpec) {
        SwaggerUI({
            dom_id: '#openapi',
            spec: parseYamlSpec(yamlSpec)
        })
    });
}

displayOpenApiSpec();

的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Swagger Doc</title>
    <link rel="stylesheet" type="text/css" href="swagger-ui.css"/>
</head>
<body>
    <div id="openapi"></div>
    <script src="bundle.js"></script>
</body>
</html>

我还从SwaggerUI包中获取了CSS文件，并提供了该文件。 这是使它看起来漂亮和实用的必要条件。

编辑2

package.json

{
  "name": "sdk",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "js-yaml": "^3.12.0",
    "swagger-ui": "^3.20.2"
  },
  "devDependencies": {
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname),
        filename: 'bundle.js'
    }
};

既然已经安装了Node.js和npm ，则可以使用上面的package.json和webpack.config.js文件，并从工作目录中运行以下两个命令：

npm install
npm build

这是在做什么

本质上，您希望提供一个HTML文件，一个JavaScript包和一个CSS样式表，以将Swagger规范加载到DOM中，对其进行漂亮的样式化，并使用SwaggerUI库使其具有交互性。

对于给定的JavaScript文件，这将在浏览器中不起作用，因为它使用Node.js样式require导入两个所需的库。 但是webpack可以用内联的实际JavaScript库替换它们，并“最小化”代码，从而减小文件大小。

为此，您需要安装所有这些库（使用npm ，Node Package Manager）以及webpack（及其命令行界面），然后运行webpack，以便它将所有内容捆绑在一起。

package.json文件列出了所有需要的库以及webpack，并定义了一个“脚本”供您运行webpack命令。 通过运行npm install ， npm将为您安装所有内容，并将其安装在名为node_modules的本地文件夹中。

然后，运行npm build ， Node.js将执行webpack命令，该命令将进行所有捆绑并创建输出文件bundle.js （在上面的HTML文件中引用了该文件）。

一旦这些全部完成，你可以添加index.html ， bundle.js ， swagger-ui.css （我复制出来的SwaggerUI目录node_modules ），以及您扬鞭规范你的公开投放了您的服务器上的文件。

Answer 2

Swagger在项目的dist文件夹中有一个已发布的示例。

该浏览器的JavaScript准备包是可用unpkg通过或者直接cloudflare CDN ，可以直接从那里担任。

在您的用例中，您可以在dist文件夹中编写类似于index.html文件的模板文件，而无需为flask项目的Swagger UI捆绑包设置其他构建过程。

您的模板如下所示，其中您将url的值替换为包含您的API定义的yaml文件的URL：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="//unpkg.com/swagger-ui-dist@3/swagger-ui-standalone-preset.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.22.1/swagger-ui-standalone-preset.js"></script> -->
    <script src="//unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.22.1/swagger-ui-bundle.js"></script> -->
    <link rel="stylesheet" href="//unpkg.com/swagger-ui-dist@3/swagger-ui.css" />
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.22.1/swagger-ui.css" /> -->
    <title>Swagger</title>
</head>
<body>
    <div id="swagger-ui"></div>
    <script>
        window.onload = function() {
          SwaggerUIBundle({
            url: "https://petstore.swagger.io/v2/swagger.yaml",
            dom_id: '#swagger-ui',
            presets: [
              SwaggerUIBundle.presets.apis,
              SwaggerUIStandalonePreset
            ],
            layout: "StandaloneLayout"
          })
        }
    </script>
</body>
</html>

在Flask上显示Swagger UI，不进行任何联播

问题描述

2 个解决方案

解决方案1
3 2019-04-17 18:11:44

编辑

编辑2

这是在做什么

解决方案2
3 已采纳 2019-04-17 18:44:04

在Flask上显示Swagger UI，不进行任何联播

问题描述

2 个解决方案

解决方案1 3 2019-04-17 18:11:44

编辑

编辑2

这是在做什么

解决方案2 3 已采纳 2019-04-17 18:44:04

解决方案1
3 2019-04-17 18:11:44

解决方案2
3 已采纳 2019-04-17 18:44:04