背景
Thymeleaf模版很多地方确实很方便,但是在处理JSON对象时遇到了一些问题,就觉得很有意思记录一下,以供自己备忘,同时给有类似需求的同学参考一下,希望大家都能尽快解决问题,早点下班,回家遛狗~
在说正题之前,可能大家有个问题,其实Thymeleaf本身提供了一个map进行映射,还支持直接传class进行解析,那么为啥还要用JSON。其实我仔细想了一下,确实也没有一定要用JSON的必要,我就是 这么贱啊,JSON多方便,我偏要~(好吧,打人就算了,请勿打脸,大雾) 但是从中我们可以进一步感受Thymeleaf具体处理起来的一些有意思的方式。
具体处理
其实使用Thymeleaf最本质的地方在于对其自身的在理解,它是一个基于java的解析工具,主要还是在服务端本身进行了内容的替换,因此还是比较类似jsp的处理,而非一个真正意义的前端工具,它所有可以使用的函数都是基于java本身的。
因此对于JSON的遍历,其实也就是和java中对json的遍历一致,具体处理如下所示:
<table class="am-table am-table-bd am-table-bdrs am-table-striped am-table-hover">
<tbody th:remove="all-but-first">
<tr th:each="ea : ${eaJson.keySet()}">
<td class="am-text-center">*</td>
<td th:text="${ea}">1234567</td>
<td th:switch="${eaJson.getInt(ea)}">
<span th:case="-1" class="am-text-danger">未开通</span>
<span th:case="0">默认</span>
<span th:case="1" class="am-text-secondary">正常</span>
</td>
</tr>
</tbody>
</table>
同理,我们可以列举其它很多类似的功能,主要能在java中使用即可在模版中正确得到处理,如我们可以对spring boot中最常用的Page对象进行如此操作:
<tr th:each="ResourceComsumeUser : ${resourceComsumeUser.getContent()}" th:id="${ResourceComsumeUser.getUserID()}">
<td th:text="${ResourceComsumeUser.getID()}">1</td>
<td th:text="${ResourceComsumeUser.getUsedTimes()}"><a href="#">Business management</a></td>
<td th:text="${ResourceComsumeUser.getText()}">31</td>
<td th:text="${ResourceComsumeUser.getTime()}/1000">json</td>
</tr>
题外话
虽然Thymeleaf模版本身十分方便,特别是其严格的xml检测,让很多html标签不完整的地方能够得到检测,比如<input name="xx" type="hidden">这样一般在html可行的是通过不了的,一定要完整匹配为<input name="xx" type="hidden" />(强迫症表示:一本满足)。但是其对页面嵌入的js脚本转义符号的支持却不是很好,主要表现为:
<script type="text/javascript">
$(document).ready(function(){
var content = "<button onclick=\"hello()\" />";
});
</script>
类似这种的"转义会报错,当然解决方案也很简单,换成'号或者直接做成js脚本引入就可以了,只是有时候没有那么爽的感觉(好吧,奇怪的强迫症)