Thymeleaf:
市面上主流的 Java 模板引擎有:JSP、Velocity、Freemarker、Thymeleaf
JSP本质也是模板引擎,Spring Boot 官方推荐使用 “Thymeleaf”模板引擎
Thymeleaf 官网:https://www.thymeleaf.org/
Thymeleaf 在Github 的主页:https://github.com/thymeleaf/thymeleaf
Thymeleaf 参考手册:https://blog.csdn.net/zrk1000/article/details/72667478/
<a th:href="@{/admin/examination/paper/initAdd}"></a>
th:href@{} : 链接
<a th:href="@{/web/uc/order/orderInfo?orderId={orderId}(orderId=${order['id']})}" class="c-999">详情</a>
th:href@{}:带参数
<script type="text/javascript" th:src="@{{path}/admin/libs/plugins/layer/laydate/laydate.js?v={v}(path=${staticPath},v=${v})}">
</script>
<script type="text/javascript" th:src="@{/course/cou/select-common-course.js?v={v}(v=${v})}">
</script>
th:src@{} :引入js、css图片等等
<script th:inline="javascript"> </script>
th:inline=“javascript” :页面写js使用 (脚本内联)
th:inline=“text” : (文本内联)
<input hidden id="id" name="id" th:value="${examPaper['id']}" th:placeholder="XXX" />
th:value: value值
th:placeholder :描述
<span th:if="${useType}==1" class="fs14 c-999">试卷</span>
th:if : 判断
<input name="stick" type="radio" value="2" th:checked="${examPaper['stick']} == 2" /> <strong>是</strong>
th:checked : checked选中
<span class="fs24 c-master" th:text="${statistics['count']}"></span>
th:text : 文本,普通字符串
<textarea th:disabled="${personalTask['marked']}==2? 'true':'false'"
th:attr="data-record=${personalTask['questionRecordMap'][question.id+'']['id']}" class=""
th:utext="${personalTask['questionRecordMap'][question.id+'']['comment']}">
</textarea>
th:attr : 属性
th:utex : 转义文本
<tr th:if="!${#lists.isEmpty(examPaper['classesList'])}"
th:each="classes,index : ${examPaper['classesList']}" th:attr="data-classes=${classes['id']}">
<td class="text-center" th:text="${classes['id']}"></td>
</tr>
th:each : 循环
index.index:下标
index.count:数量
<li th:if="${paper['status']} == 0" th:attrprepend="data-id=${paper['id']}" class="publish"></li>
th:attrprepend : attr + 拼接的属性
<li data-type="VIDEO" th:classappend="${courseTypeKey}=='VIDEO'?'active':''" class="cm-filter-item">录播课</li>
th:classappend : class + 拼接的属性
<img class="wm-img" th:src="${details['shop']['book']['imageMap']['mobileUrlMap']['large']}" th:alt="${details['shop']['book']['bookName']}"/>
th:src : 引入图片路径
th:alt : alt显示文字
2.map
<select th:disabled="${examPaper['status']} != 0 or !${#maps.isEmpty(classes)}" class="form-control" id="select">
</select>
th:disabled : xx条件下不显示
${#maps.isEmpty()} : map为空
!${#maps.isEmpty()} : map不为空
3.list
<tr th:class="${#lists.isEmpty(examPaper['courseList'])} ? '':'hide'"></tr>
<span th:if="!${#lists.isEmpty(course['teacherList'])} and ${#lists.size(course['teacherList'])}>4" ></span>
th:class class样式
${#lists.isEmpty()} list为空
!${#lists.isEmpty()} list不为空
${#lists.size()} list长度
4.string
<section th:if="${#strings.isEmpty(course['details'])}"class="no-data__wrap">
</section>
<span class="fs18" th:text="${#strings.concat('班级名称:', classes['name'])}"></span>
<samp th:text="${#strings.substring(details['createTime'],0,16)}"></samp>
${#strings.isEmpty()} string为空
${#strings.concat(‘’,’’) 拼接
${#strings.contains()} : 包含某字符
${#strings.substring(‘’, ,) string截取字符串
5.date
<div class="pull-right">©<span th:text="'2010-'+${#dates.format(new java.util.Date().getTime(), 'yyyy')}"></span></div>
${#dates.format(‘’,’’)} 格式化date
<span th:text="${#dates.format(taskExamPaperEndTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
格式化日期为:yyyy-MM-dd HH:mm:ss 格式
6.number
<li th:each="ye : ${#numbers.sequence(2016,year)}" th:attrappend="data-year=${ye}" th:text="${ye}" class="cm-filter-item"></li>
${#numbers.sequence()} 列举时间
<span th:text="${#numbers.formatDecimal(viewParsMap['entity']['userId'],1,0)}"></span>
#numbers.formatDecimal(,) : 将userId转int类型,截取掉小数点后的小数。
<td class="text-center" th:text="${#numbers.formatDecimal(record['examTime']/60,1,0,'POINT')}+'分'+${record['examTime']}%60 +'秒'"></td>
将秒格式化转为分+秒
7.其他
<div data-th-replace="common/functionDepict"></div>
data-th-replace 引入其他模板
<th:block th:if="${useType}==2 and ${#maps.isEmpty(classes)}"></th:block>
< th:block></th:block> xxx条件下显示
<input type="hidden" th:attr="id='questionCount_'+${personalTask['id']}" th:value="${personalTask['questionCount']}"/>
动态id
th:data-id="${examQuestionRecord['id']}+'-'+${subIndex.count}"
唯一动态id
th:attr="data-id=${personalTask['examPaper']['id']},data-time=${#strings.substring(personalTask['examPaper']['endTime'],0,16)},data-url=${personalTask['examPaper']['datumList'][0]['url']}"
th:attr”,” 可以定义多个data-属性
${#strings.replace(#strings.substring(dataMap['openTime'],5,16),'-','月')}
格式化yyyy-MM-dd HH:mm:ss 为 xx月xx HH:mm