Thymeleaf模板引擎常用总结

发布时间:2024-12-11 03:37

Python Flask框架适合搭建API接口,理解路由和模板引擎 #生活技巧# #工作学习技巧# #编程语言学习路径#

一:语法简单总结

          Thymeleaf是一个Java类库,是xml/html/html5的模板引擎,SpringBoot框架推荐在MVC的Web应用做做View层使用.

          SpringBoot中整合Thymeleaf依赖如下.

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

<properties>

<!-- set thymeleaf version SpringBoot默认使用的是Thymeleaf的2.0的版本.-->

<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>

<thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version>

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>

<java.version>1.8</java.version>

</properties>

                                                          ThymeleafProperties的源码如下.

将application.yml中的spring.thymeleaf的配置注入下面对应的属性中,有几个是默认的,剩下的都是根据使用情况配置的,然后注入到相应的值中.

@ConfigurationProperties:批量注入属性值.

@Value:单个注入属性值.

@ConfigurationProperties(

prefix = "spring.thymeleaf"

)

public class ThymeleafProperties {

private static final Charset DEFAULT_ENCODING;

public static final String DEFAULT_PREFIX = "classpath:/templates/";

public static final String DEFAULT_SUFFIX = ".html";

private boolean checkTemplate = true;

private boolean checkTemplateLocation = true;

private String prefix = "classpath:/templates/";

private String suffix = ".html";

private String mode = "HTML";

private Charset encoding;

private boolean cache;

private Integer templateResolverOrder;

private String[] viewNames;

private String[] excludedViewNames;

private boolean enableSpringElCompiler;

private boolean enabled;

private final ThymeleafProperties.Servlet servlet;

private final ThymeleafProperties.Reactive reactive;

public ThymeleafProperties() {

this.encoding = DEFAULT_ENCODING;

this.cache = true;

this.enabled = true;

this.servlet = new ThymeleafProperties.Servlet();

this.reactive = new ThymeleafProperties.Reactive();

}

   命名空间如下,静态页面转换为动态视图.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">     1. Thymeleaf引入css资源.

          th:href="@{path}"

<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" media="all">     2. Thymeleaf引入JavaScript资源.

         th:src="@{path}"

<script th:src="@{js/jquery-3.1.1.min.js}"></script>

        通过 "@{}"引用静态资源.

   3. 访问Model中的数据.

        ${}访问model中的属性.

<span th:text="${singlePerson.name}"></span>

        动态处理的元素使用"th:"为前缀.

  4. model中的数据迭代.      判断list集合不为空.

<div th:if="${not #lists.isEmpty(person)}">

</div>

    迭代list集合数据.list中保存实体对象.

<div class="panel-body">

<ul class="list-group">

<li class="list-group-item" th:each="person:${person}">

<span th:text="${person.name}"></span>

<span th:text="${person.age}"></span>

<button class="btn" th:onclick=" 'getPersonName(\'' +${person.name}+ '\'); '">获得名字</button>

</li>

</ul>

</div>

如何获取遍历列表的序号,方式一:${stat.count}是从1开始的,方式  二:${stat.index}是从0开始的,如果从1开始就${stat.index+1}.

<tr th:each="novel,stat:${resultlist}">

<th style="text-align:center;" th:text="${stat.count}"></th>

  迭代list,里面存放map对象.   th:text=${novel['Map Key']}

<tr th:each="novel,stat:${resultlist}">

<th style="text-align:center;" th:text="${stat.count}"></th>

<th style="text-align:center;" th:text="${novel['Index']}"></th>

<th style="text-align:center;" th:text="${novel['Type']}"></th>

<th style="text-align:center;" th:text="${novel['Id']}"></th>

<th style="text-align:center;" th:utext="${novel['Highlight']}"></th>

<th style="text-align:center;" th:text="${novel['Scope']}"></th>

</tr>

5. 在JavaScript中访问model中的数据.

     通过th:inline=“javascript”添加到script标签,这样Javascript就可以访问model中的对象属性了.

    通过“[[${}]]”访问实际的值.

<script th:inline="javascript">

var single=[[${singlePerson}]];

console.log(single.name+"/"+single.age);

function getPersonName(name){

console.log(name);

}

</script>

6. 解析model属性值中的html标签.

<th style="text-align:center;" th:utext="${novel['Highlight']}"></th> 7. 格式化.(表达式对象)     7.1格式化金额.小数位为2为.

<dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">350</dd>     7.2 格式化日期

<dd th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">28-Jun-2018</dd>     7.3 字符串连接

<span th:text="${'Hi'+person.name}"></span>

网址:Thymeleaf模板引擎常用总结 https://www.yuejiaxmz.com/news/view/439731

相关内容

移动应用引擎体验
规则引擎原理与实战:规则引擎在物联网(IoT)中的应用
人手一个AI健康助手!大模型时代的搜索引擎「蜕变」
5.JAVA程序设计
火山引擎
2022年卫生检查总结模板通用5篇参考
清洁校园的活动总结模板(通用15篇)
【经验分享】高效使用搜索引擎的几个方法
引擎保养小贴士!
宝马汽车引擎盖怎么打开?引擎盖打开方法及日常保养小技巧

随便看看