SwaggerBootstrapUi說明

2019-05-30 20:55 更新

有了以上Springfox-Swagger的兩個(gè)接口,就可以根據(jù)這2個(gè)接口來生成頁面了,這里有一個(gè)前提,為什么可以根據(jù)這個(gè)來生成,因?yàn)镾pringfox-Swagger給出的兩個(gè)接口地址是固定的,所以寫這套UI也能得到通用.

swagger-bootstrap-ui主要使用到的前端技術(shù)棧主要包括:

屬性 說明
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、構(gòu)建SwaggerBootstrapUi主對(duì)象,類似Java后端面向?qū)ο蟮姆绞絹韺懀x一些基礎(chǔ)屬性,這樣也方便后期擴(kuò)展

var SwaggerBootstrapUi=function () {
    //swagger請(qǐng)求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";
    //實(shí)例分組
    this.instances=new Array();
    //當(dāng)前分組實(shí)例
    this.currentInstance=null;
    //動(dòng)態(tài)tab
    this.globalTabId="sbu-dynamic-tab";
    this.globalTabs=new Array();
    this.tabsLiContent=null;
    this.tabsPostProcessors=null;
}

包括swagger的響應(yīng)的屬性,也重新在js中定義函數(shù),使用面向?qū)ο蟮姆绞絹聿僮?/p>

2、初始化工作,sbu的入口即main方法,類似于SpringBoot的main方法,讀源碼的朋友可以從這個(gè)方法進(jìn)入

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


    that.windowResize();
    //加載分組接口
    that.analysisGroup();
    //創(chuàng)建分組元素
    that.createGroupElement();
    //搜索
    that.searchEvents();


}

3、數(shù)據(jù)和頁面分離,使用art-template模板渲染,這樣保持js的獨(dú)立性

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)