Thymeleaf-模板引擎

Posted 2020-10-29 烟丶雨下整晚

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Thymeleaf-模板引擎相关的知识，希望对你有一定的参考价值。

一，Thymeleaf 简介

Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

1，Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

2，Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

3.，Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

二，Hello Thymeleaf实例

1，创建Maven项目

具体步骤参照：Eclipse中创建Maven Web项目

2，添加Spring的依赖

具体步骤参考：Maven创建Spring MVC项目

3，修改pom.xml文件，加入Thymeleaf

<!-- thymeleaf模板引擎 -->
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>2.1.4.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>2.1.4.RELEASE</version>
</dependency>

4，在Spring MVC配置文件中添加thymeleaf视图解释器

<!-- 视图解析器 -->
<!-- 使用thymeleaf解析  -->
<bean id="templateResolver"
    class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
    <property name="prefix" value="/WEB-INF/views/" />
    <property name="suffix" value=".html" />
    <property name="templateMode" value="HTML5" />
    <!-- 缓存-->
    <property name="cacheable" value="false"/>
</bean>
<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
    <property name="templateResolver" ref="templateResolver" />
</bean>
 
<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
    <property name="templateEngine" ref="templateEngine" />
    <!--解决中文乱码-->  
    <property name="characterEncoding" value="UTF-8"/>
</bean>

关闭Thymeleaf页面的缓存，可以让对页面的改动及时反映到视图中。

5，创建一个页面

html页面标签中引入如下：

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

具体html页面如下：

<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>index</title>
</head>
<body>
    Hello Thymeleaf!
</body>
</html>

6，创建一个Controller

@Controller
@RequestMapping("/index")
public class IndexController {
    
    @RequestMapping("returnString")
    public String returnString(){
        return "index";
    }
}

7，运行项目访问IndexController

三，页面参数获取/回显

1，创建一个pojo

public class Person {
    private int id;
    private String name;
    private String addrs;
    public Person(int id, String name, String addrs) {
        super();
        this.id = id;
        this.name = name;
        this.addrs = addrs;
    }
    public Person() {
        super();
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getAddrs() {
        return addrs;
    }
    public void setAddrs(String addrs) {
        this.addrs = addrs;
    }
    @Override
    public String toString() {
        return "Person [id=" + id + ", name=" + name + ", addrs=" + addrs + "]";
    }
}

2，创建提交表单页面person.html

<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>person</title>
<link href="css/bootstrap.css" rel="stylesheet"/>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
    <form th:action="@{savePerson}" th:method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label">id</label> 
            <div class="col-sm-10">
                <input type="text" class="form-control" name="id" placeholder="id" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">名称</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="name" placeholder="name" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">地址</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="addrs" placeholder="addrs" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">提交</button>
            </div>
        </div>
    </form>
</body>
</html>

解释：

th:action属性	表示其值代替静态页面的action的值。等价action=\'/savePerson\'。
th:method属性	表示其值将代替静态页面的method的值。等价method=\'post\'。

3，创建回显页面return.html

<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>return</title>
<link href="css/bootstrap.css" rel="stylesheet"/>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
    <!-- from表单获取提交过来的数据 -->
    <h3>from表单获取提交过来的数据</h3>
    <form th:action="@{savePerson}" th:method="post" th:object="${person}">
        <div class="form-group">
            <label class="col-sm-2 control-label">id</label> 
            <div class="col-sm-10">
                <input type="text" class="form-control" name="id" placeholder="id" th:value="*{id}"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">名称</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="name" placeholder="name" th:value="*{name}"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">地址</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="addrs" placeholder="addrs" th:value="*{addrs}"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">提交</button>
            </div>
        </div>
    </form>
    <!-- 表格获取提交过来的数据 -->
    <h3>表格获取提交过来的数据 </h3>
    <table class="table" th:object="${person}">
      <tr>
        <td>id</td>
        <td>name</td>
        <td>addrs</td>
      </tr>
      <tr>
        <td th:text="${person.id}"></td>
        <td th:text="${person.name}"></td>
        <td th:text="${person.addrs}"></td>
      </tr>
    </table>
</body>
</html>

解释：

th:object属性	表示有一个属性名为"person"的Java bean传递到页面上来。可以通过表达式*{fieldName}才能取得其值。
th:value属性	表示取得Person实例中的属性值，也就是通过调用Java bean的get方法获得。等价于标签value=\'xxx\'
th:text属性	文本显示。等价于标签text=\'xxx\'

4，创建PersonController

@Controller
public class PersonController {
    @RequestMapping
    public String returnString(){
        return "person";
    }
    
