下面所用工具下載下傳
http://editor.swagger.io/#/ demo
一、安裝 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\http-server
C:\Users\zz\AppData\Roaming\npm\hs -> C:\Users\zz\AppData\Roaming\npm\node_modules\http-server\bin\http-server
+ [email protected]
added 25 packages from 28 contributors in 9.118s
C:\Users\zz>
2.swagger
https://github.com/swagger-api/swagger-codegen
https://github.com/swagger-api/swagger-editor
https://github.com/swagger-api/swagger-ui
https://github.com/swagger-api
下載下傳後的檔案：
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:
http://192.168.191.1:8000
http://192.168.39.187:8000
http://127.0.0.1:8000
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 [email protected] 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 [email protected] No repository field.
+ [email protected]
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!
浏覽器輸入位址：http://127.0.0.1:3000/root/index.html
線上的官方的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/onelikeone/p/9997429.html