11_Spring Boot 集成Thymeleaf模板

已于 2022-11-22 21:01:20 修改
阅读量2.1k 收藏 10
点赞数 4
分类专栏： # SpringBoot 文章标签： spring boot java 后端
于 2022-07-05 18:22:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45037155/article/details/125547433
版权

一、认识Thymeleaf

Thymeleaf是一个流行的模板引擎，该模板引擎采用Java语言开发

模板引擎是一个技术名词，是跨领域跨平台的概念，在Java语言体系下有模板引擎，在C#、PHP语言体系下也有模板引擎，甚至在JavaScript中也会用到模板引擎技术，Java生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl（国产） 等。

Thymeleaf 对网络环境不存在严格的要求，既能用于Web环境下，也能用于非Web环境下。在非Web环境下，他能直接显示模板上的静态数据；在Web环境下，它能像Jsp一样从后台接收数据并替换掉模板上的静态数据。它是基于HTML的，以HTML标签为载体，Thymeleaf要寄托在HTML标签下实现。

Spring Boot 集成了Thymeleaf模板技术，并且Spring Boot官方也推荐使用Thymeleaf来替代JSP技术，Thymeleaf是另外的一种模板技术，它本身并不属于Spring Boot，Spring Boot只是很好地集成这种模板技术，作为前端页面的数据展示，在过去的Java Web开发中，我们往往会选择使用Jsp去完成页面的动态渲染，但是jsp需要翻译编译运行，效率低

Thymeleaf的官方网站：

Thymeleafhttp://www.thymeleaf.org

Thymeleaf官方手册：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.htmlhttps://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

二、Spring Boot集成Thymeleaf

1.创建Spring Boot项目,添加web和Thymeleaf依赖

（1）添加web依赖 

（2）添加Thymeleaf依赖  

（3）按照这种方式创建后，pom.xml文件下会自动添加如下依赖 

2. 在Spring boot的核心配置文件application.properties中对Thymeleaf进行配置

server.port=9012
server.servlet.context-path=/012-springboot-thymeleaf

3. 创建ThymeleafControlle去映射到模板页面（和SpringMVC基本一致）

在com.suke.springboot.web包下创建ThymeleafController类

@Controller
public class ThymeleafController {

    /*
     * http://localhost:9012/012-springboot-thymeleaf/springboot/thymeleaf/index
     * */
    @RequestMapping(value = "/springboot/thymeleaf/index")
    public String index(HttpServletRequest request, Model model) {

        model.addAttribute("data", "恭喜您，SpringBoot集成Thymeleaf成功");

        return "index";
    }
}

4. 在src/main/resources的templates下新建一个index.html页面用于展示数据

注意：Springboot使用thymeleaf作为视图展示，约定将模板文件放置在src/main/resource/templates目录下，静态资源放置在src/main/resource/static目录下

HTML页面的<html>元素中加入以下属性：

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot集成Thymeleaf</title>
</head>
<body>
<!--Thymeleaf前端框架以Html为载体-->

<span th:text="${data}"></span>
<span th:text="${data}"></span>
<p th:text="${data}"></p>
<div th:text="${data}"></div>
</body>
</html>

问题：data 爆红

解决办法一：通过Alt+Enter进行自动生成的注释，补全IDEA；如果不加，IDEA将会报错cannot reslove

解决办法二：通过Alt+Enter选择Edit inspection profile setting修改

可以将error改成Warning，或者将√取消掉

5. 启动程序，浏览器访问

（1）页面展示

（2）右键->查看页面源代码

三、Thymeleaf的表达式

1. 标准变量表达式

注意：th:text="" 是Thymeleaf的一个属性，用于文本的显示

 语法： ${...}

标准变量表达式用于访问容器（tomcat）上下文环境中的变量，功能和EL中的 ${} 相同。Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取Controller中model其中的数据${age} 

（1）创建实体User类

在com.suke.springboot.model包下创建User实体类

public class User implements Serializable {

    private Integer id;

    private String nick;

    private String phone;

    private String address;

    public User() {
    }

    public User(Integer id, String nick, String phone, String address) {
        this.id = id;
        this.nick = nick;
        this.phone = phone;
        this.address = address;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getNick() {
        return nick;
    }

    public void setNick(String nick) {
        this.nick = nick;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }
}

（2）创建ThymeleafController类

在ThymeleafController中添加user方法中，向model放入User对象