    @RequestMapping("/savePerson")
    public String savePerson(Model Model ,Person person){
        Model.addAttribute("person", person);
        return "return";
    }
}

运行访问：http://localhost:8081/Thymeleaf/，点击提交

运行结果：

四，基本表达式

1，${}

变量表达式（美元表达式），用于访问容器上下文环境中的数据，功能与jstl中${}的相同。

<td th:text="${person.id}"></td>
<td th:text="${person.name}"></td>
<td th:text="${person.addrs}"></td>

2，*{}

选择表达式（星号表达式），获取选定对象里的数据域（th:object属性用于绑定对象）。

选择表达式与变量表达式的区别：

选择表达式计算的是选定的对象，而不是整个环境变量映射。也就是：只要是没有选择的对象，选择表达式与变量表达式的语法是完全一样的。

<!-- from表单获取提交过来的数据 -->
<h3>from表单获取提交过来的数据</h3>
<form th:action="@{savePerson}" th:method="post" th:object="${person}">
    <div class="form-group">
        <label class="col-sm-2 control-label">id</label> 
        <div class="col-sm-10">
            <input type="text" class="form-control" name="id" placeholder="id" th:value="*{id}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">名称</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="name" placeholder="name" th:value="*{name}"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">地址</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="addrs" placeholder="addrs" th:value="*{addrs}"/>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">提交</button>
        </div>
    </div>
</form>

3，#{}

没明白怎么使用！自己测试不出来。希望看见的大佬能指点迷津。

4，@{}

超链接url表达式。

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

五，常用属性

1，th:action

定义后台控制器路径，类似<form>标签的action属性。
2，th:each

对象遍历，功能类似jstl中的<c:forEach>标签

Controller

@RequestMapping("/listPerson")
public String listPerson(Model Model){
    List<Person> list = new ArrayList<Person>();
    list.add(new Person(1, "Zender", "Shanghai"));
    list.add(new Person(2, "Zender2", "Shanghai2"));
    list.add(new Person(3, "Zender3", "Shanghai3"));
    Model.addAttribute("listPerson", list);
    return "listPerson";
}

页面

<head>
<meta charset="UTF-8"/>
<title>listPerson</title>
<link th:href="@{/css/bootstrap.css}" rel="stylesheet"/>
<script th:src="@{/js/jquery-3.2.1.js}"></script>
<script th:src="@{/js/bootstrap.js}"></script>
</head>
<body>
    <h3>each循环</h3>
    <table class="table">
      <tr>
        <td>id</td>
        <td>name</td>
        <td>addrs</td>
      </tr>
      <tbody th:each="person,personStat:${listPerson}">
          <tr>
            <td th:text="${person.id}"></td>
            <td th:text="${person.name}"></td>
            <td th:text="${person.addrs}"></td>
          </tr>
      </tbody>
    </table>
</body>
</html>

personStat称作状态变量，属性有：

index	当前迭代对象的index（从0开始计算）。
count	当前迭代对象的index(从1开始计算)。
size	被迭代对象的大小。
current	当前迭代变量。
even/odd	布尔值，当前循环是否是偶数/奇数（从0开始计算）。
Spring MVC 3.2 Thymeleaf Ajax 片段认识模板引擎-Thymeleaf 认识模板引擎-Thymeleaf 认识模板引擎-Thymeleaf 认识模板引擎-Thymeleaf ❤️SpringBoot模板引擎❤️——Thymeleaf (c)2006-2024 SYSTEM All Rights Reserved IT常识