文档交互、API开发框架Swagger的简单学习

Swagger

https://mp.weixin.qq.com/s?__biz=Mzg2NTAzMTExNg==&mid=2247483909&idx=1&sn=201ee629b9ce3b9276a263e18812e607&scene=19#wechat_redirect

学习目标:

  • 了解 Swagger 的概念以及作用
  • 了解前后端分离
  • 在 SpringBoot 中集成 Swagger

1、前后端分离

1.1 未分离时期

早期前后端未分离时期,通常都是使用传统的 MVC 架构,通过 JSP 和 Servlet 来实现

在这里插入图片描述

所有的请求都被发送给作为控制器的 Servlet,它接受请求,并根据请求信息将它们分发给适当的 JSP 来响应。同时,Servlet 还根据 JSP 的需求生成 JavaBeans 的实例并输出给 JSP 环境。JSP 可以通过直接调用方法或使用 UseBean 的自定义标签得到 JAVABeans 中的数据。需要说明的是,这个 View 还可以采用 Velocity、Freemaker 等模板引擎。使用了这些模板引擎,可以使得开发过程中的人员分工更加明确,还能提高开发效率。
那么,在这个时期,开发方式有如下两种:

方式一:

在这里插入图片描述

方式二

在这里插入图片描述

方式二已经逐渐淘汰。主要原因有两点:

  • 前端在开发过程中严重依赖后端,在后端没有完成的情况下,前端根本无法干活。
  • 由于趋势问题,会JSP,懂velocity,freemarker的前端越来越少。

因此,方式二逐渐不被采用。然而,不得不说一点,方式一,其实很多小型传统软件公司至今还在使用。那么,方式一和方式二具有哪些共同的缺点呢?

  1. 前端无法单独调试

    在项目上线后,遇到一些问题。比如样式出问题了,由于前端不具备项目开发环境,那么就有可能出现如下对话

    前端 :“我这里没问题啊。后端,你那里正常么?”
    后端 :“我这里不正常啊。要不你过来看一下吧?”
    前端 :“一时我也看不出问题,我也没环境,怎么办?”
    后端 :“你没环境,坐我这边调吧。”
    然后,前端就满脸不爽的在你那调代码了。更有些情商低的后端就直接在旁边开摁手机,实在是。。。。。

    总结,因为前端无法单独调试。一方面开发效率降低。另一方面,还有可能引发公司内部人员上的矛盾。

  2. 前端不可避免会遇到后台代码

    比如前端可能碰到如下结构的代码

    <body>
        <%
        request.setCharacterEncoding("utf-8");
        String name=request.getParameter("username");
        out.print(name);
        %>
    </body>
    

    身为前端,在页面里看到了后台代码,必然内心是十分不快的,这种方式耦合性太强。那么,就算你用了 freemarker 等模板引擎,不能写 JAVA 代码。那前端也不可避免的要去重新学习该模板引擎的模板语法,无谓增加了前端的学习成本。
    正如我们后端开发不想写前端一样,你想想如果你的后台代码里嵌入前端代码,你是什么感受?因此,这种方式十分不妥。

  3. JSP本身所导致的一些其他问题

    比如,JSP 第一次运行的时候比较缓慢,因为里头包含一个翻译为 Servlet 的步骤。再比如因为同步加载的原因,在 jsp 中有很多内容的情况下,页面响应会很慢。

1.2 半分离时期

前后端半分离,前端负责开发页面,通过接口(Ajax)获取数据,采用 dom 操作对页面进行数据绑定,最终是由前端把页面渲染出来。这也就是其他博客里说的,Ajax 与 SPA 应用(单页应用)结合的方式。其结构图如下:

在这里插入图片描述

步骤如下:

  1. 浏览器请求,cdn 返回 html 页面
  2. html 中的 js 代码以 ajax 方式请求后台的 restful 接口
  3. 接口返回 json 数据,页面解析 json 数据,通过 dom 操作渲染页面

为什么说是半分离的?

因为不是所有页面都是单页面应用,在多页面应用的情况下,前端因为没有掌握 controller 层,前端需要跟后端讨论,我们这个页面是要同步输出呢,还是异步 json 渲染呢?因此,在这一阶段,只能算半分离。

这种方式的优缺点有哪些呢?

首先,这种方式的优点是很明显的。前端不会嵌入任何后台代码,前端专注于 html、css、js 的开发,不依赖于后端。自己还能够模拟 json 数据来渲染页面。发现 bug,也能迅速定位出是谁的问题,不会出现互相推脱的现象。
然而,在这种架构下,还是存在明显的弊端的。最明显的有如下几点:

  1. js 存在大量冗余,在业务复杂的情况下,页面的渲染部分的代码,非常复杂。
  2. 在 json 返回的数据比较大的情况下,渲染的十分缓慢,会出现页面卡顿的情况
  3. seo 非常不方便,由于搜索引擎的爬虫无法爬下js异步渲染的数据,导致这样的页面,SEO 会存在一定的问题。
  4. 资源消耗严重,在业务复杂的情况下,一个页面可能要发起多次 http 请求才能将页面渲染完毕。可能有人不服,觉得 pc 端建立多次 http 请求也没啥。那你考虑过移动端么,知道移动端建立一次 http 请求需要消耗多少资源么?

正是因为如上缺点,真正的前后端分离架构诞生了

1.3 分离时期

在这一时期,扩展了前端的范围。认为 controller 层也属于前端的一部分。在这一时期

  • 前端:负责 View(视图层) 和 Controller 层(前端控制层)。

    • 可以伪造后端数据(Json)
  • 后端:只负责后端控制层,服务层,数据访问层。

  • 前后端通过 API 进行交互

  • 前后端相对独立,松耦合

  • 前后端可以部署到不同的服务器上

前后端分离产生的问题

  • 前后端集成联调,前端人员和后端人员无法做到及时协商,建造解决,最终导致问题的集中爆发

解决方案

  • 要制定好 schema(计划提纲),实时更新最新的 API,降低集成的风险
  • 前端测试后端接口:postman 等等
  • 后端提供接口,需要实时更新最新的消息以及改动

前后端分离的窘境从而孕育了一个框架的出现,Swagger!

2、Swagger 简介

Swagger 号称为世界上最为流行的 API 框架

Swagger 是一个规范且完整的框架,用于生成、描述、调用和可视化 RestFul 风格的 Web 服务。

Swagger 的目标是对 Rest API 定义一个标准且和语言无关的接口,可以让人和计算机拥有无须访问源码、文档或网络流量监测就可以发现和理解服务的能力。当通过 Swagger 进行正确定义,用户可以理解远程服务并使用最少实现逻辑与远程服务进行交互。与为底层编程所实现的接口类似,Swagger 消除了调用服务时可能会有的猜测。

Swagger 的优势

  • 流行的 API 框架
  • RestFul API 文档在线自动生成工具(支持 API 自动生成同步的在线文档,API 文档与 API 定义同步更新)
  • 提供 Web 页面在线测试 API(参数和格式都定好了,直接在界面上输入参数对应的值即可在线测试接口)
  • 支持多种语言:Java、Php 等等

3、SpringBoot 集成 Swagger

Swagger 官网:https://swagger.io

使用 Swagger 需要:

  • springfox
  • swagger2
  • ui

集成 Swagger 步骤

  1. 新建一个 SpringBoot 项目(Web 项目)

  2. 编写一个 hello 程序,测试一下

  3. 导入相关依赖

    • swagger2

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

      <dependency>
          
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值