SpringBoot整合Thymeleaf

Thymeleaf是新一代的java模板引擎，类似于FreeMarker。官网：https://www.thymeleaf.org。

1.Thymeleaf入门案例

1）导入依赖

     <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

2）编写页面

在resources/templates目录下新建index.html，内容如下

<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf模板</title>
</head>
<body>
    <div th:text="${hello}"></div>
</body>
</html>

3）配置thymeleaf

在application.properties中添加如下配置

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#为便于测试,在开发时需要关闭缓存
spring.thymeleaf.cache=false

4）添加视图解析器

新建IndexController，内容如下

package com.zys.springboottestexample.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@RequestMapping
@Controller
public class IndexController {

    @GetMapping("/index")
    public String index(Model model) {
        model.addAttribute("hello", "你好");
        return "index";
    }
}

5）启动项目，访问localhost:8080/index即可访问到模板页面。

2.基础语法

2.2.1命名空间

要使用 Thymeleaf ，则要先要加入依赖，然后在模板文件中引用命名空间，引入后才会进行模板标签的渲染。

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

2.2.2常用标签

（1）th:text

用于显示控制器传入的指定属性的值，如果值不存在，也可以指定默认值。下面的代码就是显示传入的name的值

<p th:text="${name}"></p>

指定默认值，会在name为null时显示

<p th:text="${name1}?:'张三'"></p>

当然也可以进行字符串的拼接

<p th:text="'欢迎登陆，'+${name}+'!'"></p>

（2）th:object

用于显示后台传入的对象

<p th:text="${user}"></p>
<p th:text="${user.age}"></p>

（3）th:action

指定表单的提交地址，必须使用@{}格式，在里面指定登录的请求地址

    <form th:action="@{/api/login}" method="post">
        <input type="text" name="username"/>
        <input type="password" name="password"/>
        <button type="submit">提交</button>
    </form>

（4）th:value

给文本框设置默认值

<input type="text" name="sex" th:value="${sex}">

对于textarea，设置默认值时，不能使用th:value，需要使用th:tex。th:value不能回显，不清楚原因！

<textarea  name="remark" th:text="${remark}">

2.2.3 URL写法

Thymeleaf 是通过语法＠｛…｝来处理 URL 的，如src、href、action

<form th:action="@{/api/login}" method="post">...</form>

<a th:href="@{http://www.baidu.com}">点我去百度</a>

<img th:src="@{img.png}"/>

2.2.4条件求值

Thymeleaf 通过“th:if”和“th:unless ”属性进行条件判断。“th:if”在条件成立时显示，“th:unless”在条件不成立时显示。

<div th:if="${num>10}">值大于10</div>
<div th:unless="${num>10}">值不大于10</div>

2.2.5switch-case分支

th:switch、th:case条件分支，类似于java的switch-case。

    <div th:switch="${role}">
        <p th:case="1">系统管理员</p>
        <p th:case="2">企业管理员</p>
        <p th:case="3">业务员</p>
        <p th:case="4">普通用户</p>
    </div>

2.2.6运算符

1）算数运算符

算数运算符包含基本的运算符，+，-，*，/，%等，一般使用th:text进行展示

<p th:text="3+4"></p>
<p th:text="11%3"></p>

2）比较运算符

运算符	说明	运算符	说明
eq	等于	ne	不等于
gt	大于	ge	大于或等于
lt	小于	le	小于或等于

一般结合th:if使用。

<p th:if="${role1 eq 'admin'}">admin</p>
<p th:if="${role1 eq 'vip'}">vip</p>

3）是否为空

一般结合th:if使用。

<p th:if="${name}!=null">不为空</p>
<p th:if="${name}==null">为空</p>

2.2.7公用对象

Thymeleaf 提供了一系列公用（ utility ）对象，可以通过“＃”直接使用。

1）格式化时间

<p th:text="${#dates.format(nowDate,'yyyy-MM-dd HH:mm:ss')}"></p>

nowDate是后台传递的Date类型的时间，通过new Date()获得

2）判断字符串是否为空

如果为空，则结果是true，否则结果是true。一般结合th:text使用

<p th:text="${#strings.isEmpty(name)}"></p>

3）判断字符串是否包含

如果包含，则结果是true，否则结果是false，会区分大小写。一般结合th:text使用

<p th:text="${#strings.contains(name,'hello')}"></p>

3.循环遍历

遍历使用th:each标签。通过 th:each="Object: ${Objects}”进行遍历，遍历后使用Object展示，Objects是后台传递过来的值。

2.3.1遍历对象

遍历对象很简单，指定对象的属性即可。

<div th:each="entity:${user}">
    <span th:text="${entity.name}"></span>
    <span th:text="${entity.age}"></span>
</div>

2.3.2遍历列表list

遍历list以对象方式说明，若存储的是单个值的元素，可参考数组的遍历。

<div th:each="item:${userList}">
    <span th:text="${item.name}"></span>
    <span th:text="${item.age}"></span>
</div>

2.3.3遍历数组

<div th:each="item:${arr}">
    <p th:text="${item}"></p>
</div>

2.3.4遍历map

遍历map时，使用key获取键值，使用value获取对应的值。

<div th:each="item:${map}">
    <p><span th:text="${item.key}"/>:<span th:text="${item.value}"/></p>
</div>

4.处理公共代码块

一个网页的结构基本可以分为上（ header）、中（ body ）、下（ footer）个部分般情况下， header和 footer的信息在各个页面都会重复显示，如果每个页面都复制一份代码则太麻烦了。使用"th:fragment"标记或声明是重复的代码块，用"th:include"或"th:replace "标签根据fragment 值来调用。

1）标记重复代码块

在templates下新建header.html，代码如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>header</title>
</head>
<body>
    <div th:fragment="header" class="header">
        我是header信息
    </div>
</body>
</html>

2）调用

在templates下新建index2.html，代码如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index2</title>
</head>
<body>
    <div th:replace="header"></div>
    <div>我是内容</div>
</body>
</html>

上述代码是通过replace进行调用的，也可以使用include进行调用

<div th:include="header"></div>

这两种方式都可以，但是它们是有区别的。

3）区别

th:replace替换当前标签为模板中的标签。

th:incude把整个模板内容覆盖当前标签内部。

posted @ 2021-07-08 15:43 钟小嘿阅读(344) 评论(0) 编辑收藏举报

刷新页面返回顶部

笨兮兮