Thymeleaf模板引擎

模板引擎

JSP、Velocity、Freemarker、Thymeleaf

SpringBoot推荐的Thymeleaf；语法更简单，功能更强大；

与其它模板引擎相比，Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用

1、引入thymeleaf；

官方文档：https://docs.spring.io/spring-boot/docs/1.5.14.RELEASE/reference/htmlsingle/#howto-use-thymeleaf-3

thymeleaf‐layout‐dialect：https://github.com/ultraq/thymeleaf-layout-dialect/releases

<dependency>        
<groupId>org.springframework.boot</groupId>            
<artifactId>spring‐boot‐starter‐thymeleaf</artifactId>            
           2.1.6  
</dependency>        
切换thymeleaf版本
<properties>
<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>        
<!‐‐ 布局功能的支持程序  thymeleaf3主程序  layout2以上版本 ‐‐>        
<!‐‐ thymeleaf2   layout1‐‐>        
<thymeleaf‐layout‐dialect.version>2.2.2</thymeleaf‐layout‐dialect.version>        
  </properties>

Spring Boot推荐使用Thymeleaf、Freemarker等后现代的模板引擎技术；一但导入相关依赖，会自动配置ThymeleafAutoConfiguration、FreeMarkerAutoConfiguration。

2、Thymeleaf使用

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING = Charset.forName("UTF‐8");    
private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html");    
public static final String DEFAULT_PREFIX = "classpath:/templates/";    
public static final String DEFAULT_SUFFIX = ".html";    
   //

只要我们把HTML页面放在classpath:/templates/，thymeleaf就能自动渲染；使用：

1、导入thymeleaf的名称空间

<html lang="en" xmlns:th="http://www.thymeleaf.org">

2、使用thymeleaf语法；

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF‐8">
    <title>Title</title>
</head>
<body>
    <h1>成功！</h1>
    <!‐‐th:text 将div里面的文本内容设置为 ‐‐>
    <div th:text="${hello}">这是显示欢迎信息</div>
</body>
</html>

Thymeleaf语法：

3、语法规则

参考官方文档：https://www.thymeleaf.org/

1）、th:text；改变当前元素里面的文本内容；

th：任意html属性；来替换原生属性的值

表达式：
– #{...}：国际化消息

– ${…}：获取变量值；OGNL；

– *{…}：当前对象/变量取值
– @{…}：url表达式
– ~{…}：片段引用
– 内置对象/共用对象：
• 判断/遍历：
– th:if
– th:unless
– th:each

– th:switch、th:case

th:属性

用户姓名：<input th:id="${user.name}" th:name="${user.name}" th:value="${user.name}"/>
用户年龄：<input th:value="${user.age}"/>
用户生日：<input th:value="${user.birthday}"/>
用户生日：<input th:value="${#dates.format(user.birthday, 'yyyy-MM-dd')}"/>

<div th:object="${user}">
    用户姓名：<input th:id="*{name}" th:name="*{name}" th:value="*{name}"/>
    <br/>
    用户年龄：<input th:value="*{age}"/>
    <br/>
    用户生日：<input th:value="*{#dates.format(birthday, 'yyyy-MM-dd hh:mm:ss')}"/>
    <br/>
</div>

<a href="" th:href="@{http://www.zhou.com}">网站地址</a>

<script th:src="@{/static/js/test.js}"></script>

~{...}：片段引用表达式
<div th:insert="~{commons :: main}">...</div>

<span th:text="${user.desc}">abc</span>
<span th:utext="${user.desc}">abc</span>

<form th:action="@{/th/postform}" th:object="${user}" method="post" th:method="post">
    <input type="text" th:field="*{name}"/>
    <input type="text" th:field="*{age}"/>
    <input type="submit"/>
</form>

<select>
     <option >选择框</option>
     <option th:selected="${user.name eq 'lee'}">lee</option>
     <option th:selected="${user.name eq 'zhou'}">zhou</option>
     <option th:selected="${user.name eq 'LeeCX'}">LeeCX</option>
</select>

<div th:if="${user.age} == 18">十八岁的天空</div>
<div th:if="${user.age} gt 18">你老了</div>
<div th:if="${user.age} lt 18">你很年轻</div>
<div th:if="${user.age} ge 18">大于等于</div>
<div th:if="${user.age} le 18">小于等于</div>

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>年龄备注</th>
        <th>生日</th>
    </tr>
    <tr th:each="person:${userList}">
        <td th:text="${person.name}"></td>
        <td th:text="${person.age}"></td>
        <td th:text="${person.age gt 18} ? 你老了 : 你很年轻">18岁</td>
        <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd hh:mm:ss')}"></td>
    </tr>
</table>

<div th:switch="${user.name}">
  <p th:case="'lee'">lee</p>
  <p th:case="#{roles.manager}">普通管理员</p>
  <p th:case="#{roles.superadmin}">超级管理员</p>
  <p th:case="*">其他用户</p>
</div>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>成功！</h1>
<!--th:text 将div里面的文本内容设置为 -->
<div id="div01" class="myDiv" th:id="${hello}" th:class="${hello}" th:text="${hello}">这是显示欢迎信息</div>
<hr/>
<div th:text="${hello}"></div>
<div th:utext="${hello}"></div><!--不会转义-->
<hr/>

<!-- th:each每次遍历都会生成当前这个标签： 输出3个h4的user内容 -->
<h4 th:text="${user}"  th:each="user:${users}"></h4>
<hr/>
<h4>
     <span th:each="user:${users}"> [[${user}]] </span><!--行内式输出，输出在一行-->
</h4>

[[${user}]]：和th:text一样，[(${user})]：和th:utext一样，不会转义

<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>

<h1 class="h3 mb‐3 font‐weight‐normal" th:text="#{login.tip}">Please signin</h1> 
<input type="checkbox" value="remember‐me"/> [[#{login.remember}]]           
<label class="sr‐only" th:text="#{login.username}">Username</label>

<input class="form‐check‐input" type="radio" name="gender" value="0"
th:checked="${emp!=null}?${emp.gender==0}"

<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn‐sm btn‐danger
deleteBtn">删除</button><!--自定义属性值-->

模板引擎

猜你喜欢