有了以上Springfox-Swagger的两个接口，就可以根据这2个接口来生成页面了，这里有一个前提，为什么可以根据这个来生成，因为Springfox-Swagger给出的两个接口地址是固定的，所以写这套UI也能得到通用.

    swagger-bootstrap-ui主要使用到的前端技术栈主要包括：

    属性 说明
    jquery http://jquery.com/
    bootstrap http://getbootstrap.com
    layer http://layer.layui.com/
    jsonviews https://github.com/yesmeck/jquery-jsonview
    clipboard https://github.com/zenorocha/clipboard.js
    axios.min.js https://github.com/axios/axios
    marked https://github.com/markedjs/marked
    art-template https://github.com/aui/art-template

    这里主要说一些swagger-bootstrap-ui的一些思路，源码的话大家可以去码云或者GitHub上去看

    1、构建SwaggerBootstrapUi主对象，类似Java后端面向对象的方式来写，定义一些基础属性,这样也方便后期扩展

    1. var SwaggerBootstrapUi=function () {
    2.     //swagger请求api地址
    3.     this.url="swagger-resources";
    4.     //文档id
    5.     this.docId="content";
    6.     //tabid
    7.     this.tabId="tabUl";
    8.     this.tabContentId="tabContent";
    9.     this.searchEleId="spanSearch";
    10.     this.searchTxtEleId="searchTxt";
    11.     this.menuId="menu";
    12.     this.searchMenuId="searchMenu";
    13.     //实例分组
    14.     this.instances=new Array();
    15.     //当前分组实例
    16.     this.currentInstance=null;
    17.     //动态tab
    18.     this.globalTabId="sbu-dynamic-tab";
    19.     this.globalTabs=new Array();
    20.     this.tabsLiContent=null;
    21.     this.tabsPostProcessors=null;
    22. }

    包括swagger的响应的属性，也重新在js中定义函数，使用面向对象的方式来操作

    SwaggerBootstrapUi说明 - 图1

    2、初始化工作，sbu的入口即main方法,类似于SpringBoot的main方法，读源码的朋友可以从这个方法进入

    1. /***
    2.      * swagger-bootstrap-ui的main方法,初始化文档所有功能,类似于SpringBoot的main方法
    3.      */
    4. SwaggerBootstrapUi.prototype.main=function () {
    5.     var that=this;
    6.     that.initWindowWidthAndHeight();
    8.     that.windowResize();
    9.     //加载分组接口
    10.     that.analysisGroup();
    11.     //创建分组元素
    12.     that.createGroupElement();
    13.     //搜索
    14.     that.searchEvents();
    16. }

    3、数据和页面分离，使用art-template模板渲染,这样保持js的独立性