    /*
     * http://localhost:9012/012-springboot-thymeleaf/thymeleaf/expression/user
     * */
    @RequestMapping(value = "/thymeleaf/expression/user")
    public String user(Model model) {
        User user = new User(100, "何幸福", "21200107226", "苏州科技大学");
        model.addAttribute("user", user);
        return "user";
    }

（3） 在src/main/resources/templates在创建user.html页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf标准变量表达式</title>
</head>
<body>

<h2>Thymeleaf以HTML为载体展示数据</h2>
<h2>展示用户信息：</h2>
<span th:text="${user}"></span><br>
<span th:text="${user.id}"></span><br>
<span th:text="${user.nick}"></span><br>
<span th:text="${user.getPhone()}"></span><br>
<span th:text="${user.getAddress()}"></span><br>

</body>
</html>

（4）启动程序，浏览器访问 

2. 选择变量表达式（了解，不推荐使用）

语法：*{...}

  • 选择变量表达式，也叫星号变量表达式，使用 th:object 属性来绑定对象
  • 选择表达式首先使用th:object来绑定后台传来的User对象，然后使用 * 来代表这个对象，后面 {} 中的值是此对象中的属性。
  • 选择变量表达式 *{...} 是另一种类似于标准变量表达式 ${...} 表示变量的方法
  • 选择变量表达式在执行时是在选择的对象上求解，而${...}是在上下文的变量Model上求解，这种写法比标准变量表达式繁琐，只需要大家了解即可

（1）user.html页面

<h2>选择变量表达：又叫做*号表达式</h2>
<h3 style="color: red">用户对象仅在div范围内有效</h3>
<div th:object="${user}">
    <span th:text="*{id}"></span><br/>
    <span th:text="*{nick}"></span><br/>
    <span th:text="*{phone}"></span><br/>
    <span th:text="*{address}"></span><br/>
</div>

（2）启动程序，浏览器访问 

3. 标准变量表达式和选择变量表达式

标准变量表达式和选择变量表达式可以混合一起使用, 也可以不使用 th:object 进行对象的选择，而直接使用 *{...} 获取数据

（1）user.html页面

<h3 style="color: red">2.选择变量表达式其它用法展示数据</h3>
<div>
    <span th:text="*{user.id}"></span><br/>
    <span th:text="*{user.nick}"></span><br/>
    <span th:text="*{user.phone}"></span><br/>
    <span th:text="*{user.address}"></span><br/>
</div>

（2）启动程序，浏览器访问 

4. URL表达式

语法：@{...}

主要用于链接、地址的展示，可用于<script src="...">、<link href="...">、<a href="...">、<form action="...">、<img src="">等，可以在URL路径中动态获取数据

（1）在ThymeleafController类中添加url方法

    /*
     * http://localhost:9012/012-springboot-thymeleaf/thymeleaf/expression/url
     * */
    @RequestMapping(value = "/thymeleaf/expression/url")
    public String url(Model model) {
        User user = new User(100, "何幸福", "21200107226", "苏州科技大学");
        model.addAttribute("user", user);
        return "url";
    }

（2）在url.html页面中加入如下代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>URL表达式</title>
</head>
<body>
<!--
    绝对路径：协议开头  盘符  /
-->
<a href="http://www.baidu.com">baidu</a>
<a href="D:\IT\Java\IdeaProjects\Suke2\06-SpringBoot\012-springboot-thymeleaf\src\main\resources\templates">index1</a>
<a href="/012-springboot-thymeleaf/springboot/thymeleaf/index">index2</a>

<hr>

<a th:href="@{/012-springboot-thymeleaf/thymeleaf/expression/user}">user1</a>
<a th:href="@{/thymeleaf/expression/user}">user2</a>
<a th:href="@{/thymeleaf/expression/user?name=zsf&age=120}">user3</a>
<a th:href="@{'/thymeleaf/expression/user?name='+${user.nick}+'&age=120'}">user4</a>
<a th:href="@{/thymeleaf/expression/user(name=${user.nick},age=110)}">user5</a>

<hr>

<!--
相对路径：相对当前资源所在目录 计算出来的路径
① http://localhost:9012/012-springboot-thymeleaf/thymeleaf/expression/url
② http://localhost:9012/012-springboot-thymeleaf/thymeleaf/expression/
③ http://localhost:9012/012-springboot-thymeleaf/thymeleaf/expression/user

① http://localhost:9012/012-springboot-thymeleaf/springboot/thymeleaf/index
② ../../springboot/thymeleaf/index
-->
<a href="user">user6</a>
<a href="./user">user7</a>
<a href="../../springboot/thymeleaf/index">index3</a>
<a th:href="@{./user}">user8</a>
<a th:href="@{./user(name=${user.nick},age=130)}">user9</a>
</body>
</html>

（3）启动程序，浏览器访问 

（4）右键查看源代码

四、Thymeleaf 的常见属性

1. th:action

定义后台控制器的路径，类似<form>标签的action属性，主要结合URL表达式,获取动态变量

（1）在ThymeleafController类中添加action方法

