swagger ui_swagger ui使用教程 - CSDN
精华内容
参与话题
  • Swagger UI 详细讲解

    万次阅读 2019-01-23 13:50:09
    本文章描述的是Swagger3.0的内容,与Swagger2.0内容有较大差别。接口描述在3.0中通过Swagger规范(一个JSON文件)来描述,Swagger2.0是通过在接口中提供一系列注解来描述的。   1.集成Swagger   Swagger提供...

    本文章描述的是Swagger3.0的内容,与Swagger2.0内容有较大差别。接口描述在3.0中通过Swagger规范(一个JSON文件)来描述,Swagger2.0是通过在接口中提供一系列注解来描述的。

     

    1.集成Swagger 

          Swagger提供了一组静态页面,可以在SpringBoot应用中集成这些静态页面,直接访问静态页面,并打开指定的Swagger规范,就可以显示RESTFul接口:

    • 进入Swagger官网,选择Swagger UI,点击下载。
    • 页面会跳转到GitHub
    • 在GitHub中,选择一个最新的版本下载,目前最新的是Swagger UI 3.20.5.
    • 下载解压后,找到dist目录,将目录里面所有的文件复制到新的SpringBoot项目中src\main\resources\static\swagger3\目录下面。
    • 访问http://localhost:8080/swagger3/index.html,会出现如下界面。

      该页面加载的时候,会自动打开一个swagger接口规范文档,如上图输入框中所示:https://petstore.swagger.io/v2/swagger.json

      打开后的页面分为两部分,第一部分为接口的基本信息,包含了项目名称,描述等信息;第二部分包含了每个接口的具体描述,如接口名字,参数名字,参数类型,是否必填等,还有返回的结果的示例。

    注意:默认提供的Petstore接口调用并不能成功,因为这涉及跨域问题,在localhost环境下发起对petstore.swagger.io的AJAX调用会导致失败。

    2.Swagger规范

        swagger规范是一个JSON格式的文件,包含项目基本信息及具体接口描述信息,可以在swagger3下创建一个sample.json文件,我们将逐渐完善。

    {
      "swagger":"2.0",
      "info":{
        "description":"这是一个项目简单实例",
        "version":"1.0",
        "tirle":"系统接口",
      },
      "basePath":"/api/v1",
      "consumes":[
        "application/x-www-form-urlencode"
      ]
    }
    • 属性swagger总是规范的第一个属性,固定为2.0,指的是Swagger规范2.0。
    • info描述了一个项目的基本信息。
    • basePath:指的是RESRFul接口的实际地址,以上是/api/v1,则REST接口的地址则是127.0.0.1:8080/api/v1。
    • consumes:指提交的内容是表单。

    重新访问网址http://localhost:8080/swagger3/index.html,并且在页面填写规范地址:

    http://localhost:8080/swagger3/sample.json

    点击Explore按钮,页面刷新后,如下所示:

    3.接口描述

     

    "paths":{
         "/order/{orderId}":{
           "get":{
             "summary":"获取订单详细信息",
             "description":"传入订单编号,获取订单信息",
             "parameters":[
               {
                 "name":"orderId",
                 "in":"path",
                 "description":"订单Id",
                 "required":true
               }
             ],
             "responses":{
               "200":{
                 "description":"获取用户信息成功"
               }
             }
           }
         }
      }

    每个接口包含了以下信息:

    • summary:接口主要功能的简要描述
    • description:接口详细描述
    • parameters:接口的参数,REST参数在Swagger中分为四个类型,以上实例的参数类型是path,也就是参数是从path中获取的,其他的还有body,parameter等。
    • response:对应了HTTP status的提示信息,这里描述了成功的提示信息。

    4.查询参数描述

     

            "parameters":[
              {
                "name":"offset",
                "in":"query",
                "description":"查询起始位置",
                "required":true
              }
            ]
    https://localhost:8080/api/v1/order?offset=12

    5.HTTP头参数

            "parameters":[
              {
                "name":"X-Request-ID",
                "in":"header",
                "description":"",
              }
            ]

    6.表单参数

    使用application/x-www-form-urlencoded提交的参数,in的值使用formData。

            "parameters":[
              {
                "name":"orderName",
                "in":"formData",
                "description":"",
                "required":true
              }
            ]

    7.文件上传参数 

            "parameters":[
              {
                "name":"orderName",
                "in":"formData",
                "description":"",
                "type":"file"
              }
            ]

    8.整个请求体作为参数

        "/order":{
          "post":{
            "summary":"创建订单",
            "description":"创建一个新订单",
            "parameters":[
              {
                "name":"order",
                "in":"body",
                "description":"包含订单信息的JSON",
                "required":true,
                "schema":{
                  "$ref":"#/definitions/order"
                }
              }
            ],
            "responses":{
              "200":{
                "description":"创建订单成功"
              }
            }
          }
        }
      "definitions":{
        "order":{
          "type":"object",
          "properties":{
            "id":{
              "type":"string"
            },
            "name":{
              "type":"string"
            }
          }
        }
      }

     

     

    未完待续...

     

    展开全文
  • 接口文档-swagger2UI

    2019-06-16 17:10:04
    2019独角兽企业重金招聘Python工程师标准>>> ...

    主要说明 Spring Boot 项目的集成

     

    0、其他更多信息参考

    https://swagger.io/tools/swagger-ui/

     

    1、引入依赖

    <dependency>
        <groupId>io.springfox</groupId>
        <artifactId>springfox-swagger2</artifactId>
        <version>2.9.2</version>
    </dependency>
    
    <dependency>
        <groupId>io.springfox</groupId>
        <artifactId>springfox-swagger-ui</artifactId>
        <version>2.9.2</version>
    </dependency>

     

    2、添加2个配置类

    package com.moon.coupon.service.swagger.swagger2;
    
    import com.google.common.base.Predicate;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.bind.annotation.RequestMethod;
    import springfox.documentation.RequestHandler;
    import springfox.documentation.builders.ApiInfoBuilder;
    import springfox.documentation.builders.PathSelectors;
    import springfox.documentation.builders.RequestHandlerSelectors;
    import springfox.documentation.builders.ResponseMessageBuilder;
    import springfox.documentation.service.ApiInfo;
    import springfox.documentation.service.ResponseMessage;
    import springfox.documentation.spi.DocumentationType;
    import springfox.documentation.spring.web.plugins.Docket;
    import springfox.documentation.swagger2.annotations.EnableSwagger2;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Set;
    
    
    @Configuration
    @EnableSwagger2
    public class Swagger2 {
    
        private ApiInfo apiInfo() {
            return new ApiInfoBuilder()
                    .title("奖励券系统 接口清单")
                    .description("红包加息券拆分")
                    .termsOfServiceUrl("https://localhost:8081/")
                    .version("1.0.0")
                    .build();
        }
    
    
        @Bean
        public Docket createRestApi() {
            //可以控制 哪些符合条件的 接口 对外暴露文档;
            Predicate<RequestHandler> predicate = (input) -> {
                Set<String> patterns = input.getRequestMapping().getPatternsCondition().getPatterns();
                for (String cur : patterns) {
                    if (cur.startsWith("/api")) return true;
                }
                return false;
            };
    
            ResponseMessage responseMesssageSucc = new ResponseMessageBuilder()
                    .code(0)
                    .message("处理成功")
                    .build();
            ResponseMessage responseMesssageFail = new ResponseMessageBuilder()
                    .code(-1)
                    .message("处理失败")
                    .build();
            List<ResponseMessage> list = new ArrayList();
            list.add(responseMesssageSucc);
            list.add(responseMesssageFail);
    
            return new Docket(DocumentationType.SWAGGER_2)
                    .useDefaultResponseMessages(false)
                    .globalResponseMessage(RequestMethod.POST, list)
                    .apiInfo(apiInfo())
                    .select()
                    .apis(predicate)
                    .apis(RequestHandlerSelectors.basePackage("com.moon.coupon.service.controller"))
                    .paths(PathSelectors.any())
                    .build();
        }
    
    }

     

    package com.moon.coupon.service.swagger.swagger2;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
    
    @Configuration
    public class Swagger2MvcConfig extends WebMvcConfigurationSupport {
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
            registry.addResourceHandler("/public/**").addResourceLocations("classpath:/public/");
            registry.addResourceHandler("swagger-ui.html").addResourceLocations(
                    "classpath:/META-INF/resources/");
            registry.addResourceHandler("/webjars/**").addResourceLocations(
                    "classpath:/META-INF/resources/webjars/");
        }
    }

     

     

    3、访问地址

    http://${host}:${port}/swagger-ui.html

     

    4、大概模样

    image2019-5-6%2011%3A8%3A19.png?version=1&modificationDate=1557112099000&api=v2

     

     

     

    转载于:https://my.oschina.net/u/3777515/blog/3045769

    展开全文
  • 最近用springboot搭建一个配置系统,使用swagger,但是启动访问页面发现以下问题。 研究发现少了以下配置,这两行很重要: 全部代码如下: @Configuration @EnableSwagger2 public class Swagger2 { @...

    最近用springboot搭建一个配置系统,使用swagger,但是启动访问页面发现以下问题。

     

    研究发现少了以下配置,这两行很重要:

    全部代码如下:

    @Configuration
    @EnableSwagger2
    public class Swagger2 {
    
        @Bean
        public Docket createRestApi() {
            return new Docket(DocumentationType.SWAGGER_2)
                    .apiInfo(apiInfo())
                    .select()
                    .apis(RequestHandlerSelectors.basePackage("com.config"))
                    .paths(PathSelectors.any())
                    .build();
        }
    
        private ApiInfo apiInfo() {
            return new ApiInfoBuilder()
                    .title("配置系统API")
                    .version("1.0")
                    .description("钟渊-2019-6-15")
                    .build();
        }
    }

    再次启动正常:

     

    展开全文
  • 最新swagger ui样式使用指南

    千次阅读 2018-12-15 14:50:12
    1.swagger接口文档自动化生成,方便调试,运行路径http://localhost:9700/doc.html 主机+端口号+doc.html ,老版本主机+端口号+swagger-ui.html ,运行效果如: 2.如何配置运用 a.pom.xml文件添加 &lt;...

    1.swagger接口文档自动化生成,方便调试,运行路径http://localhost:9700/doc.html  主机+端口号+doc.html  ,老版本主机+端口号+swagger-ui.html  ,运行效果如:效果图

    2.如何配置运用
    a.pom.xml文件添加

     <dependency>
                <groupId>io.springfox</groupId>
                <artifactId>springfox-swagger2</artifactId>
                <version>2.9.2</version>
            </dependency>
    
            <dependency>
                <groupId>io.springfox</groupId>
                <artifactId>springfox-swagger-ui</artifactId>
                <version>2.9.2</version>
            </dependency>
    
            <dependency>
                <groupId>com.github.xiaoymin</groupId>
                <artifactId>swagger-bootstrap-ui</artifactId>
                <version>1.8.7</version>
            </dependency>

     b.  SwaggerConfig配置类
     

    @Configuration
    @EnableSwagger2
    public class SwaggerConfig {
    
        @Bean
        public Docket createRestApi() {
            return new Docket(DocumentationType.SWAGGER_2)
                    .apiInfo(apiInfo())
                    .select()
                    .apis(RequestHandlerSelectors.withClassAnnotation(Api.class))
                    //.apis(RequestHandlerSelectors.basePackage("com.example.controller"))
                    .paths(PathSelectors.any())
                    .build();
        }
    
        private ApiInfo apiInfo() {
            return new ApiInfoBuilder()
                    .title("小程序服务端API接口文档")
                    .description("小程序服务端")
                    .version("1.0.1")
                    .build();
        }
    
    }

    c.Application注解配置启动

    @SpringBootApplication
    @EnableScheduling
    @EnableBaseCore
    //@EnableSimpleVerification
    @EnableSwagger2
    public class DrawApplication extends SpringBootServletInitializer {
    
        public static void main(String[] args) {
            SpringApplication.run(DrawApplication.class, args);
        }
    
        @Override
        protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
            return application.sources(DrawApplication.class);
        }
    }

    d.常用注解说明

    @Api:放在类的控制模块
    @ApiOperation:放在接口方法上
    @ApiImplicitParams:方法上一组参数说明
    @ApiImplicitParam:一个参数的说明
    @ApiResponses:一组响应说明
    @ApiResponse:用在@ApiResponses中,一般用于表达一个错误的响应信息
    @ApiModel:请求体和返回体说明
    @ApiModelProperty:请求体属性说明
    

    e.代码块演示:

    控制模块

    @RequestMapping("api/random")
    @RestController
    @Api(value = "api/random", tags = {"抽奖模块"}, description = "随机的控制层")
    public class RandomController extends BaseController {
    
        @Resource
        private RandomService randomService;
    
    
        /**
         * 随机抽奖
         *
         * @param data
         * @param check
         * @return
         */
        @ResponseBody
        @RequestMapping(value = "/lucky", method = RequestMethod.POST)
        @SignVerification
        @ApiOperation(value = "抽奖", notes = "根据用户id,随机产生了一个类型")
        public ApiResponse lucky(@RequestBody @Validated ApiRequest<LuckyReq> data, BindingResult check) {
            super.checkParameters(check);
            ApiResponse result = ApiResponse.buildSuccess();
            LuckyResp luck = this.randomService.luck(data.getData());
            result.put("data", luck);
            return result;
        }
    
        /**
         * 随机抽奖2
         */
        @ResponseBody
        @RequestMapping(value = "/lucky2", method = RequestMethod.POST)
        @SignVerification
        @ApiOperation(value = "抽奖2", notes = "根据用户id,随机产生了一个类型")
        @ApiImplicitParam(paramType = "query", name = "userId", value = "用户ID", required = true, dataType = "String")
        public LuckyResp lucky2(@RequestParam(value = "userId") String userId) {
            LuckyResp luck = this.randomService.luck2(userId);
            return luck;
        }
    
        /**
         * 随机抽奖4
         */
        @ResponseBody
        @RequestMapping(value = "/lucky4", method = RequestMethod.POST)
        @SignVerification
        @ApiOperation(value = "抽奖4", notes = "根据用户id,随机产生了一个类型")
        @ApiImplicitParams({
                @ApiImplicitParam(paramType = "query", name = "userId", value = "用户ID", required = true, dataType = "String"),
                @ApiImplicitParam(paramType = "query", name = "type", value = "类型", required = true, dataType = "int")
        })
        public LuckyResp lucky4(@RequestParam(value = "userId") String userId,
                                @RequestParam(value = "type")  int type) {
            LuckyResp luck = this.randomService.luck4(userId,type);
            return luck;
        }
    
    
        /**
         * 随机抽奖3
         */
        @ResponseBody
        @RequestMapping(value = "/lucky3", method = RequestMethod.POST)
        @SignVerification
        @ApiOperation(value = "抽奖3", notes = "根据用户id,随机产生了一个类型")
        public LuckyResp lucky3(@RequestBody LuckyReq data) {
            LuckyResp luck = this.randomService.luck(data);
            return luck;
        }
    
        /**
         * 打开抽奖 抽话费
         *
         * @param data
         * @param check
         * @return
         */
        @RequestMapping(value = "/open", method = RequestMethod.POST)
        @SignVerification
        @ApiOperation(value = "开奖", notes = "----")
        public ApiResponse open(@RequestBody @Validated ApiRequest<OpenReq> data, BindingResult check) {
            checkParameters(check);
            ApiResponse result = ApiResponse.buildSuccess();
            OpenResp luck = this.randomService.open(data.getData());
            result.put("data", luck);
            return result;
        }
    
        /**
         * banner图随机跳转一个游戏
         *
         * @return
         */
        @RequestMapping(value = "/game", method = RequestMethod.GET)
        @ApiOperation(value = "随机游戏", notes = "-----")
        public ApiResponse game() {
            ApiResponse result = ApiResponse.buildSuccess();
            Game game = this.randomService.game();
            result.put("data", game);
            return result;
        }
    
        /**
         * 随机产生一个商品
         *
         * @return
         */
        @RequestMapping(value = "/good", method = RequestMethod.GET)
        @ApiOperation(value = "随机商品", notes = "----")
        public ApiResponse good() {
            ApiResponse result = ApiResponse.buildSuccess();
            Goods good = this.randomService.good();
            result.put("data", good);
            return result;
        }

    请求模块
     

    @Data
    @ApiModel(value = "抽奖请求体")
    public class LuckyReq {
        @NotEmpty(message = "用户id不能为空")
        @ApiModelProperty(value = "用户ID",required = true)
        private String userId;
    }

    响应模块

    @Data
    @ApiModel(value = "开奖返回值")
    public class LuckyResp {
        /**
         * 抽奖类型
         */
        @ApiModelProperty(value = "抽奖类型")
        private Integer type;
        /**
         * 抽奖存入的id
         */
        @ApiModelProperty(value = "抽奖记录id")
        private Integer id;
    
        /**
         * 抽到钻石数量
         */
        @ApiModelProperty(value = "抽奖的钻石数量,没有返回null")
        private Integer diamondNum;
    }

    f:执行效果
    执行效果

    展开全文
  • swagger-ui.html页面无法打开解决方案

    万次阅读 2020-02-11 12:11:26
    最近项目集成swagger2,结果本地swagger-ui.html可以打开,但是线上环境却无法打开。倒腾了一番终于解决问题,总结了以下几个解决方案: 1.@EnableWebMvc注解必须去掉! 2.请实现WebMvcConfigurer,并添加如下代码...
  • Swagger UI安装与使用教程

    万次阅读 2018-01-06 22:43:40
    前言 查看这文章前,请先阅读Swagger Edit 安装和使用教程。...Swagger UI是通过读取Swagger Edit的导出的YAML/JSON文件,来进行接口测试。下图就是Swagger UI的界面: ps:Swgger UI的站点域名要和发送请求的域
  • Swagger 自定义UI界面 Swagger简单介绍 如何使用Swagger 添加自定义UI界面 使用swagger-ui-layer Swagger简单介绍 Swagger是一个Restful风格接口的文档在线自动生成和测试的框架  官网:http://swagger.io  官方...
  • Swagger 自定义UI界面

    万次阅读 热门讨论 2018-07-23 14:29:05
    Swagger 自定义UI界面 Swagger简单介绍 如何使用Swagger 添加自定义UI界面 使用swagger-ui-layer
  • 手把手带你入门之Swagger UI

    千次阅读 2017-02-23 11:03:20
    关于Swagger UI,从官网找来一段介绍。 简单的来讲, Swagger UI就是API文档生成和测试利器。 Swagger UI is a dependency-freecollection of HTML, JavaScript, and CSS assets that dynamically ...
  • swagger-bootstrap-uiSwagger的前端UI实现,目的是替换Swagger默认的UI实现Swagger-UI,使文档更友好一点儿.... swagger-bootstrap-ui 只是SwaggerUI实现,并不是替换Swagger功能,所以后端模...
  • swaggerUI页面没有显示api

    万次阅读 2017-09-01 19:32:11
    如图,没有api:原因:basePackage写错修改错误代码:再次运行成功
  • Swagger配置文件,pom依赖,注解都配置完成后,访问http://localhost:8080/项目名/swagger-ui.html之后,只能出现页面头,无法加载出info信息和api信息。 如下: 后查看页面显示,找不到相关js。 解决方法: ...
  • swagger-resources/configuration/ui 404

    万次阅读 2019-04-17 16:38:59
    前言:我的项目是基于ssm的 ...首先在External Libraries中查看springfox-swagger2和springfox-swagger-ui版本号是否一致,如果不是一致的就改成一致的。 解决办法二 在web.xml中查看url-pattern是否是这样的<...
  • 文档:SpringMVC集成SwaggerUI修改访问路径 链接:http://note.youdao.com/noteshare?id=752e0c4aa08400155a885965d05dd78b&sub=7842F4CB0FF142069D2101920134586A 需求 springmvc 加入 swagger 依赖: //接...
  • SpringBoot集成Swagger2遇到异常:请求不到swagger-ui.html

    万次阅读 热门讨论 2019-04-12 16:45:29
    我们在使用SpringBoot集成Swagger2中,访问:http://localhost/swagger-ui.html 出现问题,页面显示默认报错页面。后台报错: No mapping found for HTTP request with URI [/swagger-ui.html] in DispatcherServlet...
  • Spring 拦截器拦截了swagger-ui处理方法

    千次阅读 2018-12-12 16:50:44
    Spring 拦截器拦截了swagger-ui处理方法 我们F12查看swagger-ui资源有这些: 得到他们对应的url 我们在拦截器的配置文件里面设置: &lt;mvc:exclude-mapping path="/swagger-resources/**"/&gt;&...
  • swagger默认访问地址

    万次阅读 2019-12-05 09:24:17
    boot工程格式如下 http://10.166.10.169:8085/swagger-ui.html 非boot工程加个自己项目名 http://10.166.10.169:8085/xxx/swagger-ui.html
  • SpringBoot中集成了swagger后无法访问http://localhost:8080/swagger-ui.html 接上文SpringBoot集成swagger生成在线接口文档 点击查看上文添加链接描述 在启动类同级添加WebMvcConfig配置类 WebMvcConfig...
  • swagger-ui中的中文乱码

    万次阅读 2018-08-14 11:46:27
    早上发现,swagger-ui.html的中文标题发生乱码, 然后首先尝试了改动编译器的FileEncoding为UTF-8,但是没有解决,然后打开页面源码发现也是UTF-8,后来把application-properties中的中文删掉,然后重写,问题完美...
  • swagger环境的搭建(swagger-editor|swagger-ui

    万次阅读 热门讨论 2017-07-09 10:28:24
    swagger环境的搭建swagger-editor、swagger-ui
1 2 3 4 5 ... 20
收藏数 18,344
精华内容 7,337
关键字:

swagger ui