SpringBoot使用thymeleaf模板

Posted 2020-12-14 64Byte

thymeleaf官网：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#introducing-thymeleaf

thymeleaf介绍

　　Thymeleaf是一个跟Velocity,FreeMarker类似的模板引擎,它可以完全代替JSP.相比较与其他模板引擎,它有如下三个吸引人的特点:

1. Thymeleaf 在有网络和无网络的环境下皆可运行
2. Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果
3. Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

使用thymeleaf模板

1、在pom.xml中引入thymeleaf的支持

<!-- 模板的依赖thymeleaf -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2、如何关闭thymeleaf缓存

在application.properties文件中进行如下配置:

###thymeleaf的默认配置
#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

3、编写模板文件.html

　　在src/main/resources文件夹下的templates文件夹创建模板文件 index.html

 thymeleaf的详解

1、变量表达式

　　变量表达式即OGNL表达式或Spring EL表达式,如下所示:

//${session.user.name} 表示从session域获取user对象的name属性值,不要忘记写session
//${user.name}         表示从request域获取user对象的name属性值,一定不能写 ${request.user.name}
//例如：
<span th:text="${session.user.name}"></span>

2、选择(星号)表达式

　　选择表达式很像变量表达式,不过它们用一个预先选择的对象来代替变量容器(Map)来执行,如下:

<!-- 注意:被指定的object由th:object属性来定义 -->
<div th:object="${session.user}">
    <p>
        <span th:text="*{id}"></span>
    </p>
    <p>
        <span th:utext="*{name}"></span>
    </p>
    <p>
        <span th:text="*{birthday}"></span>
    </p>
</div>

3、URL表达式

<!-- 之前写法 -->
    <a href="/test/test2?id=1001&name=lisi">test2</a>
<!-- thymeleaf写法:   th:href/ th:src  -->
    <a th:href="@{/test/test2(id=1002,name=‘wangwu‘)}">test2</a>

4、常用的th属性

　　转载：https://blog.csdn.net/username666/article/details/106207123

5、字符串拼接

<!-- 第一种拼接 -->
    <h1 th:text="‘欢迎:‘+${name1}+‘,您是:‘+${role}"></h1>
<!-- 第二种拼接 -->
    <h1 th:text="|welcome:${name1},您是:${role}|"></h1>

6、条件判断IF/Unless

<!-- th:if  if条件,  条件为true表示这个标签存在,  false 表示这个标签不存在 -->
    <p th:if="${name1 != null} ">哈哈</p>

<!-- th:unless  if相反, 条件为true表示这个标签不存在,  false 表示这个标签存在   -->
    <p th:unless="${name1 != null} ">嘿嘿</p>

7、for循环th:each

<!-- forEach循环:   th:each="变量:集合/数组"   c:foreach-->
    <table border="1" width="500">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
            </tr>
        </thead>
        <tbody>    
            <tr th:each="user:${list}"> 
                <td th:text="${user.id}"></td>
                <td th:text="${user.name}"></td>
            </tr>
        </tbody>
    </table>

循环状态:

• index:当前迭代对象的index（从0开始计算）
• count: 当前迭代对象的index(从1开始计算)
• size:被迭代对象的大小
• current:当前迭代变量
• even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
• first:布尔值，当前循环是否是第一个
• last:布尔值，当前循环是否是最后一个

使用状态，与三目元素符: （条件?值1:值2来表示: ）

<style type="text/css">
    .green{ background-color: green; } 
    .red{ background-color: red; }
</style>

<tbody>
    <!-- <tr th:each="user,stat:${list}" th:style="${stat.odd}?‘background:green;‘:‘background:yellow;‘"> -->
    <tr th:each="user,stat:${list}" th:class="${stat.odd}?‘green‘:‘red‘"> 
        <td th:text="${stat.index}"></td>
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
    </tr>
</tbody>

8、Thymeleaf的内置对象

　　Thymeleaf中提供了一些内置对象，并且在这些对象中提供了一些方法，方便我们来调用。获取这些对象，需要使用#对象名来引用

• #ctx：获取Thymeleaf自己的Context对象
• #request：HttpServletRequest对象
• #response：HttpServletReponse对象
• #session：HttpSession对象
• #servletContext：ServletContext对象

Thymeleaf也提供了全局的内置对象:

• #dates：处理java.util.Date的工具对象
• #calendars：处理java.util.calendar的工具对象
• #numbers：用来对数字格式化的方法
• #strings：用来处理字符串的方法
• #bools：用来判断布尔值的方法
• #arrays：用来护理数组的方法
• #lists：用来处理List集合的方法
• #sets：用来处理set集合的方法
• #maps：用来处理map集合的方法

session内置对象案例：

<!-- controller层创建一个session对象 -->
@GetMapping("test3") 
public String  test3(Model model,HttpSession session) throws Exception {
    --打印session的id
}
<!-- html中 内置对象:-->
<div th:text="${#session.getId()}"></div>
<div th:text="${#request.getContextPath()}"></div>
发现是同一个session

 dates内置对象案例：更改日期显示格式

<!-- 日期内置对象 -->
<h1 th:text="|当前系统时间:${#dates.format(now,‘yyyy-MM-dd HH:mm:ss‘)}|"></h1>

9、默认值的显示

　　单独输入 th: 标签如果值为空，不显示。如果拼接，没传值会显示拼接字符串+null

<!-- 默认值的写法   简写三目运算-->
<h1 th:text="${name1}?:无名氏"></h1>

javascript获取thymeleaf中域中的数据

　　1、在script使用: th:inline="javascript"

　　2、取值：/*[[${域对象名}]]*/

案例获取对象集合：

<!-- 第一步: 在script使用: th:inline="javascript" -->
<script type="text/javascript" th:inline="javascript">
    //js获取thymeleaf中域中的数据
    // ${} 这不是js代码
    // 如果 js代码不识别[[${list}]], 当成[[${list}]]注释,   [] 如果前面不识别, 赋[]给users 
//如果获取值为空，则[]显示一个空的数组，“”则表示一个空的字符   （默认值）
    var users = /*[[${list}]]*/ [];
    console.log(users);
</script>