【技术创作101训练营】- 前后端分离模式下如何保证开发人员不打架？
上传ppt很多颜色被改变了，如果评委老师想看原版的话，可以看pdf，麻烦了，谢谢。
pdf：
第1页PPT：
第1页PPT演讲稿：
大家好，我是郑晖，不是郑辉；
晖是一个日一个军的辉，不是一个光一个军的辉；
很多人在写我的名字的时候，经常写错，其实不怪写错我名字的人；
我小时候改过名字，改名字之前的辉确实是一个光一个军的，要怪就怪我小时候改名字的时候，公安局的警察叔叔给我打错字了。
我现在是一名大四学生，即将成为一名光荣的打工人；
也是truedei-swagger-plugin框架的作者；
现在也是一名热爱用博客记录自己点点滴滴的博客人，在CSDN是拥有将近3万粉丝的博客专家，也在也腾讯云社区耕耘；
在高中的时候我就非常的热爱计算机，高中就代表山东省参加全国的Linux比赛，并且拿到了全国的金牌。
在大学中我也没落伍，参加了各种各样的计算机的必死啊，拿到的获奖证书可以按斤算，可沉了。
这些给我的生活带来了无比丰富的乐趣。
第2页PPT：
第2页PPT演讲稿：
今天给大家带来的是：《前后端分离模式下如何保证开发人员不打架？》
这个主题，大家是不是很好奇呀，怎么能让开发人员n不打架呀？
难道是拉架？还是什么呢？
大家稍安勿躁，马上揭晓!
第3页PPT：
第3页PPT演讲稿：
先把掏心窝子的话讲在前面，你将会在接下来的短暂时间内，会了解到前后端分离的开发模式和一些优势，以及遇到的问题以及如何解决这些问题的方案。
你还会了解一些有趣的事情；
你还会了解truedei-swagger-plugin框架，它用来干什么的呢?请大家期待一下吧，就是用它来解决不让前后端人员不打架的问题。
第4页PPT：
第4页PPT演讲稿：
接下来我会从上面这几个方面来介绍：
首先给大家介绍一下”传统的web开发模式VS前后端分离开发模式“；
然后再介绍一下truedei-swagger-plugin是什么框架，为什么能解决现状呢？
swagger是什么？和Springfox-swagger有什么关系？
为什么要用Springfox-swagger?
如何结合SpringBoot项目进行应用
最后再做总结
第5页PPT：
第5页PPT演讲稿：
1、传统的web开发模式VS前后端分离开发模式
第6页PPT：
第6页PPT演讲稿：
用户在浏览器上发送请求，服务器端接收到请求，根据 Header 中的 token 进行用户鉴权，从数据库取出数据，处理后将结果数据填入 HTML 模板，返回给浏览器，浏览器将 HTML 展现给用户。
发现有什么问题吗？
问题点在图右边那位全寨（栈）开发人员！他她既要会数据库开发（SQL）、又要会服务器端开发（Java、C#），又要会前端开发（HTML、CSS、JS）。现实告诉我们，百样通往往不如一样精，什么都会的人往往哪一样都干不好。是否可以按照前端后端进行人员职责区分呢？如果进行职责区分，分成前端开发和后端开发，但由于程序全在一个服务里，不同职责开发人员彼此间的交流、代码管理就会成为一个大问题，也就是交流成本膨胀的问题了。
第7页PPT：
第7页PPT演讲稿：
样样通，不如一样精；
什么都懂，往往什么都不懂。
一直觉得很有道理
第8页PPT：
第8页PPT演讲稿：
现在 Web 服务器不再处理任何业务，它接收到请求后，经过转换，发送给各个相关后端服务器，将各个后端服务器返回的，处理过的业务数据填入 HTML 模板，最后发送给浏览器。
Web 服务器和后端服务器间，可以选用任何你觉得合适的通信手段，可以是 REST，可以是 RPC，选用什么样的通信手段，这是另一个议题了。
这样，前端人员和后端人员约定好接口后，前端人员彻底不用再关心业务处理是怎么回事，他只需要把界面做好就可以了，后端人员也不用再关系前端界面是什么样的，他只需要做好业务逻辑处理即可。服务的切离，代码管理，服务部署也都独立出来分别管理，系统的灵活性也获得了极大的提升。
第9页PPT：
第9页PPT演讲稿：
随着软件技术的不断发展，一体化的软件开发方式已经逐渐被淘汰。
所以前后端分离的开发方式就显得尤为重要。
但是，前后端分离的话又会出现新的问题：
比如：前端会经常抱怨后端给的API接口与实际不符，而后端则会因为编写和维护接口比较耗费精力，来不及更新。
所以不管是前端开发者还是后端开发者，一个高效且及时的接口文档都是非常重要的。
但是，编写接口文档就像写注释一样，
一方面：我们会嫌弃别人写的注释不够简洁明了；
另一方面：我们写代码的时候，又懒得去写注释。
单单是靠这种强制规范，是远远不能达到双方都满意的效果，而且随着版本迭代，接口文档更新更是让人烦上加烦。
这时Swagger就应运而生，帮助程序员编写接口文档。
第10页PPT：
第10页PPT演讲稿：
工欲善其事；
必先利其器。
大家一定很熟悉吧，咱们有了趁手的兵器才能打胜仗。
第11页PPT：
第11页PPT演讲稿：
2、truedei-swagger-plugin是什么框架，为什么能解决现状呢？
第12页PPT：
第12页PPT演讲稿：
truedei-swagger-plugin是什么呢？
它是一个开源的框架
是一个对swagger二次开发，扩展了多种功能的框架，简单，方便，快捷，高效的框架。
它是多种api接口管理的解决方案
解决了多种swagger在真实当中应用的问题。
它有效的解决了前后端、测试人员交流的问题
提供了在线调试、在线阅读api说明，及时更新等功能。
关于具体的介绍，随后会揭晓，此时先埋下一个伏笔。
第13页PPT：
第13页PPT演讲稿：
3、swagger是什么？和Springfox-swagger有什么关系？
第14页PPT：
第14页PPT演讲稿：
Swagger和Springfox-swagger有什么关系呢？
在一些博主的博客上，很多都有一些误区，为了了解真正的区别，我特意翻了swagger的官网。
swagger是什么？
swagger有5个项目，有Swagger Codegen、Swagger UI、Swagger Editor、Swagger Inspector、Swagger Hub。更准确的说，swagger是一套规范。
Springfox-swagger是什么？
Springfox-swagger 是基于swagger规范和Spring的一个框架；
可以将基于Spring或Spring Boot项目进行融合，扫描SpringMVC或者SpringBoot项目的代码，自动生成JSON格式的数据；
Springfox-swagger本身不是属于Swagger官方提供的。
swagger和Springfox-swagger有什么区别？
Swagger 是一套规范；
Springfox-swagger 是基于Swagger规范和Spring的一个框架；
第15页PPT：
第15页PPT演讲稿：
4、为什么要用Springfox-swagger?
第16页PPT：
第16页PPT演讲稿：
关于为什么要用springfox-swagger，如PPT上所列举的部分所示：
1、可以和Spring项目或者SpringBoot项目很好的整合；
2、可以自动扫描并生成项目的所有的接口，并展示在UI界面，无需手动特意编写API文档；
3、通过web方式查看每个接口的作用，以及描述
4、可以查看参数的是什么类型，是否必须输入等信息；
5、可以像postman一样测试API接口
6、可以动态的查看接口请求的状态码和返回的数据结构；
第17页PPT：
第17页PPT演讲稿：
5、如何结合SpringBoot项目进行应用
第18页PPT：
第18页PPT演讲稿：
从无到有，分别由4个步骤。
首先是pom.xml文件引入相关依赖
然后使用注解，开启Swagger相关功能；
然后再配置Swagger基本信息
然后就是使用特定的注解来描述某个需要展示的接口。
就完成了
第19页PPT：
第19页PPT演讲稿：
Step1:引入Swagger需要的依赖
我已经发布到了maven的中央仓库，大家在使用的时候，可以直接引用即可。
很方面，无需你关心是否需要依赖其他的jar包。
无需关心各个jar包之前版本的问题。
第20页PPT：
第20页PPT演讲稿：
这是Springfox-Swagger2常用的注解
这里就不仔细讲了，只说一下具体的作用；
@Api()是描述在类上的，表示标识这个类是swagger的资源
@ApiOperation()是描述在方法上的，表示一个http请求的操作
@ApiParam()是描述在方法上的；参数，字段说明，表示对参数的添加元数据（说明或是否必填等）
@ApiModel()是描述在类上的，表示对类进行说明，用于参数用实体类接收
@ApiModelProperty()是描述在方法，字段上的，表示对model属性的说明或者数据操作更改
@ApiIgnore()是描述在类，方法，方法参数上的，表示这个方法或者类被忽略
@ApiImplicitParam()是描述在方法上的，表示单独的请求参数
关于具体的用法，大家后续可以参考我写的说明书；
第21页PPT：
第21页PPT演讲稿：
Step2:开启Swagger相关功能
首先写一个类，类名可以自定义，例如：Swagger2Config ；
分别使用：
@Configuration 注解
@EnableSwagger2 注解
@EnableKnife4j 注解
@EnableSwaggerPlugin 注解
来标注。
@Configuration 注解 表示 Spring的注解将该类注入到Bean中
@EnableSwagger2 注解 表示 开启Springfox-swagger2的功能
@EnableKnife4j 注解 表示 开启使用第三方UI
@EnableSwaggerPlugin 注解 表示 开启自定义扩展的功能
这些都是必须的哦！
第22页PPT：
第22页PPT演讲稿：
接下来就是需要配置swagger的基本信息了，需要写一个方法，返回Docket对象，并注入Bean；
Docket里面就是记录着我们需要的信息。
例如：分组的名称，swagger的基本信息，还有扫描的包路径等等
关于更详细的配置可以百度swagge
第23页PPT：
第23页PPT演讲稿：
这是swagger的基本信息，包括标题，描述，版本号等等。
第24页PPT：
第24页PPT演讲稿：
然后就是针对Controller层的类进行描述；
使用@Api()注解，来标识这个类是运行被swagger扫描的；
value和tags都可以理解为是显示的别名；
position是排序的序号；
第25页PPT：
第25页PPT演讲稿：
接下来就是需要配置一下针对接口的描述；
@ApiOperation是描述一个接口，此接口就可以被Swagger自动扫描到
@APiFileInfo是描述当前接口的一些信息都来自文件；
@Apicp是描述这个参数需要生成新的类
第26页PPT：
第26页PPT演讲稿：
Step4:使用了@APiFileInfo注解后，然后编写特定的文件信息
第27页PPT：
第27页PPT演讲稿：
如图中所示，这是启动之后访问的web界面，项目启动成功后，浏览器中输入：http://ip:port/doc.html即可访问；
第28页PPT：
第28页PPT演讲稿：
可以看到这是我们打开某一个接口页面的时候，会清晰的看到接口的地址，接口的类型，接口的描述，接口的请求示例，接口的请求参数，响应状态码等。
而且参数还有很详细的描述，例如参数名称，请求类型，是否必填，数据类型等等
第29页PPT：
第29页PPT演讲稿：
现在的位置是可以看到响应状态这一栏，通过我的框架；可以把自定义状态码；可以自定义返回的数据结构示例；而且还可以折叠，更方便了。
第30页PPT：
第30页PPT演讲稿：
还可以在线调试
第31页PPT：
第31页PPT演讲稿：
最后是总结
第32页PPT：
第32页PPT演讲稿：
本框架，解决了后端接收json字符串参数时，无法在界面显示的问题
只需要使用@Apicp注解即可解决
第33页PPT：
第33页PPT演讲稿：
解决之前，无论是后端，还是前端，都无法得知传递的是什么，解决之后，可以清晰的看到传递的什么参数，什么意思
第34页PPT：
第34页PPT演讲稿：
解决了接口描述的文本太多，全写在code里侵入性太大，维护不方便的问题；
第35页PPT：
第35页PPT演讲稿：
解决之前需要100行代码，解决之后减少了99%的无用代码。
第36页PPT：
第36页PPT演讲稿：
使用前
1、无法及时更新文档（遗漏）；
2、需要手动的编写太多与文档无关的内容；
2、需要手动的编写太多与文档无关的内容；
使用后
1、做到了更改代码后可以及时更新文档；
2、无需要手动的编写太多与文档无关的内容，会自动生成页面等；
3、文档与代码在一起，维护简单；
第37页PPT：
第37页PPT演讲稿：
这是开源的地址，放在这了，随后会将ppt发给大家，大家有兴趣的话再看即可，也可以与我联系；
第38页PPT：
第38页PPT演讲稿：
可以关注官方公众号，及时得到最新版本的更新消息
第39页PPT：
第39页PPT演讲稿：
谢谢大家