    /*
     * http://localhost:9012/012-springboot-thymeleaf/thymeleaf/expression/action
     * */
    @RequestMapping(value = "/thymeleaf/expression/action")
    public String action(Model model) {
        User user = new User(100, "何幸福", "21200107226", "苏州科技大学");
        model.addAttribute("user", user);
        return "action";
    }

（2） 在action.html页面中加入如下代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>action的使用</title>
</head>
<body>
<h1>th:action的使用</h1>

<div>当你需要动态获取变量数据的时候，就需要加th前缀</div>
<form id="login" th:action="@{'/login/' + ${user.id}}"></form>

<div>以下两种方式获取不到用户的id</div>
<form id="login2" action="/login/${user.id}"></form>
<form id="login3" action="/login"+${user.id}></form>

</body>
</html>

（3）启动程序，浏览器访问 

思考：为什么login3中${user.id} 获取不到数据？

因为我们Thymeleaf是以html为载体的，所以html不会认识${}语法。

我们请求的流程是，发送请求给服务器，服务器接收请求后，处理请求，跳转到指定的静态html页面，在服务器端，Thymeleaf模板引擎会按照它的语法，对动态数据进行处理，所以如果要是th开头，模板引擎能够识别，会在服务器端进行处理，获取数据；如果没有以th开头，那么Thymeleaf模板引擎不会处理，直接返回给客户端了。

在页面渲染之前，Thymeleaf模板引擎会作用（获得后台数据），把th开头的标签静态内容，换成动态数据，如果要是th开头，模板引擎不处理。

2. th:method

设置请求方法

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

3. th:href

定义超链接，主要结合URL表达式,获取动态变量

4. th:src

用于外部资源引入，比如<script>标签的src属性，<img>标签的src属性，常与@{}表达式结合使用，在SpringBoot项目的静态资源都放到resources的static目录下

放到static路径下的内容，写路径时不需要写上static

（1）在ThymeleafController类中添加src方法

