JAVA入门[22]—thymeleaf

一、thymeleaf官网

官网：https://www.thymeleaf.org/index.html

doc：https://www.thymeleaf.org/documentation.html

二、springmvc+thymeleaf从这里开始

1.修改pom.xml，引入相关依赖。

<dependencies>

        <dependency>

            <groupId>junit</groupId>

            <artifactId>junit</artifactId>

            <version>3.8.1</version>

            <scope>test</scope>

        </dependency>

        <!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->

        <dependency>

            <groupId>org.thymeleaf</groupId>

            <artifactId>thymeleaf</artifactId>

            <version>3.0.2.RELEASE</version>

        </dependency>

        <!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf-spring4 -->

        <dependency>

            <groupId>org.thymeleaf</groupId>

            <artifactId>thymeleaf-spring4</artifactId>

            <version>2.1.2.RELEASE</version>

        </dependency>

</dependendies>

2.xml方式配置thymeleaf视图解析器：

<!-- Thymeleaf View Resolver - implementation of Spring's ViewResolver interface -->

    <bean id="viewResolver" class="org.thymeleaf.spring4.view.ThymeleafViewResolver">

        <property name="templateEngine" ref="templateEngine" />

        <property name="characterEncoding" value="UTF-8" />

    </bean>

    <!-- Thymeleaf Template Engine (Spring4-specific version) -->

    <bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">

        <property name="templateResolvers">

            <set>

                <ref bean="templateResolver" />

            </set>

        </property>

    </bean>

    <!-- Thymeleaf Template Resolver -->

    <bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">

        <property name="prefix" value="/WEB-INF/templates/" />

        <property name="templateMode" value="HTML" />

        <property name="suffix" value=".html"></property>

        <property name="characterEncoding" value="UTF-8"></property>

    </bean>

3.在controller中为变量name赋值。

@RequestMapping(value="/index")

public String index(Model model){

    model.addAttribute("name","world");

    return "index.html";

}

4.在index.html中使用thymeleaf语法读取变量name的值。

<!DOCTYPE html>

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

<head>

    <title>Title</title>

</head>

<body>

<div>your name is:<span th:text="${name}"></span></div>

</body>

</html>

注意：需要修改html节点，添加xmlns:th="http://www.thymeleaf.org"

三、thymeleaf常见问题小结

1.如何添加链接：

<a th:href="@{/category/index}">首页</a>

<a class="btn btn-xs btn-default" th:href="@{/role/edit(roleId=${r.roleId})}">编辑</a>

2.表单绑定示例：

<form method="post" th:object="${cate}" th:action="@{/category/save}" enctype="multipart/form-data">

        <table>

            <tr>

                <td>id:</td>

                <td><input type="text" th:field="*{cateId}"></td>

            </tr>

            <tr>

                <td>name:</td>

                <td><input type="text" th:field="*{cateName}"></td>

            </tr>

            <tr>

                <td>file:</td>

                <td>

                    <input type="file" accept="image/jpeg,image/png,image/jpg" name="picture">

                </td>

            </tr>

            <tr>

                <td colspan="2">

                    <input type="submit" value="提交">

                </td>

            </tr>

        </table>

    </form>

3.展示文本

<td th:text="${r.name}"></td>

如何替换子字符串

<span th:text="|welcome,${name}|"></span>

如何转换日期格式

${#dates.format(v.AddDate,'yyyy-MM-dd HH:mm:ss')}

4.如何在js读取后台数据

var url="[[${url}]]";

5.条件表达式

<td th:text="(${r.deleteFlag}==0)?'正常':'删除'"></td>

6.thymeleaf如何实现switch选择

<td th:switch="${r.type}">

    <span th:case="page">页面</span>

    <span th:case="module">模块</span>

    <span th:case="*">其他</span>

</td>

注意：默认值用th:case="*"

7.th:object语法

首先在controller为对象赋值

@Controller

@RequestMapping("/demo")

public class DemoController {

    @RequestMapping("/index")

    public String index(Model model){

        OrgResource resource=new OrgResource();

        resource.setId("11");

        resource.setName("test");

        model.addAttribute("resource",resource);

        return "demo/index.html";

    }

}

使用*{}语法可以方便读取th:object对象的属性。

<div th:object="${resource}">

    <div th:text="*{id}"></div>

    <div th:text="*{name}"></div>

</div>

8.迭代 th:each

<th:block th:each="r,iterstat:${resources}">

    <tr th:class="${iterstat.odd}?'odd'">

        <td th:text="${r.orderNo}"></td>

        <td th:switch="${r.type}">

            <span th:case="page">页面</span>

            <span th:case="module">模块</span>

        </td>

        <td th:text="(${r.deleteFlag}==0)?'正常':'删除'"></td>

        <td th:switch="${r.deleteFlag}">

            <span th:case="0"><a>删除</a></span>

            <span th:case="1"><a>恢复</a></span>

        </td>

    </tr>

</th:block>

9.如何使用Fragment layout布局

首先新建layout.html作为布局模板。

<!DOCTYPE html>

<html lang="zh-CN" xmlns:layout="http://www.thymeleaf.org" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

……

<body>

<div layout:fragment="content"></div>

</body>

</html>

然后在index.html中使用layout，并用页面具体内容替代content fragment。

<!DOCTYPE html>

<html layout:decorator="task/layout" xmlns:layout="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div layout:fragment="content">

  测试页面

</div>

</body>

</html>

第一次使用layout布局的时候，调试了好半天就是不生效。后来找到了原因，dependency需要添加：

<dependency>

    <groupId>nz.net.ultraq.thymeleaf</groupId>

    <artifactId>thymeleaf-layout-dialect</artifactId>

    <version>${nz.net.ultraq.thymeleaflayout-version}</version>

</dependency>

10.如何用if条件动态调整form action

<form th:action="@{/Video/{path}(path=${isCollect}?'CollectVideoList':'VideoList')}">

11.thymeleaf回显富文本编辑器内容

将th:text换成th:utext即可。

<script type="text/plain" id="content" name="content" th:utext="${article.content}"></script>