swagger-bootstrap-ui
With the above two interfaces of Springfox-Swagger, you can generate pages based on these two interfaces. There is a premise here, why can it be generated based on this, because the two interface addresses given by Springfox-Swagger are fixed. So writing this UI can also get generic.
The front-end technology stack used by swagger-bootstrap-ui mainly includes：
| attr | intro |
|---|---|
| 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 |
Here mainly talk about some ideas of swagger-bootstrap-ui, source code, then you can go to the Gitee or GitHub to see
1、Build the SwaggerBootstrapUi main object, similar to the Java backend object-oriented way to write, define some basic properties, which is also convenient for later extension
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;
}
Include the properties of the swagger's response, and also re-define the function in js, using an object-oriented approach
2、Initialization work, the main method of the sbu is the main method, similar to the main method of SpringBoot, the source code reader can enter from this method
/***
* swagger-bootstrap-ui的main方法,初始化文档所有功能,类似于SpringBoot的main方法
*/
SwaggerBootstrapUi.prototype.main=function () {
var that=this;
that.initWindowWidthAndHeight();
that.windowResize();
//加载分组接口
that.analysisGroup();
//创建分组元素
that.createGroupElement();
//搜索
that.searchEvents();
}
3、Data and page separation, rendered using art-template templates, thus maintaining js independence