带徒实训项目实战讲义分享：ApiFirst文档对比功能页面开发

亲爱的学员朋友，前面咱一起实现了入参列表对比的部分功能，本节在此基础上继续开发和重构代码，go！

已实现的功能

基于0.0.6和0.0.5两个版本比较入参列表的变化，用淡蓝色背景标出改动的请求接口，比较出参数名称、描述的变化，这里以修改路径参数为例；比较参数校验规则的变化，这里用绿色标注新增的校验项：

再对比0.0.7和0.0.6两个版本的变化，密码参数的非空校验message修改了，并删除了长度校验：

具体的变化反映在数据库，咱们对操作历史变更插入了一些记录：

这些大家伙儿都完成的很好！

实现API入参列表的增删对比

在版本0.0.4中咱们对问候api进行了入参列表的调整，删掉了查询参数，新增了两个路径参数，sql脚本如下：

通过单元测试调试，发现咱们的核心对比功能对比出了这种变化：



现在，让我们调整thymeleaf的html模板来实现这种渲染。
按照现在的实现，应该把personName参数这一行置灰：

先在对比基类中新增一个方法来判断对比项是否被删除：

学员要注意，这里modifiedType可能为null，也就是对比项没变化，不能直接用== 来判断。
修改compare-result.html，增加删除tr的class：

看到页面的变化：

延用校验单元格中对删除校验项的样式：

看一看标记删除的效果：

合并参数列表

在进一步实现参数列表新增项渲染功能之前，咱们先合并下对比的参数列表变化的部分：
在ApiItemDTO中新增合并入参列表的方法：

调整模板：

看到新增的参数列表显示出来了

对新增参数项进行颜色标注，和前面对删除项的做法一样，先写getter判断方法：

模板调整：

isXxx()方法的属性获取
在获取时直接访问xxx即可，这里贴出来的代码可以再精简。

样式调整：

测试时发现，页面没看到效果，review代码，发现参数列表对比实现中忘了比较新增项的状态，调整下ParamsCompareCommand：

重启服务，看页面效果：

杜绝内部变量暴露

功能实现了，带学员朋友再优化下代码。首先是判断modifiedType类型的地方，直接提供isXxx()方法，按照代码设计原则，这就是把自己不该暴露出来的东西给别人看了。
在CompareBaseDTO中使用这些方法：

按照这种调整，有的学员朋友写出这样的代码，也需要优化：

提供isXxx()方法来代替：

悟性好的学员朋友，自然想到进一步优化，除去重复代码，复用对比项基类中的isXxx()方法，这样重构后代码就变得漂亮很多了：

相应的，在sub-templates.html中调整：

同样的，compare-result.html中的调整：

同样，在review学员代码时，看到这样的写法：

这是对api按照path分组后根据变更的状态进行背景色标注的模板代码，请自行按照前面的做法进行重构。优化后的结果：

提取modifiedType枚举

在实现内部接口时，变量可枚举的值强烈推荐用枚举来维护，在review学员代码时发现这种写法：

建议新建一个枚举类来更好的维护：