swagger-ui本地部署使用
swagger-ui本地部署使用
swagger-ui本地部署使用
1.下载swagger-ui
点击进入下载官网
github下载网址,可直接下载
下载zip压缩包,解压就可用
2.要想在本地服务使用，需要安装http-server
前提: node环境,可用nvm管理，可看我的博客
cmd中安装: npm install -g http-server
3.用法:
打开swagger-ui里面的dist目录
创建json目录，将你要使用的json文件放在json目录下
修改swagger-initializer.js里面的内容,直接使用下面的覆盖
注意:修改const defaultApi = './json/goods.json';为页面你要展示的json文件
let swaggerUIInstance = null; function initSwaggerUI(url) { if (swaggerUIInstance) { swaggerUIInstance.specActions.updateSpec(''); } swaggerUIInstance = SwaggerUIBundle({ url: url, dom_id: '#swagger-ui', deepLinking: true, presets: [ SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset ], plugins: [ SwaggerUIBundle.plugins.DownloadUrl ], layout: "StandaloneLayout" }); window.ui = swaggerUIInstance; } window.onload = function() { // 默认加载第一个API文档 const defaultApi = './json/goods.json'; initSwaggerUI(defaultApi); // 设置下拉菜单事件 const apiSelector = document.getElementById('api-selector'); if (apiSelector) { apiSelector.addEventListener('change', function(e) { initSwaggerUI(e.target.value); }); } };打开index.html,用以下进行覆盖
注意:修改选择框里面的元素，替换为你要导入的json文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>API文档中心</title> <link rel="stylesheet" type="text/css" href="./swagger-ui.css" /> <style> .api-selector-container { padding: 15px; background: #f8f9fa; text-align: center; border-bottom: 1px solid #ddd; } #api-selector { padding: 8px 15px; font-size: 14px; border-radius: 4px; border: 1px solid #ced4da; } </style> </head> <body> <div class="api-selector-container"> <label for="api-selector">选择API服务：</label> <select id="api-selector"> <option value="./json/goods.json">商品服务</option> <option value="./json/order.json">订单服务</option> <option value="./json/user.json">用户服务</option> <option value="./json/seckill.json">秒杀服务</option> </select> </div> <div id="swagger-ui"></div> <script src="./swagger-ui-bundle.js"></script> <script src="./swagger-ui-standalone-preset.js"></script> <script src="./swagger-initializer.js"></script> </body> </html>
4.启动本地服务
打开cmd,先切换到swagger-ui的dist目录下,然后运行如下:
评论