Thymeleaf 模板 springboot集成使用

一.Thymeleaf是什么？

简单说， Thymeleaf 是一款用于渲染XML/XHTML/HTML5内容的模板引擎，类似我之前用过的FreeMarker 。由于它支持 html 原型，然后在 html 标签里

通过增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

优势：1.Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言。

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

1.添加依赖。

2.html 页面需添加：

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

二.基本使用.

1.定义和引用模板

日常开发中，我们经常会将导航栏，页尾，菜单等部分提取成模板供其它页面使用。

在Thymeleaf 中，我们可以使用th:fragment属性来定义一个模板。

我们可以新建一个简单的页尾模板，如：/WEB-INF/templates/footer.html，内容如下：

上面定义了一个叫做copyright的片段，接着我们可以使用th:include或者th:replace属性来使用它：

th:include 和 th:replace区别

th:include 是加载模板的内容，而th:replace则会替换当前标签为模板中的标签

三.其他常见，字面量，对象，集合等的应用

后台存入了测试数据

@PostMapping("/greet")
public ModelAndView greetingSubmit(@ModelAttribute(value="greeting") Greeting greeting) {
    ModelAndView mov =  new ModelAndView("result");
    greeting.setNow(new Date());
    greeting.setRole("admin");
    ArrayList<Greeting> list = new ArrayList<>();
    list.add(greeting);
    list.add(greeting);
    list.add(greeting);
    mov.addObject("greeting",greeting);
    mov.addObject("name","bin");
    mov.addObject("execMode","execMode");
    mov.addObject("list",list);
    return mov;
}

页面的获取方法

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Handling Form Submission</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Result</h1>
<!--/*@thymesVar id="greeting" type="com.zto.quickstart.model.Greeting"*/-->

 <!--bean值替换 -->
 <div th:object="${greeting}">
    <p th:text="'id: ' + *{id}"/>
    <p th:text="'content: ' + *{content}"/>

    <!--日期格式 -->
 <p th:text="'content: ' + ${#dates.format(greeting.now, 'yyyy-MM-dd')}">2017-12-01</p>

    <!--字符串替换 -->
 <span th:text="'Welcome , '+ ${name} +'!'"/>

    <!--运算符/条件-->
 <p th:if="${greeting.id} &gt; 1" />
    <p th:text ="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"/>

    <!--Thymeleaf同样支持多路选择Switch结构-->
 <div th:switch="${greeting.role}">
        <p th:case="'admin'">User is admin</p>
        <p th:case="#{roles.manager}">User is a manager</p>
        <!--默认属性default可以用*表示-->
 <p th:case="*">这里的内容都会输出</p>
    </div>
    <table>
        <tr>
            <th>id</th>
            <th>content</th>
            <th>now</th>
        </tr>
        <tr th:each="list : ${greeting}">
            <td th:text="${greeting.id}">Onions</td>
            <td th:text="${greeting.content}">2.41</td>
            <td th:text="${#dates.format(greeting.now, 'yyyy-MM-dd')}">8</td>
        </tr>
    </table>

        <h4>Thymeleaf提供了一系列Utility对象（内置于Context中），可以通过#直接访问</h4>
        <!--<h5>#dates日期日期格式化</h5>-->
 <!--${#dates.format(date, 'dd/MMM/yyyy HH:mm')}-->
 <!--${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}-->
 <!--${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}-->
 <!--${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}-->

 <!--date-->
 <h5>#dates创建日期</h5>
        <p th:text="${#dates.createNow()}"></p>
        <p th:text="${#dates.createToday()}"></p>

        <!--String-->
 <h5>String判断字符串是否为空</h5>
        <p th:text="${#strings.isEmpty(name)}"></p>
        <h5>String判断内对象是否为空</h5>
        <p th:text="${#strings.listIsEmpty(list)}"></p>
        <!--${#strings.arrayIsEmpty(nameArr)}-->
 <!--${#strings.setIsEmpty(nameSet)}-->
 <p th:text="${#strings.startsWith(name,'bin')}"></p>
        <p th:text="${#strings.endsWith(name,'bin')}"></p>
        <h5>String判断内长度</h5>
        <p th:text="${#strings.length(list)}"></p>
        <h5>String判断equals</h5>
        <p th:text="${#strings.equals(name)}"></p>

        <a href="/greeting">Submit another message</a>

        <div th:include="footer :: copyright"></div>
    </div>

</body>

页面展示的效果

四.表单中的使用

</head>
<body>
<h4>测试表单</h4>
<!--/*@thymesVar id="greeting" type="com.zto.quickstart.model.Greeting"*/-->
<!--/*@thymesVar id="Greeting" type=""*/-->
<form th:action="@{/greet}" th:object="${greeting}" method="post" th:method="post">
    <!--bean值替换 -->
 <input type="text" th:field="${greeting.id}"/>
    <input type="text" th:field="*{content}"/>
    <input type="submit"/>

</form>
</body>
</html>

其中th:object="${greeting}"指定了对象属性绑定。与后台控制器接受的对象一致，如下：

@PostMapping("/greet")
public ModelAndView greetingSubmit(@ModelAttribute(value="greeting") Greeting greeting) {
   ...
    return mov;
}