今日突然心血來潮，想看一下swagger這個東西是怎麼寫的，畢竟這個還是很有實用價值的，看著醒目，而且可以測試介面。

還沒來得及去研究做的每一步的原因，先把流程貼出來，以後真要用的話再好好研究。這次用windows環境搞的。

1.對於內容的編輯：安裝swagger-editor

a.下載並安裝nodejs.(暫時還不知道為啥，猜測一下應該相當於一個直譯器)

驗證安裝成功：cmd-->輸入：node -v -->返回nodejs的版本。 輸入：npm -v ，返回npm的版本。（npm是node的包管理器）

b.下載並安裝http-server，執行命令：npm install -g http-server    這是指安裝http-server伺服器，-g是指全域性安裝，在安裝nodejs時可指定全域性位置，具體可以去網上搜索看如何指定位置，不指定也沒影響，這裡不詳細說明。

c.下載editor檔案：

開啟swagger-editor官網，也可以在https://github.com/swagger-api/swagger-editor/releases/download/v2.10.4/swagger-editor.zip，直接下載。

d.執行及檢視效果：在cmd中定位到swagger-editor資料夾同級目錄後，輸入http-server -p 8080 swagger-editor，預設8080埠.可看到啟動成功的提示。

e.在瀏覽器中輸入地址，即可以進行檢視和編輯，在編輯之後，有匯出yaml,json等多種用於編輯的功能。

--------------------------------------------------------------

2.對於內容的檢視：安裝swagger-ui

a.下載swagger-ui檔案，可以在https://github.com/swagger-api/swagger-ui 下載zip檔案，然後解壓，將dist資料夾拷出，看到其index.html就是我們要的樣式，只是內容不是我們自己的，並且不是通過http訪問，後面就解決這兩個問題。

b.隨便建個資料夾，比如 aaa，把它初始化為node方式：

通過cmd到其aaa資料夾裡，然後執行 npm init，讓輸入name之類的地方都可以直接回車。完成之後aaa裡會多出一個package.json的檔案。

c.將dist資料夾拷到aaa資料夾中。

d.安裝express，執行 npm install express，看到安裝完成。(不知道這是幹啥的)

e.在aaa資料夾中建立index.js，內容如下：

var express = require('express');  

var app = express();  
app.use('/', express.static('dist'));    //此處有url路徑，如果寫/test，則瀏覽器訪問時，也需要port:/test/
app.get('/', function (req, res) {  
  res.send('Hello World!');  
});  
  
app.listen(3000, function () {      //3000 埠，可修改
  console.log('Example app listening on port 3000!');  
}); 

f.測試。

執行：node index.js 

g：自定義。

通過以上幾步，已經完成了index.html通過http的訪問，且樣式也是swagger的樣式了。

但是，我們還有最後一步，就是要把內容換成我們自己的。

所以其實目前在頁面上看到的內容，都來自於這個swagger，如果想換呢，就把這個檔案替換路徑即可。

怎麼找到其他可用的swagger的json呢，想到了之前在測試swagger-editor時的頁面，直接file-->download json，就得到了它的swagger.json檔案

然後可以把這個檔案放在aaa/dist這個資料夾下面，同時把url修改為：url: "/swagger.json"

h：重新整理：大功告成。

總結一下：其實主要是把swagger-ui的index.html，通過配置可以實現在瀏覽器中訪問。然後再把內容用editor編輯好即可。

在editor中，會有host,basepath等變數，用於指示swagger在try it out的時候，向哪裡發訊息。

例如：修改為 host: 10.9.102.133:8061