Swagger使用学习

一、什么是Swagger?

最流行的API框架,是一款RestFul风格 API文档的在线自动生成工具,能使得API文档和API定义同步更新。

讲得简单些,现在是前后端分离时代,前端可以不再依赖后端就能直接运行,而实现前后端交互的过程就是后端在控制层提供一个个API接口,前端通过这些API接口来获取对应的Json数据。现在面临一个问题,如果前端需求发生变化,比如数据表要添加一个字段,前端是很容易做到的,可后端修改起来却很麻烦,尤其是当需求不断变化,而前后端又不能及时沟通,就会使得项目开发延期。而Swagger就是用来解决这个问题的,它能让前端团队及时知道后端的API有哪些变化,从而及时进行修改调整。

二、如何使用Swagger?

这里简单介绍一下在Spring Boot 里使用Swagger的步骤

1、新建一个Spring Boot-web工程,导入Swagger依赖

        <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、编写一个Hello工程,创建一个配置类来配置Swagger ,具体配置内容后面在说

@Configuration
@EnableSwagger2  //开启swagger2
public class SwaggerConfig {
}

3、在浏览器里输入以下URL来测试网站是否成功集成了Swagger:http://localhost:8080/swagger-ui.html

4、在之前创建的配置类里配置Swagger

配置Swagger扫描的对象:

    //配置了swagger的Docket的bean实例
    @Bean
    public Docket docket(){
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())//swagger基本信息(标题、介绍、联系URL...),默认使用自定义的,也可以自己新建apiInfo()
                .groupName("xlyoung")//配置API的分组,默认为default
                .enable(false) //enable是否启用默认为true,swagger如果为false,则Swagger不能在浏览器中访问
                .select()
                //RequestHandlerSelectors,配置要扫描接口的方式
                //-->basePackage,指定要扫描的包
                //-->any(),扫描全面
                //-->none(),都不扫描
                //-->withClassAnnotation,扫描类上的注解
                //-->withMethodAnnotation,扫描方法上的注解
                .apis(RequestHandlerSelectors.basePackage("com.zzq.swagger.controller"))
                //paths过滤什么路径
                .paths(PathSelectors.ant("/zzq/**"))
                .build();
    }


    //如何去配置多个分组,只需要配置多个Docket实例就行
    @Bean
    public Docket docket1(){
        return new Docket(DocumentationType.SWAGGER_2).groupName("A");
    }
    @Bean
    public Docket docket2(){
        return new Docket(DocumentationType.SWAGGER_2).groupName("B");
    }
    @Bean
    public Docket docket3(){
        return new Docket(DocumentationType.SWAGGER_2).groupName("C");
    }

5、我们可以在实体类上加一些注释的注解,方便对生成的API文档进行说明和理解

@ApiModel("用户实体类")//该注解用来给类注释,方便用户理解,不加它swagger也会获取到该对象
public class User {
    @ApiModelProperty("姓名")//该注解用来给属性注释,方便用户理解,不加它swagger也会获取到该对象
    private String name;
    @ApiModelProperty("密码")
    private String password;

    //get/set/构造方法省略
}

同样的,我们也可以在控制层里的方法上加上相关注解来为其做注释:

@ApiOperation("保存用户")//注意只能在方法上加这个注解,而不能在类上加
@PostMapping("/saveUser")
public String saveUser(@ApiParam("用户") @RequestBody User user){
    return "保存成功!姓名:"+user.getName()+",密码:"+user.getPassword();
}

三、Swagger的测试功能

可以在 http://localhost:8080/swagger-ui.html 页面里对各个API进行在线测试

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端可以通过以下步骤连接后端的Swagger: 1. 在后端使用Swagger工具生成API文档和API定义文件。 2. 将API定义文件提供给前端开发人员使用。 3. 在前端项目中安装Swagger UI组件。可以使用npm或者直接下载Swagger UI的源代码。 4. 在前端项目中使用Swagger UI组件来加载API文档和API定义文件。可以通过以下代码来加载API文档: ```javascript const ui = SwaggerUIBundle({ url: "/path/to/swagger.json", dom_id: "#swagger-ui", presets: [ SwaggerUIBundle.presets.apis, SwaggerUIBundle.SwaggerUIStandalonePreset ], layout: "BaseLayout" }) ``` 其中,`url`参数为API定义文件的路径,`dom_id`参数为Swagger UI组件的容器,`presets`参数用于指定预设配置,`layout`参数用于指定Swagger UI的布局。 5. 在前端项目中使用Swagger Codegen工具来自动生成API客户端代码。可以通过以下步骤来生成API客户端代码: - 安装Swagger Codegen工具。可以使用npm或者直接下载Swagger Codegen的源代码。 - 运行Swagger Codegen工具,指定API定义文件和生成代码的语言,例如: ``` java -jar swagger-codegen-cli.jar generate -i /path/to/swagger.json -l javascript -o /path/to/client ``` 其中,`-i`参数为API定义文件的路径,`-l`参数为生成代码的语言,`-o`参数为生成代码的输出目录。 6. 在前端项目中使用生成的API客户端代码来调用后端API。可以通过以下代码来调用API: ```javascript const api = new MyAPI() api.getSomeData().then(data => { console.log(data) }).catch(error => { console.error(error) }) ``` 其中,`MyAPI`为生成的API客户端代码的类名,`getSomeData`为后端API的方法名。 总之,前端可以通过Swagger UI和Swagger Codegen来连接后端的Swagger,从而简化API的使用和测试过程,提高开发效率和代码质量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值