带徒实训项目实战讲义分享: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类型,这种情况下就要终止递归渲染的调用。这个问题先留给学员朋友们思考下怎么解决。后面咱们会出一个小节来说明这个问题怎么重现已经怎么解决,大家加油!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java小卷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值