    /*
     * http://localhost:9012/012-springboot-thymeleaf/thymeleaf/expression/src
     * */
    @RequestMapping(value = "/thymeleaf/expression/src")
    public String src(Model model) {
        User user = new User(100, "何幸福", "21200107226", "苏州科技大学");
        model.addAttribute("user", user);
        return "src";
    }

（2） 在src.html页面中加入如下代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>src使用</title>
</head>
<body>
<h1>th:src使用</h1>

<script src="/static/js/jquery-1.7.2.min.js"></script>
<script th:src="@{/js/jquery-1.7.2.min.js}"></script>
<img th:src="@{/img/ls.jpg}">

</body>
</html>

（3）启动程序，浏览器访问 

这种方式比传统方式的好处是，在URL表达式前加/，会自动加上上下文根，避免404找不到资源的情况。

5. th:id

类似html标签中的id属性

<span th:id="${hello}">aaa</span>

6. th:name

设置名称

<input th:type="text" th:id="userName" th:name="userName">

7. th:value

类似html标签中的value属性，能对某元素的value属性进行赋值

<input type="hidden" id="userId" name="userId" th:value="${userId}">

​​​​​​8. th:attr

该属性也是用于给HTML中某元素的某属性赋值，但该方式写法不够优雅

比如上面的例子可以写成如下形式

<input type="hidden" id="userId" name="userId" th:attr="value=${userId}" >

好处是可以给html中没有定义的属性动态的赋值

（1） 在html页面中加入如下代码

<input type="text" id="userId" name="userId" th:value="${user.id}">
<!--thymeleaf没有对应的th标签，所以${user.id}不能被识别-->
<span zhangsan=${user.id}></span>
<!--通过th:attr对自定义的属性赋值-->
<span id="zs" th:attr="zhangsan=${user.id}"></span>

<script>
    $(function () {
        alert("=====" + $("#zs").attr("zhangsan"));
        alert("=====" + document.getElementById("zs").zhangsan);
    });
</script>

（2）启动程序，浏览器访问 

 

9. th:text

用于文本的显示，该属性显示的文本在标签体中，如果是文本框，数据会在文本框外显示，要想显示在文本框内，使用th:value

<input type="text" id="realName" name="reaName" th:text="${realName}">

10. th:object

用于数据对象绑定

通常用于选择变量表达式（星号表达式）

11. th:onclick

点击事件：th:οnclick="'getCollect()'"

js不能跨域（站点）访问   jsonp：跨域访问（利用script src标签的漏洞）

（1） 在html页面中加入如下代码 

<!--目前thymeleaf版本要求只能传递数字和布尔类型-->
<a th:onclick="'fun1('+${user.id}+')'">点击我</a>
<script type="text/javascript">
    function fun1(userId) {
        alert(userId);
    }
</script>

（3）启动程序，浏览器访问

 

12. th:style

设置样式

<a th:οnclick="'fun1('+${user.id}+')'" th:style="'color:red'">点击我</a>

13. th:each

这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与JSTL中的<c: forEach>类似，此属性既可以循环遍历集合，也可以循环遍历数组及Map

（1）创建each.html对each(Array、List、Set、Map)集合进行遍历 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>each遍历的使用</title>
</head>
<body>
<h1>th:each遍历Array数据集合</h1>
<div th:each="array,arrayState:${userArray}">
    <span th:text="${arrayState.first}"></span>--
    <span th:text="${arrayState.last}"></span>--
    <span th:text="${arrayState.even}"></span>--
    <span th:text="${arrayState.odd}"></span>--
    <span th:text="${arrayState.index}"></span>--
    <span th:text="${arrayState.count}"></span>--
    <span th:text="${arrayState.current}"></span>-->
    <span th:text="${array.id}"></span>
    <span th:text="${array.phone}"></span>
    <span th:text="${array.nick}"></span>
    <span th:text="${array.address}"></span>
</div>

<h1>th:each遍历List集合 for each</h1>
<div th:each="list,listState:${userList}">
    <span th:text="${listState.first}"></span>--
    <span th:text="${listState.last}"></span>--
    <span th:text="${listState.even}"></span>--
    <span th:text="${listState.odd}"></span>--
    <span th:text="${listState.index}"></span>--
    <span th:text="${listState.count}"></span>--
    <span th:text="${listState.current}"></span>-->
    <span th:text="${list.getId()}"></span>
    <span th:text="${list.getPhone()}"></span>
    <span th:text="${list.getNick()}"></span>
    <span th:text="${list.address}"></span>
</div>

<h1>th:each遍历Set集合 for each</h1>
<div th:each="set,setState:${userSet}">
    <span th:text="${setState.index}"></span>--
    <span th:text="${setState.last}"></span>--
    <span th:text="${setState.even}"></span>--
    <span th:text="${setState.odd}"></span>--
    <span th:text="${setState.index}"></span>--
    <span th:text="${setState.count}"></span>--
    <span th:text="${setState.current}"></span>-->
    <span th:text="${set.getId()}"></span>
    <span th:text="${set.getPhone()}"></span>
    <span th:text="${set.getNick()}"></span>
    <span th:text="${set.address}"></span>
</div>

<h1>th:each遍历map集合 entrySet Map.Entry for each </h1>
<h1>1+1=2, 2 </h1>
<div th:each="map,mapState:${userMap}">
    <span th:text="${mapState.index}"></span>--
    <span th:text="${map.key}"></span>--
    <span th:text="${map.value}"></span>-->
    <span th:text="${map.value.getId()}"></span>
    <span th:text="${map.value.getPhone()}"></span>
    <span th:text="${map.value.getNick()}"></span>
    <span th:text="${map.value.address}"></span>
</div>

<h1>遍历复杂的集合：List -> Map -> List -> User</h1>
<!--首先遍历List，获取Map-->
<span th:each="myMap,listStat:${myList}">
    <!--再次遍历Map，获取List-->
    <span th:each="myKeyValue:${myMap}">
        <!--获取当前Map集合的Id-->
        <span th:text="${myKeyValue.key}"></span>--
        <span th:each="user,listSate:${myKeyValue.value}">-->
            <span th:text="${user.id}"></span>
            <span th:text="${user.phone}"></span>
            <span th:text="${user.nick}"></span>
            <span th:text="${user.address}"></span>
            <br/>
        </span>
    </span>
</span>

</body>
</html>

​​​​​​A. ​遍历Array数组

（2）在ThymeleafController中添加eachArray方法，准备集合数据

