# # SwaggerBootstrapUi说明

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

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

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

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

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

    var SwaggerBootstrapUi=function () {
        //swagger请求api地址
        this.url="swagger-resources";
        //文档id
        this.docId="content";
        //tabid
        this.tabId="tabUl";
        this.tabContentId="tabContent";
        this.searchEleId="spanSearch";
        this.searchTxtEleId="searchTxt";
        this.menuId="menu";
        this.searchMenuId="searchMenu";
        //实例分组
        this.instances=new Array();
        //当前分组实例
        this.currentInstance=null;
        //动态tab
        this.globalTabId="sbu-dynamic-tab";
        this.globalTabs=new Array();
        this.tabsLiContent=null;
        this.tabsPostProcessors=null;
    }

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

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

    /***
         * swagger-bootstrap-ui的main方法,初始化文档所有功能,类似于SpringBoot的main方法
         */
    SwaggerBootstrapUi.prototype.main=function () {
        var that=this;
        that.initWindowWidthAndHeight();

        that.windowResize();
        //加载分组接口
        that.analysisGroup();
        //创建分组元素
        that.createGroupElement();
        //搜索
        that.searchEvents();

    }

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

被围观 人次