Thymeleaf入门

最新推荐文章于 2023-11-13 09:18:31 发布

-irony-

最新推荐文章于 2023-11-13 09:18:31 发布

阅读量280

点赞数 1

分类专栏： spring 文章标签： html java spring

本文链接：https://blog.csdn.net/weixin_51532232/article/details/120101366

版权

spring 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Thymeleaf是一个模板框架,Spring选择它作为默认模板方案

举个例子:

在这里插入图片描述
上述图片通过模板引擎,可以把java对象数据+模板页面动态的渲染出一个真实的HTML页面

初始化Thymeleaf

添加Maven依赖

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

数据传递

只需要在方法参数引入一个Model对象,通过这个Model对象传递数据到页面当中

@Controller
public class SongListControl {

  @Autowired
  private SongListService songListService;

  @RequestMapping("/songlist")
  public String index(@RequestParam("id")String id,Model model){

    SongList songList = songListService.get(id);
    //传递歌单对象到模板当中
    //第一个 songList 是模板中使用的变量名
    // 第二个 songList 是当前的对象实例
    model.addAttribute("songList",songList);

    return "songList";
  }
}

模板文件

Spring MVC中对于模板文件是有固定存放的位置,放在src/main/resources/templates所以上面的return会去查找src/main/resources/templates/songList.html系统会自动匹配后缀,所以不需要添加后缀,文件的内容:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="/css/songList.css" />
    <title>豆瓣歌单</title>
  </head>
  <body>
    <h1 th:text="${songList.name}"></h1>
  </body>
</html>

Thymeleaf 变量

模板变量

th:text这个属性就是Thymeleaf自定义的HTML标签属性,th是Thymeleaf的缩写,语法的作用就是会动态替换掉html标签的内部内容

<span th:text="${msg}">Hello</span>

这里执行的结果就是用msg变量值替换span标签的Hello字符串,th属性内的${变量名}这个语法是固定的,调用变量需要先设置变量到模板上下文中去,再使用model.addAttribute("msg",str);就可以完成上下文变量设置.

import org.springframework.ui.Model;

@Controller
public class DemoControl {

  @RequestMapping("/demo")
  public String index(Model model){
    String str = "你好";
    model.addAttribute("msg",str);
    return "demo";
  }
}

第一个参数设置的就是上下文变量名
第二个参数设置的是变量值

如果对象包含对象,可以使用.一直点出来,前提是对象时POJO类

Thymeleaf 循环语句

th:each代表的就是循环语句

<ul th:each="song : ${songs}">
  <li th:text="${song.name}">歌曲名称</li>
</ul>

${songs}是模板上下文中获取songs这个变量
song是${songs}变量遍历后的每一个对象
${song.name}就可以读取遍历中歌曲的名称

打印列表的索引值

<ul th:each="song,it: ${songs}">
  <li>
    <span th:text="${it.count}"></span>
    <span th:text="${song.name}"></span>
  </li>
</ul>

it.index
迭代对象的index从0开始
it.count
迭代对象的index从1开始
it.size
迭代对象的大小
it.even/odd
布尔值当前循环是否是偶数/奇数(从0开始)
it.first
布尔值,当前循环是否是第一个
it.last
布尔值,当前循环是否是最后后一个

Thymeleaf 表达式

主要用于两种场景

字符串处理
数据转化

字符串处理

需要使用''包围住文本,把文本变成java字符串,然后通过+拼接如:

<span th:text="'00:00/'+${totalTime}"></span>

字符串拼接优化:
可以使用|包围住字符串,如:

<span th:text="|00:00/${totalTime}|"></span>

数据转化

Thymeleaf默认集成了大量的工具类可以方便的进行数据转化,一般用的最多的是dates

变量使用的是${变量名} ,工具类使用的是#{工具类}

一般使用dates/temporals用于处理日期类型到字符串的显示比如显示年月日

<p th:text="${#dates.format(dateVar, 'yyyy-MM-dd')}"></p>
<p th:text="${#dates.format(dateVar, 'yyyy年MM月dd日')}"></p>

#strings字符串处理

${#strings.toUpperCase(name)}

把字符串改成大写

${#strings.toLowerCase(name)}

把字符串改成小写

{#strings.arrayJoin(array,',')}

把字符串数组合并成一个字符串,并以,连接

${#strings.arraySplit(str,',')}

把字符串分隔成一个数组,并以,作分隔符,比如a,b执行后变成[“a”,“b”]

${#strings.trim(str)}

去掉空格

${#strings.length(str)}
${#strings.equals(str1,str2)}
${#strings.equalsIgnoreCase(str1,str2)}

这些与java的String类操作一样

内联表达式

可以直接把变量写在HTML中:

<span>Hello [[${msg}]]</span>

[[变量]]就是内联表达式,支持我们直接在HTML中调用变量
执行日期函数:

<p>[[ ${#dates.format(dateVar, 'yyyy-MM-dd')} ]]</p>
<p>[[${#dates.format(dateVar, 'yyyy年MM月dd日')}]]</p>

<p>[[${#dates.format(dateVar, 'yyyy-MM-dd HH:mm:ss')}]]</p>
<p>[[${#dates.format(dateVar, 'yyyy年MM月dd日 HH时mm分ss秒')}]]</p>

[[]]只是用于代替th:text,不是代替所有的th:标签

Thymeleaf 条件语句

同样也是th:开头的语句,这次为th:if,只有if表达式为true的情况下才回执行渲染:

<span th:if="${user.sex == 'male'}">男</span>

还可以使用th:unless代表的是否定条件,这个语句与if是相反的,代表的是sex不是male才回执行渲染

<span th:unless="${user.sex == 'male'}">女</span>

strings 逻辑判断

isEmpty检查字符串是否为空(或者为null)

<p th:if="${#strings.isEmpty(str1)}">String</p>

contains检查字符串变量是否包含片段

<!--检查name有没有abc-->
${#strings.contains(name,'abc')}

-irony-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录