    /*
     * http://localhost:9012/012-springboot-thymeleaf/thymeleaf/each/array
     * */
    @RequestMapping(value = "thymeleaf/each/array")
    public String eachArray(Model model) {
        User[] userArray = new User[10];
        for (int i = 0; i < 10; i++) {
            User user = new User(100 + i, "何幸福" + i, "2120010722" + i, "苏州科技大学" + i);
            userArray[i] = user;
        }
        model.addAttribute("userArray", userArray);
        return "each";
    }

B. 遍历List集合​​​​​​​

（2）在ThymeleafController中添加eachList方法，准备集合数据

代码说明

① th:each="user, iterStat : ${userlist}"中的 ${userList} ：是后台传过来的集合

② user：定义变量，去接收遍历${userList}集合中的一个数据

③ iterStat ：${userList} 循环体的信息

④ 其中user及iterStat自己可以随便取名

⑤ interStat是循环体的信息，通过该变量可以获取如下信息

        index: 当前迭代对象的index（从0开始计算）

        count: 当前迭代对象的个数（从1开始计算）这两个用的较多

        size: 被迭代对象的大小

        current: 当前迭代变量

        even/odd: 布尔值，当前循环是否是偶数/奇数（从0开始计算）

        first: 布尔值，当前循环是否是第一个

        last: 布尔值，当前循环是否是最后一个

注意：循环体信息interStat也可以不定义，则默认采用迭代变量加上Stat后缀，即userStat

    /*
     * http://localhost:9012/012-springboot-thymeleaf/thymeleaf/each/list
     * */
    @RequestMapping("/thymeleaf/each/list")
    public String eachList(Model model) {
        List<User> userList = new ArrayList<User>();
        for (int i = 0; i < 10; i++) {
            User user = new User(100 + i, "何幸福" + i, "2120010722" + i, "苏州科技大学" + i);
            userList.add(user);
        }
        model.addAttribute("userList", userList);
        return "each";
    }

C. 遍历Set集合

（2）在ThymeleafController中添加eachSet方法，准备集合数据

    /*
     * http://localhost:9012/012-springboot-thymeleaf/thymeleaf/each/set
     * */
    @RequestMapping("/thymeleaf/each/set")
    public String eachSet(Model model) {
        Set userSet = new HashSet();
        for (int i = 0; i < 10; i++) {
            User user = new User(100 + i, "何幸福" + i, "2120010722" + i, "苏州科技大学" + i);
            userSet.add(user);
        }
        model.addAttribute("userSet", userSet);
        return "each";
    }

D. 遍历Map集合

（2）在ThymeleafController中添加eachMap方法，准备集合数据

代码说明

① th:each="map:${userMap}" : 用map接收每次遍历的结果，封装为一个键值对

② map.key : 获取当前键值对中的key

③ map.value : 获取当前键值对中的value

    /*
     * http://localhost:9012/012-springboot-thymeleaf/thymeleaf/each/map
     * */
    @RequestMapping(value = "/thymeleaf/each/map")
    public String eachMap(Model model) {
        Map<Integer, Object> userMap = new HashMap<Integer, Object>();
        for (int i = 0; i < 10; i++) {
            User user = new User(100 + i, "何幸福" + i, "2120010722" + i, "苏州科技大学" + i);
            userMap.put(i, user);
        }
        model.addAttribute("userMap", userMap);
        return "each";
    }

​​​​​​​D. 比较复杂的循环案例

（2）在ThymeleafController中添加eachAll方法，准备集合数据

    /*
     * http://localhost:9012/012-springboot-thymeleaf/thymeleaf/each/all
     * */
    @RequestMapping(value = "/thymeleaf/each/all")
    public String eachAll(Model model) {
        //构造复杂的数据关系  List->Map->List->User
        List<Map<Integer, List<User>>> userAll = new ArrayList<Map<Integer, List<User>>>();
        for (int n = 0; n < 2; n++) {
            Map<Integer, List<User>> myMap = new HashMap<Integer, List<User>>();
            for (int m = 0; m < 2; m++) {
                List<User> myList = new ArrayList<User>();
                for (int i = 0; i < 3; i++) {
                    User user = new User(100 + i, "何幸福" + i, "2120010722" + i, "苏州科技大学" + i);
                    myList.add(user);
                }
                myMap.put(m, myList);
            }
            userAll.add(myMap);
        }
        model.addAttribute("userAll", userAll);
        return "each";
    }

14.条件判断

（1）创建condition.html页面进行条件判断

A. ​​​​​​​th:if

B. th:unless（了解）

C. th:switch/th:case

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>条件判断</title>
</head>
<body>
<div style="color: red">th:if条件判断：如果满足条件，显示标签，如果不满足条件，标签就不显示</div>
<!--th:if条件判断：如果满足条件，显示标签，如果不满足条件，标签就不显示-->
<span th:if="${sex == 1}">
    男：<input type="radio" name="sex" th:value="男"/>
</span>
<span th:if="${sex==2}">
      女：<input type="radio" name="sex" th:value="女"/>
</span>
<hr>
<span th:if="${sex == '1'}">
    男：<input type="radio" name="sex" th:value="男"/>
</span>

<span th:unless="${sex==1}">
      女：<input type="radio" name="sex" th:value="女"/>
</span>
<hr>
<div th:switch="${sex}">
    <p th:case="1">性别：男</p>
    <p th:case="2">性别：女</p>
    <p th:case="*">性别：未知</p>
</div>
</body>
</html>

注意：一旦某个case判断值为true，剩余的case则都当做false，“*”表示默认的case，前面的case都不匹配时候，执行默认的case 。

（2）在ThymeleafController中添加condition方法，通过model传递sex值为1

