任何人都知道我可以在没有创建或挂钩API的情况下在烧瓶上提供一个swagger UI .yml文件的方式吗？我只想在网站上显示swagger文件，以便人们可以看到如何使用API，但我不想创建API或挂钩任何东西，因为API是私有的，所以它无论如何都无法调用。
API来自AWS API Gateway，所以我无法用烧瓶挂钩。
我查看了connexion，但我需要连接我的API方法来使用它，这是行不通的。
我可以使用openapi编辑器将api规范转换为html然后提供html但我想尝试使用swagger ui提供的漂亮布局。
Swagger在该项目的dist folder中有一个已发布的示例。
浏览器准备好的javascript包是available in unpkg or directly via cloudflare CDN，可以直接从那里提供。
在您的用例中，您可以在index.html文件夹中编写类似于dist文件的模板文件，而无需为您的烧瓶项目设置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>
您可以使用Swagger UI npm package，它发布可以与spec文档一起提供的JavaScript包。
您可能需要通过将spec文件加载到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文件并提供了它。这是使它看起来漂亮和功能的必要条件。
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 and npm，您可以使用上面的package.json和webpack.config.js文件，并从工作目录运行以下两个命令：
npm install
npm build
从本质上讲，您希望提供HTML文件，JavaScript包和CSS样式表，这些样式表可以将Swagger规范加载到DOM中，很好地设计样式，并使用SwaggerUI库使其具有交互性。
使用给定的JavaScript文件，这在浏览器中不起作用，因为它使用Node.js样式require导入两个所需的库。但webpack将能够在线替换这些实际的JavaScript库，并“缩小”代码，使其文件大小更小。
为此，您需要安装所有这些库（使用npm，节点包管理器），以及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（我从node_modules中的SwaggerUI目录中复制），并将Swagger规范添加到服务器上的公共服务文件中。