[英]loading multiple json files in swagger-ui index.html
I have 2 json files. 我有2个json文件。 In order to statically serve this, I was told to make a different variable for each json content and then add those right below url:url.
为了静态提供服务,有人告诉我为每个json内容创建一个不同的变量,然后在url:url下添加这些变量。 My goal is to have 2 buttons on the main page, option 1 and option 2. Clicking on option 1 should load the spec swagger content, and clicking on option 2 should load the spec2 swagger content.
我的目标是在主页上有2个按钮,分别是选项1和选项2。单击选项1会加载spec swagger内容,单击选项2会加载spec2 swagger内容。 What's an easy way of doing this?
这样做的简单方法是什么?
Index.html: index.html的:
<script type="text/javascript">
$(function () {
var spec={
Json stuff goes here
}
var spec2={
Json stuff for #2 goes here
}
This is the swagger part in the same file. 这是同一文件中的大杂烩部分。 Right now only spec get's loaded initially.
现在,只有spec get最初加载。
var url = window.location.search.match(/url=([^&]+)/);
if (url && url.length > 1) {
url = decodeURIComponent(url[1]);
} else {
url = "http://petstore.swagger.io/v2/swagger.json";
}
hljs.configure({
highlightSizeThreshold: 5000
});
// Pre load translate...
if(window.SwaggerTranslator) {
window.SwaggerTranslator.translate();
}
window.swaggerUi = new SwaggerUi({
url: url,
spec: spec, // Here is where I call the variables
spec2: spec2
dom_id: "swagger-ui-container",
supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
onComplete: function(swaggerApi, swaggerUi){
if(typeof initOAuth == "function") {
initOAuth({
clientId: "your-client-id",
clientSecret: "your-client-secret-if-required",
realm: "your-realms",
appName: "your-app-name",
scopeSeparator: ",",
additionalQueryStringParams: {}
});
}
if(window.SwaggerTranslator) {
window.SwaggerTranslator.translate();
}
},
onFailure: function(data) {
log("Unable to Load SwaggerUI");
},
docExpansion: "none",
jsonEditor: false,
defaultModelRendering: 'schema',
showRequestHeaders: false
});
window.swaggerUi.load();
function log() {
if ('console' in window) {
console.log.apply(console, arguments);
}
}
});
</script>
</head>
What you've described is probably the easiest way to do it. 您所描述的可能是最简单的方法。 Just edit your
index.html
to have a button, and trigger the load event for swagger-ui 只需编辑
index.html
以拥有一个按钮,然后触发swagger-ui的load事件
First, create two containers: 首先,创建两个容器:
<div id="swagger-ui-container-1" class="swagger-ui-wrap"></div>
<div id="swagger-ui-container-2" class="swagger-ui-wrap"></div>
Next, create two swagger objects and assign them to each of the containers: 接下来,创建两个swagger对象并将其分配给每个容器:
// create swagger_1, do the same with swagger_2
var swagger_1 = new SwaggerUi({
url: url,
dom_id: "swagger-ui-container-1",
supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
onComplete: function(swaggerApi, swaggerUi){
swaggerApi.setBasePath('/foo');
},
onFailure: function(data) {
log("Unable to Load SwaggerUI");
},
docExpansion: "none",
jsonEditor: false,
apisSorter: "alpha",
defaultModelRendering: 'schema',
showRequestHeaders: false
});
Finally, keep a reference to them in an array, and call load on each of them: 最后,在数组中保留对它们的引用,并对它们中的每一个进行调用:
window.apis = [swagger_1, swagger_2];
window.apis[0].load();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.