    /*
     * http://localhost:9012/012-springboot-thymeleaf/thymeleaf/condition
     * */
    @RequestMapping(value = "/thymeleaf/condition")
    public String condition(Model model) {
        //model.addAttribute("sex",1);
        model.addAttribute("sex", "1");
        return "condition";
    }

​​​​​​​15. th:inline

th:inline 有三个取值类型 (text, javascript 和 none)

（1）在ThymeleafController中添加inline方法

    /*
     * http://localhost:9012/012-springboot-thymeleaf/thymeleaf/expression/inline
     * */
    @RequestMapping(value = "/thymeleaf/expression/inline")
    public String inline(Model model) {
        User user = new User(100, "何幸福", "21200107226", "苏州科技大学");
        model.addAttribute("user", user);
        return "inline";
    }

​​​​​​​A. 内敛文本（th:inline=”text”）

可以让Thymeleaf表达式不依赖于html标签，直接使用内敛表达式[[表达式]]即可获取动态数据，要求在父级标签上加th:inline = “text”属性

（2）在inline.html页面上，加如下代码

<!--内敛文本-->

标准变量表达式用户数据的展示：<br>
<span th:text="${user.id}"></span>
<span th:text="${user.nick}"></span>
<span th:text="${user.phone}"></span>
<span th:text="${user.address}"></span>
<br>
<!--以上代码可以使用内敛文本代替-->
内敛表达式 用户数据的展示：<br>
<span th:inline="text">
    [[${user.id}]]
    [[${user.nick}]]
    [[${user.phone}]]
    [[${user.address}]]
</span>
<br>

 注意：一般我们将<span th:inline="text">放到<body th:inline="text">标签中

B. 内敛脚本（th:inline=”javascript”）

在js代码中获取后台的动态数据

（2）在inline.html页面上，加如下代码

<button type ="button" onclick="func()">抽奖</button>

<script type="text/javascript" th:inline="javascript">
    function func(){
        alert("恭喜" + [[${user.nick}]] +"手机号为"+[[${user.phone}]]+"中奖！");
    }
</script>

（3）启动程序，浏览器访问

五、Thymeleaf字面量（直接量）

int a=100；    fun(a)    fun(100)

变量：a  

直接量：100

字面量：对应数据类型的合法取值，可以在html页面直接使用，不需要后台传递

（1）在ThymeleafController中添加literal方法

