个人中心
gpt4 book ai didi

【Swagger 教程】27、SwaggerBootstrapUi说明

转载 作者：大佬之路 更新时间：2024-01-21 22:38:43 25 4
gpt4 key购买 nike

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

属性 说明
jquery <http://getbootstrap.com
layer <” rel=”nofollow”>https://github.com/yesmeck/jquery-jsonview>;
clipboard <” rel=”nofollow”>https://github.com/axios/axios>;
marked <” rel=”nofollow”>https://github.com/aui/art-template>;

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

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的独立性；

25 4 0
文章推荐： 【Swagger 教程】09、全局参数
文章推荐： 【Swagger 教程】35、Springfox-Swagger升级到2.9.2导致的NoSuchMethodError异常
文章推荐： 【Swagger 教程】20、文件上传
文章推荐： 【Swagger 教程】12、个性化设置
大佬之路
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com