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

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

亲爱的学员朋友们好，本小节跟小卷一起来学习用thymeleaf模板技术来渲染数据模型到表格中，通过本小节的学习，你会真正将thymeleaf模板技术应用到实处，做出有用的东西。

为什么选择thymeleaf

有新加入进来的学员朋友，会问小卷为啥不用前后端分离的模式，用vue来开发前端页面呢。的确，vue开发页面会更简单，咱们这里选thymeleaf模板来做，是因为页面与后端没啥交互，只是查看的文档模式。而且用它还有个好处，thymeleaf除了可以直接生成浏览器可查看的html视图外，还可以结合模板解析引擎来生成导出html的文件，以方便用户直接本地浏览器打开来离线查看。

准备工作

首先看用户个人信息上报接口，请求内容类型为json数据，接下来就要基于一个DTO类型将结果渲染到一个表格中：

通过断点调试，我们可以定位到要渲染的对象：

要渲染的结构中包含了数据模型上的校验、数据模型继承的类型上的字段列表、数据模型本身的字段列表、字段上是数据模型的引用渲染、字段校验等等。还是有些复杂的：

编写数据模型表格模板

基于模板的判断逻辑，先加上对比后类型不发生变化的情况下的数据模型的渲染：

注意unless的用法，自动取反，让判断更加清晰。看到页面要渲染的部分出来了：

下面，咱们先简单实现下表格，这里要注意把DTO中需要解析的属性作为tr元素的集合放到一个单独的子模版的片段中，通过包含以及移除外层tr的方式进行引入，表格的头部在外面定义。当然为避免表头的tr多处重复定义，也可以把它放到被包含的片段中。

注意！！这里声明变量dto后面笔误，应该加${...}

渲染出来的内容符合我们的预期：

渲染dto属性列表

首先在DtoItemDTO中加一个方法来获取对比后合并的属性列表：

关于name的说明
模型里name这个字段注意是给后台生成DTO模型中的属性名使用的，而实际的对接文档中的名称，一般来说可以是驼峰命名也可以是下划线方式，甚至是@JsonProperty注解指定的别名。这里我们优先取定义的别名alias，再取name字段，而关于驼峰命名到下划线的转换规则这里在获取时处理下，在DtoPropertyDTO中提供一个方法：
写一个工具类：

测试ok：

在DtoPropertyDTO中提供获取属性名的方法：

在模板中简单绑定下：

看页面效果：

对简单类型，看起来没啥问题，但咱们还要处理类型为dto的情况，看下面红框标出来的内容：

很显然，当我们判断到一个属性为dto引用时，需要在它的下一行递归渲染出其属性。

最终得到咱们要的效果：

渲染字段校验

参照之前入参列表的实现，注意调整下继承关系：

把DtoPropertyDTO中原来定义的校验相关的属性都移除掉。

实现校验模板片段的复用：

页面马上呈现出复用的校验信息模板解析内容了，很棒！

关于分组校验
这里的分组校验可以优化，咱们可以对api文档做的更加的人性化，因为这里的数据模型在用户信息暂存tempSave和上报submit这两个接口中进行了复用，涉及到按不同的api来指定应用不同的分组，我们应该对要展示的相关的数据模型进行当前应用校验分组的过滤，让这块文档的展示更加智能，这是咱们后续要优化的点，先记录下。

思考：递归渲染可能出现的死循环如何避免？

这里对一个dto，在实际定义时会存在属性也是该dto类型的情况，比如一个StudentDTO下有一个girlFriend属性也是StudentDTO类型，这种情况下就要终止递归渲染的调用。这个问题先留给学员朋友们思考下怎么解决。后面咱们会出一个小节来说明这个问题怎么重现已经怎么解决，大家加油！