    /*
     * http://localhost:9012/012-springboot-thymeleaf/thymeleaf/expression/literal
     * */
    @RequestMapping(value = "/thymeleaf/expression/literal")
    public String literal(Model model) {
        User user = new User(100, "何幸福", "21200107226", "苏州科技大学");
        model.addAttribute("user", user);
        model.addAttribute("sex", 1);
        model.addAttribute("cunPage", 8);
        model.addAttribute("totalPage", 41);
        return "literal";
    }

1. 文本字面量

用单引号'...'包围的字符串为文本字面量

<!--文本字面量-->
<a th:href="@{'/user/' + ${user.id}}">修改用户</a>

​​​​​​2. ​数字字面量

<!--数字字面量-->
<p>今年是<span th:text="2017">1949</span>年</p>
<p>20年后, 将是<span th:text="2017 + 20">1969</span>年</p>

​​​​​​3. boolean字面量

true 和 false

<!--boolean字面量-->
<p th:if="${sex == true}">执行操作</p>

​​​​​​​4. null字面量​​​​​​​

<!--null字面量-->
<p th:if="${user == null}">user为空</p>
<p th:if="${user != null}">user不为空</p>

（2）在literal.html页面上，加如下代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>字面量的使用</title>
</head>
<body>
<!--文本字面量-->
<a th:href="@{'/user/' + ${user.id}}">修改用户</a>

<!--数字字面量-->
<p>今年是<span th:text="2017">1949</span>年</p>
<p>20年后, 将是<span th:text="2017 + 20">1969</span>年</p>

<!--boolean字面量-->
<p th:if="${sex == true}">执行if操作</p>
<p th:unless="${sex == true}">执行unless操作</p>

<!--null字面量-->
<p th:if="${user == null}">user为空</p>
<p th:if="${user != null}">user不为空</p>

<span th:text="${sex==1?'boy':'girl'}"></span>
<span th:text="${sex eq 1?'boy':'girl'}"></span>
<hr>
<!--一种是字面量使用加号拼接-->
<span th:text="'当前是第'+${cunPage}+'页,共'+${totalPage}+'页'"></span>
<br>
<span th:text="|当前是第${cunPage}页,共${totalPage}页|"></span>

</body>
</html>

六、Thymeleaf 字符串拼接

<!--一种是字面量使用加号拼接-->
<span th:text="'当前是第'+${sex}+'页 ,共'+${sex}+'页'"></span>

<!--另一种更优雅的方式，使用“|”减少了字符串的拼接的加号-->
<span th:text="|当前是第${sex}页,共${sex}页|"></span>

​​​​​​​七、Thymeleaf运算符

三元运算: sex == 1? '男' : '女'

算术运算：+ , - , * , / , %

关系比较: > , < , >= , <= ( gt , lt , ge , le )

相等判断：== , != ( eq , ne )

<span th:text="${sex == 1?'男':'女'}"></span>
<span th:text="${sex eq 1?'男':'女'}"></span>

​​​​​​​八、Thymaleaf表达式基本对象

模板引擎提供了一组内置的对象，这些内置的对象可以直接在模板中使用，这些对象由#号开始引用，我们比较常用的内置对象

1. ​​​​​​​#request

相当于httpServletRequest 对象，这是3.x版本，若是2.x版本使用 #httpServletRequest

​​​​​​2. ​#session

相当于HttpSession 对象，这是3.x版本，若是2.x版本使用#httpSession

（1）在ThymeleafController中添加inlineObj方法 

