SpringBoot使用thymeleaf模板

Posted 64Byte

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SpringBoot使用thymeleaf模板相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于SpringBoot使用thymeleaf模板的主要内容,如果未能解决你的问题,请参考以下文章

SpringBoot入门之Thymeleaf的使用一

springboot中使用thymeleaf模板引擎

springboot+thymeleaf模板的一个问题,搞了一天才搞定。

SpringBoot中web开发-thymeleaf模板引擎的使用

springboot~手动加载thymeleaf模版

SpringBoot页面展示Thymeleaf