Swagger 自定義UI界面

• Swagger簡單介紹
• 如何使用Swagger
• 添加自定義UI界面
• 使用swagger-ui-layer

Swagger ui 的原生UI界面如下：

　　

　　個人感覺原生UI顯示的有些不夠漂亮和清晰，特別是request 的model部分 
　　所以想重新設計一個更加友好美觀的UI界面。

最后的效果圖如下：

• 接口文檔信息界面

　　

 

• 接口文檔調試界面

　　

實現原理：

因為Swagger-ui讀取的數據來源於/v2/api-docs，並且返回的是json數據。 
所以只要自己寫一個頁面去解析json數據，並展現就可以實現自定義swagger的UI界面了

添加自定義UI界面

　　有兩種方式 
　　1.可以在項目的基礎上新增一個servlet ,指向對應的html文件  html文件里再去解析json，並渲染UI
       2.新建一個項目，用webjars將前端資源打成jar包，再供其他項目使用 項目結構如圖 
　　　　

主要文件是docs.html，此文件作用是解析json和渲染UI

通過ajax請求v2/api-docs,再解析json。

 　　

$.ajax({
    url : "v2/api-docs",
    //url : "http://petstore.swagger.io/v2/swagger.json",
    dataType : "json",
    type : "get",
    success : function(data) {
        //do something
       console.log(data);
    }
});