【Swagger】node.js+Swagger-Editer+Swagger-ui實現Swagger環境的搭建

一、前言

Swagger是一款強大的API文檔編寫工具，關於Swagger的使用主要有兩種方式：

• 代碼中使用引入相關的依賴或者jar包，然後在開發過程中使用即可，關於這種方式可以參考我的另一篇博客【Swagger】Springboot中集成Swagger2.0
• 藉助於Swagger-Editer工具來進行在線的編輯

二、安裝、配置Swagger-Editer環境

（1）安裝node和npm，現在node.js安裝以後node和npm都會直接一併安裝；下載地址：node.js下載 ；下載以後直接安裝即可，與一般的軟件安裝沒什麼差別。
（2）測試安裝的node和npm，在cmd中輸入以下 node -v 和 npm -v ，如果看到下面的內容說明安裝成功。

（3）下載Swagger-Editer，Swagger-Editer下載地址Swagger-Editer下載，或者可以在官網進行選擇下載，下載後解壓文件。

(4) 安裝http-server ，執行以下命令進行http-server的安裝，‘npm install -g http-server’ ，其中 -g 表示全局安裝。
(5) 在Swagger-Editer所在的文件夾下使用http-server啓動Swagger-Editer，可以使用默認端口，也可以自定義端口。

http-server -p 8090  # 自定義端口 8090
http-server          # 使用默認端口8080

(6)訪問Swagger-Editer，在瀏覽器中輸入http://localhost:8090 ，如果出現以下畫面說明搭建成功。

接下來就可以在線對API進行設計了，編輯過程中的代碼格式可以選擇yaml或者json，一般選用yaml吧，也不復雜。

三、搭建Swagger-UI環境

Swagger-Editer環境搭建完後，我們就可以進行相應的編輯了，但是編輯後的API文檔需要使用Swagger-UI來進行渲染，接下來就介紹一下Swagger-UI環境的搭建。
（1）下載Swagger-UI項目，下載地址：Swagger-UI下載 ，下載完以後解壓文件。
（2）可以在本地磁盤上新建一個文件夾，我這裏命名爲swagger，然後在該文件夾中進行初始化node的操作，如下大括號中的信息隨便配置即可：

（3）將下載的swagger-ui中的dist文件夾拷貝到swagger下。
（4）安裝express，如果出錯可以去nodejs安裝目錄進行安裝

（5）在swagger中創建index.js文件，並填上如下內容：

var express = require('express');
var app = express();
app.use('/root', express.static('dist'));
app.get('/', function (req, res) {
  res.send('Hello World!');
});
 
 // 設置端口爲3000
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

（5）然後啓動，並進行運行，執行如下

（6）在瀏覽器中訪問http://localhost:3000/index.html 即可。
（7）在Swagger-UI中配置自己的文檔，可以在Swagger-Editer中將編輯好的API文檔生成json文件，然後將該json文件放到上述的Swagger-UI的dist文件夾中，然後打開index.html文件，修改路徑即可。


（8）重新啓動node服務即可，看到咱們配置的文檔內容。