一、安裝 swagger editor
說明：安裝swagger前需要安裝node工具
工具安裝
1. node
下載地址：http://nodejs.cn/
根據自己的需要下載版本即可，本人電腦是: win7 64bit，所以下載后的文件是：node-v10.13.0-x64.msi (雙擊安裝即可，沒啥特殊的，不再說明)
測試node工具是否安裝成功？打開cmd終端
C:\Users\zz>node -v
v10.13.0
C:\Users\zz>npm -v
6.4.1
可以看到node.js安裝成功！
1.1 安裝http-server
使用node.js安裝http-server模塊，主要通過http-server模塊來啟用http服務，運行swagger-editor。通過命令:
npm install -g http-server
安裝記錄：
C:\Users\zz>npm install -g http-server
C:\Users\zz\AppData\Roaming\npm\http-server -> C:\Users\zz\AppData\Roaming\npm\node_modules\http-server\bin\ht
tp-server
C:\Users\zz\AppData\Roaming\npm\hs -> C:\Users\zz\AppData\Roaming\npm\node_modules\http-server\bin\http-server
+ http-server@0.11.1
added 25 packages from 28 contributors in 9.118s
C:\Users\zz>
2.swagger
下載后的文件：
swagger-codegen-master.zip
swagger-editor-master.zip
swagger-ui-master.zip
2.1 解壓 swagger-editor-master.zip
進入到 swagger editor 根目錄：
C:\Users\zz>cd /d D:\Tools\API_Editor_Tools\tools\swagger\swagger-editor-master\swagger-editor-master
運行： http-server -p 8000
說明：-p的作用是指定端口，后面的8000就是我們指定的端口，訪問localhost:8000就可以進入swagger-edit就可以進入編輯界面了，左邊是編輯框，右邊是預覽界面
D:\Tools\API_Editor_Tools\tools\swagger\swagger-editor-master\swagger-editor-master>http-server -p 8000 (注意：需要到該目錄下執行此命令)
Starting up http-server, serving ./
Available on:
Hit CTRL-C to stop the server
通過瀏覽器訪問：http://localhost:8000/ 或 http://127.0.0.1:8000 即可進入 swagger edit的編輯界面了，左邊是編輯框，右邊是預覽界面
PS：
如果不願用通過http-server來運行swagger-editor，可以通過tomcat來運行：
首先把swagger-editor目錄復制到tomcat根目錄的webapps，然后運行tomcat，訪問localhost:8080/swagger-editor就可以了
二、swagger-ui 環境搭建
1. 新建works文件夾，然后進入到 works目錄，執行初始化命令：npm init ，出現如下信息，填的地方可以隨便寫，也可以不寫
works目錄下生成了一個package.json文件：
2. 解壓swagger-ui-master.zip
將上截圖中的 dist 目錄復制到 D:\Tools\API_Editor_Tools\works 目錄下：
3. 安裝express
D:\Tools\API_Editor_Tools\works>npm install express
npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to https:
//registry.npmjs.org/bytes failed, reason: connect ETIMEDOUT 104.16.19.35:443
npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
[..................] \ loadDep:statuses: sill resolveWithNewModule ms@2.0.0 checking installable status
安裝express半天，還沒有安裝上，按照如下方法，指定鏡像服務器獲取資源：
解決npm install慢的問題： (我使用下面換鏡像的方法，依然沒有安裝成功，后來多次安裝，不換鏡像，又安裝成功了)
使用NPM（Node.js包管理工具）安裝依賴時速度特別慢，為了安裝Express，執行命令后兩個多小時都沒安裝成功，最后只能取消安裝，筆者20M帶寬，應該不是我網絡的原因，后來在網上找了好久才找到一種最佳解決辦法，在安裝時可以手動指定從哪個鏡像服務器獲取資源，我們可以使用阿里巴巴在國內的鏡像服務器，命令如下：
npm install -gd express --registry=http://registry.npm.taobao.org
只需要使用–registry參數指定鏡像服務器地址，為了避免每次安裝都需要--registry參數，可以使用如下命令進行永久設置(個人建議，不要永久設置)：
npm config set registry http://registry.npm.taobao.org
換了國內鏡像，安裝速度就很快了。
最后安裝express成功記錄：
C:\Users\zz>cd /d D:\Tools\API_Editor_Tools\works
D:\Tools\API_Editor_Tools\works>npm install express
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN note_app@1.0.0 No repository field.
+ express@4.16.4
added 48 packages from 36 contributors and audited 121 packages in 1.767s
found 0 vulnerabilities
D:\Tools\API_Editor_Tools\works>
安裝express后，多了如下信息：
4. 創建index.js
work目錄下 新建 index.js 文件，index.js文件內容如下：
var express = require('express');
var app = express();
app.use('/root', express.static('dist'));
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
上述/root也可以換成其他字串
5.然后啟動，並運行查看，如上代碼為3000端口，如有沖突請自行修改
D:\Tools\API_Editor_Tools\works>node index.js // 啟動命令
Example app listening on port 3000!
在線的官方的Demo已經在本地搭建好了。
改造之旅
a. 希望替換官方的API
通過 swagger editor 導出json格式的文件如：swagger.json （這是我們需要的最重要的產物）
可以參考官方的文檔，編寫正確的符合格式的Spec。OpenAPI-Specification(https://github.com/OAI/OpenAPI-Specification)
配置json文件：
1） 將 swagger editor 工具導出的 swagger.json 文件拷貝到 D:\Tools\API_Editor_Tools\works\dist 目錄下：
2） 打開 D:\Tools\API_Editor_Tools\works\dist\index.html 文件，修改如下：
上面截圖提到的index.js是上面提到的 D:\Tools\API_Editor_Tools\works>node index.js 這個文件
重啟node index.js，然后重新打開瀏覽器，可以看到自己根據服務端API編寫的API文檔。
到此swagger-editor 和swagger-ui已經部署完畢了！！
參考：
https://www.cnblogs.com/shamo89/p/7680941.html 功能強大的swagger-editor的介紹與使用