    /*
     * http://localhost:9012/012-springboot-thymeleaf/thymeleaf/expression/inlineObj
     * */
    @RequestMapping(value = "/thymeleaf/expression/inlineObj")
    public String inlineObj(Model model, HttpServletRequest request) {
        User user = new User(100, "何幸福", "21200107226", "苏州科技大学");
        model.addAttribute("user", user);
        model.addAttribute("sex", 1);
        request.setAttribute("birthday", new Date());
        request.getSession().setAttribute("salary", 12500);
        return "inlineObj";
    }

（2）在inlineObj.html页面上，加如下代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>表达式基本对象的使用</title>
</head>
<body th:inline="text">
<span th:text="${#request.getAttribute('birthday')}"></span>
<span th:text="${#session.getAttribute('salary')}"></span>
<hr>
[[${#request.getAttribute('birthday')}]]--[[${#session.getAttribute('salary')}]]<br>
[[${#request.getRequestURI()}]]--[[${#request.getContextPath()}]]
<hr>

<span th:text="${#strings.substring(user.getPhone(),1,8)}"></span>
<span th:text="${#dates.format(#request.getAttribute('birthday'),'yyyy-MM-dd HH:mm:ss')}"></span>
<br>
<span th:text="${#numbers.formatDecimal(#session.getAttribute('salary'),10,10)}"></span>
<br>
<span th:text="${#numbers.formatDecimal(#session.getAttribute('salary'),2,3)}"></span>

</body>
</html>

​​​​​​​九、Thymaleaf表达式功能对象（了解）

模板引擎提供的一组功能性内置对象，可以在模板中直接使用这些对象提供的功能方法

工作中常使用的数据类型，如集合，时间，数值，可以使用Thymeleaf的提供的功能性对象来处理它们。

内置功能对象前都需要加#号，内置对象一般都以s结尾

官方手册：​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​Tutorial: Using Thymeleafhttp://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

#dates: java.util.Date对象的实用方法，<span th:text="${#dates.format(curDate, 'yyyy-MM-dd HH:mm:ss')}"></span>

#calendars: 和dates类似, 但是 java.util.Calendar 对象；

#numbers: 格式化数字对象的实用方法；

#strings: 字符串对象的实用方法： contains, startsWith, prepending/appending等；

#objects: 对objects操作的实用方法；

#bools: 对布尔值求值的实用方法；

#arrays: 数组的实用方法；

#lists: list的实用方法，比如<span th:text="${#lists.size(datas)}"></span>

#sets: set的实用方法；

#maps: map的实用方法；

#aggregates: 对数组或集合创建聚合的实用方法；

书启秋枫
关注
专栏目录
SpringBoot整合Thymeleaf
分享思想，留下痕迹。
08-09 1963
大家好，我是Leo，今天我们来学习Thymeleaf，如果你对Thymeleaf比较陌生也不要紧，它很容易学习与理解，并有着自己鲜明的特色。什么是Thymeleaf？Thymeleaf 官网是这么解释的：Thymeleaf is a modern server-side Java template engine for both web and standalone environments.译过来就是：Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎Thymeleaf。
SpringBoot集成Thymeleaf
m0_58414041的博客
07-28 1512
Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。Thymeleaf 的主要目标是为开发工作流程带来优雅的自然模板，既可以在浏览器中正确显示的 HTML，也可以用作静态原型，从而在开发团队中实现更强大的协作。传统的 JSP+JSTL 组合是已经过去了，Thymeleaf 是现代服务端的模板引擎，与传统的 JSP 不同，Thymeleaf可以使用浏览器直接打开，因为可以忽略掉拓展属性，相当于打开原生页面，给前端人员也带来一定的便利。
springboot集成thymeleaf实战
最新发布
卓越之识论道，平常之识论事，狭隘之识论人
07-30 763
springboot集成thymeleaf实战
SpringBoot——SpringBoot集成Thymeleaf
★★光亭★★
05-19 8565
SpringBoot——SpringBoot集成Thymeleaf
springboot集成Thymeleaf
qq_39093474的博客
03-29 1028
简单说，Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP。Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 Thymeleaf 的模板可以静态地运行；
springboot集成Thymeleaf模板
weixin_43769566的博客
07-15 359
目录 一 认识Thymeleaf 二 springboot集成Thymeleaf 三 Thymeleaf的标准表达式 1 标准变量表达式 2 选择变量表达式 3 URL表达式 加了/，就会自动加入项目工程名，如下图 四 Thymeleaf的常见属性 th:action th:each 循环（比较常用的） 下面是案例代码list示例，数组使用方法一样 ...
Spring Boot集成Thymeleaf模板引擎的完整步骤
08-26
Spring Boot集成Thymeleaf模板引擎的完整步骤 本文将为大家介绍Spring Boot集成Thymeleaf模板引擎的完整步骤，从基本概念到实际配置，详细地介绍了Thymeleaf模板引擎的使用方法。 一、Thymeleaf模板引擎概述 ...
详解spring Boot 集成 Thymeleaf模板引擎实例
08-29
本篇文章主要介绍了spring Boot 集成 Thymeleaf模板引擎实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
spring boot使用thymeleaf模板的方法详解
08-29
Spring Boot使用Thymeleaf模板引擎的详细指南 Thymeleaf是一个强大的、现代的模板引擎，被广泛用于Spring Boot项目中，特别是在Spring 4.0及更高版本中。它以其独特的特性和易于使用性而受到开发者的青睐。在本文中...
Spring Boot集成Thymeleaf的方法
08-25
在本文中，我们将详细介绍如何将 Thymeleaf 模板引擎集成到 Spring Boot 项目中。Thymeleaf 是一个流行的 Java 模板引擎，可以帮助我们快速生成 HTML页面，并与业务数据分离。 首先，我们需要引入 Thymeleaf 的依赖...
【Spring Boot】Thymeleaf模板引擎 — Thymeleaf入门
衍生星球的博客
08-03 2290
Thymeleaf是一款非常优秀的服务器端页面模板引擎，适用于Web和独立环境，具有丰富的标签语言和函数，能够处理HTML、XML、JavaScript甚至文本。Thymeleaf相较于其他模板引擎更加优雅。它强调自然模板化（允许模板成为工作原型，而Velocity、FreeMarker模板不允许这样做），所以它的语法更干净，更符合当前Web开发的趋势。
springboot整合thymeleaf模板
02-17
springboot整合thymeleaf模板
springBoot 集成 thymeleaf
快乐的小三菊的博客
04-28 1053
springboot 集成 thymeleaf
springboot整合thymeleaf
听钱塘信来的博客
10-02 5164
springboot整合thymeleaf
Thymeleaf教程（10分钟入门）
shugyin的专栏
05-11 1486
Thymeleaf教程（10分钟入门）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

书启秋枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值