springboot整合swagger2+跨域问题

前言

本篇文章主要介绍的是springboot整合swagger2。
swagger2是一个规范和完整的框架,用于生成、描述、调用和可视化Restful风格的web服务,这里介绍两种方式实现,第一种是在yml中添加配置,第二种是添加配置类。

GitHub源码链接位于文章底部。

工程结构

首先来看一下工程结构


image

引入依赖

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.3.RELEASE</version>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
        <!-- swagger Restful API -->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.2.2</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.2.2</version>
        </dependency>
    </dependencies>

swagger Restful API的两个依赖可以由下面这个依赖代替,使用这两种依赖的swagger-ui界面会有一些不同,但使用方法是一样的,此外,类上的Api注解中的值,上面这种为value,下面这种为tags:

        <dependency>
            <groupId>com.spring4all</groupId>
            <artifactId>swagger-spring-boot-starter</artifactId>
            <version>1.7.0.RELEASE</version>
        </dependency>

第一种方式:在yml中添加swagger中配置,然后在启动类上添加EnableSwagger2Doc注解

这种方式只能使用swagger-spring-boot-starter依赖,因为只有它才有EnableSwagger2Doc注解。

####swagger相关配置
swagger:
  base-package: com.lxg.controller
  title: Spring Boot中使用Swagger2构建RESTful APIs
  description: swagger2-文档构建利器
  version: 1.7
  terms-of-service-url: www.lxgblog.com
  contact:
    name: LXG
    email: 15279295097@163.com

第二种方式:定义swagger配置类

springboot使用Swagger很简单,只需要使用Configuration注解配合Bean注解将一些配置注入到spring容器,比如编辑Swagger UI界面的信息,指定Swagger负责扫描的package等等,然后在该配置类上添加EnableSwagger2注解开启即可。

@Configuration
@EnableSwagger2
public class Swagger2Config {
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2)
                .apiInfo(apiInfo())
                .select()
                //定义扫描接口的包
                .apis(RequestHandlerSelectors.basePackage("com.lxg.controller"))
                .paths(PathSelectors.any())
                .build();
    }

    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                //定义界面标题
                .title("Spring Boot中使用Swagger2构建RESTful APIs")
                //定义界面描述
                .description("swagger2-文档构建利器")
                .termsOfServiceUrl("https://www.lxgblog.com/")
                //作者
                .contact("李先国")
                //版本
                .version("1.0")
                .build();
    }
}

因为这里只做测试用,所以就不连接数据库,写到控制层即可。

实体类

@Data
public class User {
    private Long id;
    /** 姓名 */
    private String name;

    /** 年龄 */
    private Integer age;

    public User() {
    }

    public User(Long id, String name, Integer age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }
}

Controller 控制层

因为swagger作用于接口,它通过注解来实现配置,所以我们在控制层添加一些方法,就能将对应接口显示到swagger-ui上。

@RestController
@RequestMapping(value = "/api")
@Api(value="用户操作接口")
public class UserController {
    /**
     * @ApiOperation注解来给API增加说明、通过@ApiParam注解来给参数增加说明。
     * value 是标题,notes是详细说明
     * @param user
     * @return
     */
    @ApiOperation(value="创建用户", notes="根据User对象创建用户")
    @PostMapping("/user")
    public Map<String, Object> insert(@ApiParam(value = "用户详细实体user", required = true)@RequestBody User user) {
        Map<String, Object> map = new HashMap<>(16);
        map.put("respMsg", "新增成功");
        map.put("respData", user);
        map.put("respCode", 200);
        return map;
    }
    
    @ApiOperation(value="更新用户", notes="根据User对象更新用户")
    @PutMapping("/user")
    public Map<String, Object>  update(@ApiParam(value = "用户详细实体user", required = true)@RequestBody User user) {
        Map<String, Object> map = new HashMap<>(16);
        map.put("respMsg", "更新成功");
        map.put("respData", user);
        map.put("respCode", 200);
        return map;
    }
    
    @ApiOperation(value="删除用户", notes="根据id删除用户")
    @DeleteMapping("/user/{id}")
    public Map<String, Object> delete(@ApiParam(value = "用户id", required = true) @PathVariable Integer id)  {
        Map<String, Object> map = new HashMap<>(16);
        map.put("respMsg", "删除成功");
        map.put("respCode", 200);
        map.put("id", id);
        return map;
    }

    @ApiOperation(value="获取用户列表", notes="根据User对象查询用户信息")
    @GetMapping("/user")
    public List<User> findByUser() {
        List<User> list = new ArrayList<>();
        list.add(new User(1L,"张三",18));
        list.add(new User(2L,"李四",20));
        return list;
    }
}

Api注解:作用于类上,作用是对该类进行说明,说明的信息由value的值决定。
ApiOperation注解: 作用于方法上作用是对该接口进行说明,value是接口名称,notes是说明。
ApiParam注解:作用于参数,对方法参数进行说明。

application.yml配置文件

server:
  port: 8080

启动类

@SpringBootApplication
public class SwaggerApplication {
    public static void main(String[] args) {
        SpringApplication.run(SwaggerApplication.class, args);
    }
}

测试

启动程序后,访问http://localhost:8080/swagger-ui.html 即可查看页面

image

可以看到代码里通过注解写的说明都在页面上体现出来了。

接下来看http请求测试,将在图中进行说明:

get请求


image

post请求


image

delete请求,url带动态id


image

跨域问题

跨域是什么?浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域 。我们是采用前后端分离开发的,也是前后端分离部署的,必然会存在跨域问题。怎么解决跨域?
这里介绍两种方式,
1.只需要在 controller 类上添加注解CrossOrigin即可!这个注解其实是 CORS 的实现。
2.添加配置类:

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer{
    @Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        /*是否允许请求带有验证信息*/
        corsConfiguration.setAllowCredentials(true);
        /*允许访问的客户端域名*/
        corsConfiguration.addAllowedOrigin("*");
        /*允许服务端访问的客户端请求头*/
        corsConfiguration.addAllowedHeader("*");
        /*允许访问的方法名,GET POST等*/
        corsConfiguration.addAllowedMethod("*");
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

本文GitHub源码:https://github.com/lixianguo5097/springboot/tree/master/springboot-swagger

CSDN:https://blog.csdn.net/qq_27682773
简书:https://www.jianshu.com/u/e99381e6886e
博客园:https://www.cnblogs.com/lixianguo
个人博客:https://www.lxgblog.com

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容

  • 手写Api文档的几个痛点: 文档需要更新的时候,需要再次发送一份给前端,也就是文档更新交流不及时。 接口返回结果不...
    问题_解决_分享_讨论_最优阅读 852评论 1 8
  • swagger是什么? 随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染、先后端分离的...
    小土豆哥哥阅读 1,601评论 0 3
  • 今天技术总监说:小明,我们本次3.0改造,使用swagger2.0作为前后端分离的接口规范,它可以一键生成前后端的...
    coder小明阅读 3,326评论 4 12
  • 陪伴是最好的教育方式 读第96条《我怎样研究和教育学习最差的学生》有感 莱州市文峰中学 程挺模 我们经常告诫家长说...
    赶潮儿阅读 1,160评论 1 3
  • 我从来没有意识到,十八岁是一个重要又美好的年纪。我浑浑噩噩的过到十八岁,然后又从十八岁活到现在。 在《亲爱的安德烈...
    李木木子子阅读 321评论 0 0