swagger-ui生成api文檔並進行測試

1、Swagger UI簡介

Swagger UI是一個API在線文檔生成和測試的利器，目前發現最好用的。它的源碼也開源在GitHub上，地址：GitHub: https://github.com/swagger-api/swagger-ui

2、Swagger UI環境搭建

下載Swagger UI（也能夠直接下載 zip 文件）

git clone https://github.com/swagger-api/swagger-ui.git

解壓好的文件

 

主要用到的是dist目錄，能夠進入dist目錄打開index.html看下界面，能夠發現基本的模式是有了，但都是靜態的文件。下面咱們要進行nodejs配置，使其能夠進行端口訪問，直接使用node命令訪問index.js沒有反應，英語稍微好點的同窗能夠看下官網的配置步驟，接下來手動配置ui環境。

下面進行項目的配置

新建node_app文件夾

mkdir node_app

進入node_app目錄，初始化node

npm init

根據提示輸入好信息後會自動建立package.json文件，以下圖：

 

初始化命令npm init，出現以下信息，填的地方能夠隨便寫，也能夠不寫。

將下載的swagger-ui中的dist文件夾拷貝到node_app下。

安裝express

install express

建立index.js，並將以下代碼寫入該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!');

});

而後啓動，並運行查看，如上代碼爲3000端口，若有衝突請自行修改

 

node index.js

 

 

訪問

 

你可能會疑惑：這個Uber API怎麼來的呢？下面我再給您解釋下這個Uber API的來路，編輯index.html

文件你會發現有一段url引用了swagger官網的jsonApi文件

 

這裏咱們將這個json文件下載下來放到和index.html平級的目錄，這裏我直接訪問我已經安裝好的swagger-edtior進行文件的下載

 

而後存放到以下目錄，並修改index.html

 

把index.html裏的url換成swagger.json（注意這回寫的是相對路徑啦）

3、如何在tomcat裏運行？

把node_app文件夾（已共享到QQ羣文件：301343109）整個拷到tomcat的webapp目錄下，而後啓動tomcat，訪問http://localhost:8070/node_app/dist/index.html，注意8070是個人tomcat的端口，由於個人8080端口已經運行了Swagger Editor。

 

能夠看到和在express裏訪問的同樣。