SpringBoot-集成-Thymeleaf-常用表达式

最新推荐文章于 2024-07-22 08:30:00 发布
最新推荐文章于 2024-07-22 08:30:00 发布
阅读量2.8k 收藏 3
点赞数 4
分类专栏： SpringBoot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44520739/article/details/88833307
版权

1选择变量表达方法

语法：*{…}
选择变量表达式，也叫星号变量表达式，使用th:object属性来绑定对象，比如：
后台


@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model){
        User user=new User();
        user.setId(1);
        user.setName("张三");
        user.setAge(18);
        model.addAttribute("user",user);

       return "list";
   }

}

前台接受数据
选择表达式首先使用th：object来绑定后台传来的的user对象，然后使用*来代表这个对象，后面{}中的值是此对象中的属性
也可以和标准表达式混合用


<div th:object="${user}">
    <span th:text="*{id}"></span>
    <span th:text="*{name}"></span>
    <span th:text="*{age}"></span>
    
</div>

Url表达式

语法：@{…}
url表达式可以用于<script src="..">,<link href=".."> <a href="..">等
绝对url

<a href="http://127.0.0.1:8080/list?id=50">跳页面1</a>
拼接
<a href="list.html" th:href="@{'http://127.0.0.1:8080/list?id'+${user.id}}">跳页面2</a>
拼接2
<a href="list.html" th:href="@{|http://127.0.0.1:8080/list?id=${user.id}&age=${user.age}|}">跳页面3</a>

在这里插入图片描述
没加 / 的访问不到项目名（上下文）
加上可以 访问 项目名 （上下文）

<a href="list.html" th:href="@{'list?id='+${user.id}}">跳页面4</a>
<a href="list.html" th:href="@{'/list?id='+${user.id}}">跳页面5</a>

在这里插入图片描述

常见的属性

th：action 定义后台控制器的路径，<from>标签的action 如果路径式写死的可以直接使用action要是用th：action要和Url表达式结合用同样加上 / 可以访问上下文

  <from id="from1" th:action="@{/tt/login}">

    </from>

    <from id="from" action="tt/login">

     </from>

在这里插入图片描述
th：each：这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与jstl中的<c:forEach>类似，此属性即可以循环遍历集合，也可以循环遍历数组及Map
测试
后台

@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model){
      
        List<User> list=new ArrayList<>();
        for (int i = 0; i <20 ; i++) {
            User users=new User();
            users.setId(i);
            users.setName("张三"+i);
            users.setAge(18+i);
          list.add(users);
        }
   model.addAttribute("list",list);
       return "list";
   }

}

html

<th th:text="${userStat.count}"></th> 可以统计数，
index,当前迭代对象的index(从0开始)
size,别迭代对象的大小
current，当前迭代变量
even,odd, 布尔值当前循环是否是偶数/奇数（从0开始）
first,布尔值 当前循环是否是第一个
last：布尔值 当前循环是否是最后一个


<table border="1">
    <tr  th:each="user:${list}">
        <th th:text="${user.id}"></th>
        <th th:text="${user.name}"></th>
        <th th:text="${user.age}"></th>
    </tr>

</table>

输出
在这里插入图片描述
map 遍历：
后台代码


@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model){
        Map<String,Object> map=new HashMap<>();

        List<User> list=new ArrayList<>();
        for (int i = 0; i <10 ; i++) {
            User users=new User();
            users.setId(i);
            users.setName("张三"+i);
            users.setAge(18+i);
          list.add(users);
          //转换为字符串
          map.put(String.valueOf(i),users       );
        }
   model.addAttribute("list",list);
   model.addAttribute("map",map);

        return "list";
   }

}

html


<table border="1">
    <tr  th:each="user:${map}">
        <th th:text="${user.key}"></th>
        <th th:text="${user.value.id}"></th>
        <th th:text="${user.value.name}"></th>
        <th th:text="${user.value.age}"></th>


    </tr>
</table>

在这里插入图片描述
数组：


@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model){
        User[] arr=new User[10];
        for (int i = 0; i <10 ; i++) {
            User users=new User();
            users.setId(i);
            users.setName("张三"+i);
            users.setAge(18+i);
          arr[i]=users;
        }
        model.addAttribute("arr",arr);

        return "list";
   }

}

html


<table border="1">
    <tr  th:each="user:${arr}">
        <th th:text="${user.id}"></th>
        <th th:text="${user.name}"></th>
        <th th:text="${user.age}"></th>
    </tr>

</table>

在这里插入图片描述
th:id类似html中的id属性

  model.addAttribute("username","zhangsan");

html：


<span id="username">qqq1</span>

<span th:id="${username}">qqq2</span>

在这里插入图片描述
th:if条件判断，后台传值前台判断、

model.addAttribute("sex","1");

html

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

在这里插入图片描述
th:unless 它是和th:if相反的操作

model.addAttribute("sex","1");

html

<span th:unless="${sex == '1'}">男</span>
<span th:unless="${sex == '2'}">女</span>

在这里插入图片描述
th:switch/th:case 判断语句 一旦某个case判断值为true,剩下的case则都当作false,"*" 默认表示case前面的case都不匹配时候，执行默认case‘

model.addAttribute("sex","1");

html

<div th:switch="${sex}">
    <p th:case="1">男</p>
    <p th:case="2">女</p>
    <p th:case="*">未知</p>

</div>

在这里插入图片描述
th:object用于数据对象绑定通常使用于选择变量表达式（星号表达式）
th:src用于外部资源引入，比如<script>标签的src属性，<img>标签的src属性，常与@{}表达式结合使用

<img th:src="@{/static/1.jpg}">

th:text用于文本的显示
th：value类似于html标签中的value属性，能对某个value元素进行赋值

<input type="text" id="name" name="name" th:value="${user.name}">

在这里插入图片描述

th：attr该属性也是用于给html中的某个属性赋值

<input type="text" id="name" name="name" th:attr=" valuue=${user.name}">

th：onclick点击事件

<span th:attr="data-ref=${user.age}" th:"'dianji()'">11</span>
<script>
   function dianji() {
       alert(1);
   }
    
</script>

在这里插入图片描述
th：style设置样式

<div th:style="'display:block;'">
    mncxvgbcxss
</div>

在这里插入图片描述
th：method设置请求的方法

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

</form>

th：name设置表单名称

<input th:type="text" th:id="${user.age}" th:name="${user.age}"/>

在这里插入图片描述
th：inline内联文本，内联脚本。有三个取值类型（text,javascript和none）
th：inline写在任何父级标签都可以

<body th:inline="text">
<span >
   [[${user.name}]]
</span>
</body>

<span th:inline="text">
   [[${user.name}]]
</span>

不用父级的这样也可以

<span >
   [[${user.name}]]
</span>

在这里插入图片描述
内联脚本


<script th:inline="javascript" type="text/javascript">
  var user=[[${user.name}]]
    alert(user)

</script>

<script th:inline="javascript" type="text/javascript">
    var users= "hello"+[[${user.name}   ]]
    alert(users)

</script>

在这里插入图片描述
数字变量：

<span th:text="2017">199</span>
<span th:text="30+20"></span>

在这里插入图片描述
boolean字面量true和fal’se

<p th:if="${fa==true}">

</p>

null字面量
空 ，非空

<p th:if="${fa==unll}">

</p>
<p th:if="${fa!=unll}">

</p>

字符拼接
一种是字面量拼接：<span th:text="'30+20'+ ${user.name}+'1,1'+${user.age}+'等等'"></span>
另外一种，使用"|"减少了字符串的拼接<span th:text="|d ${user.name},1${user.age}等|"></span>

三元运算判断：

<span th:text="${sex==1?'男':'女'}">
不再范围
</span>

运算和 关系判断
运算符：+，-，*，/，%
关系比较：>,<,>=,<=,
相等比较：==，！=，(ep ,ne)

表达式基本对象：

1，模板引擎提供了一组内置的对象，这些内置的对象可以直接在模板中使用，这写对象由#号开始引用
#request


@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model, HttpServletRequest request){
        User user=new User();
        user.setId(1);
        user.setName("张三");
        user.setAge(18);
        model.addAttribute("user",user);

        List<User> list=new ArrayList<>();
        for (int i = 0; i <20 ; i++) {
            User users=new User();
            users.setId(i);
            users.setName("张三"+i);
            users.setAge(18+i);
          list.add(users);
        }
   model.addAttribute("list",list);
          request.setAttribute("Name","www.bai.com");
       return "list";
   }

}

html

<span th:text="${#request.getAttribute('Name')}">
name

</span>

在这里插入图片描述
#session

@Controller
public class UserController {


    @RequestMapping("/list")
   public String  test(Model model, HttpServletRequest request){
        User user=new User();
        user.setId(1);
        user.setName("张三");
        user.setAge(18);
        model.addAttribute("user",user);

        List<User> list=new ArrayList<>();
        for (int i = 0; i <20 ; i++) {
            User users=new User();
            users.setId(i);
            users.setName("张三"+i);
            users.setAge(18+i);
          list.add(users);
        }
   model.addAttribute("list",list);
        request.setAttribute("Name","www.bai.com");
        request.getSession().setAttribute("name","1");
       return "list";
   }

}

HTML

<span th:text="${#session.getAttribute('name')}">
name

</span>

<span th:inline="text">
  [[${#session.id}]]

</span>

在这里插入图片描述

　 T
关注
专栏目录
springboot之thymeleaf表达式
qq_37753562的博客
04-23 522
1、添加thymeleaf框架 2、添加依赖 <!--springboot框架集成thymeleaf依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> &
SpringBoot——Thymeleaf的表达式
★★光亭★★
05-20 7396
SpringBoot——Thymeleaf的表达式
springboot系列十一:Thymeleaf
最新发布
你好, 我在学java的博客
07-22 1387
springboot系列十一:Thymeleaf
springboot入门系列教程|第三篇：thymeleaf使用详解之标准表达式
mindcarver
09-03 1200
前言 &amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;nbsp;上一篇我们讲解了springboot如何结合thymeleaf,并且解释了static和templates文件夹的区别，以及介绍了thymeleaf如何解决html5的强校验问题，那么这篇我们就要上一
SpringBoot——Thymeleaf中的四种字面量（文本、数字、布尔、null）、字符串拼接、运算符
★★光亭★★
05-23 7115
SpringBoot——Thymeleaf中的四种字面量（文本、数字、布尔、null）、字符串拼接、运算符
Thymeleaf教程详解——SpringBoot学习
写Bug的小白的博客
04-11 4611
一、Thymeleaf 介绍   Thymeleaf 是用于 Web 和独立环境的现代服务器端Java模板引擎。其主要目标是将优雅的自然模板带到您的开发工作流程中— HTML 能够在浏览器中正确显示，并且可以作为静态原型，从而在开发团队中实现更强大的协作。   Thymeleaf 有六种模板模式，包括有 HTML，XML，JavaScript，CSS ，TEXT，RAW。 二、基本语法 1. 变量...
SpringBoot-Thymeleaf-A-B-Sample:SpringBoot Thymeleaf-A + B-样本
05-05
3. **集成Thymeleaf到Spring Boot**：Spring Boot提供了自动配置支持，只需要在`pom.xml`中添加Thymeleaf的依赖，然后在`application.properties`或`application.yml`中设置模板路径，即可完成基本集成。默认的模板...
Java学习资料-SpringBoot自带模板引擎Thymeleaf使用详解
11-07
Thymeleaf 可以与其他技术（如 Spring Security）无缝集成，例如，`th:if="${#security.isAuthenticated()}"` 可以检查用户是否已登录。 9. **自定义标签**： 如果需要更复杂的逻辑，可以创建自定义的 Thymeleaf ...
Springboot-thymeleaf-Mysql:Springboot +百里香叶+ Mysql + gradel
05-08
Thymeleaf 支持多种模板模式，如 HTML、XML、JavaScript 和 CSS，可以与 SpringBoot 集成，实现前后端的无缝协作。 MySQL 数据库作为关系型数据库，提供了强大的数据存储和查询功能。在 SpringBoot 应用中，我们...
springboot-thymeleaf
09-27
7. **Thymeleaf表达式**：Thymeleaf的表达式语言，包括属性表达式（`th:`开头）、文本表达式（`[[...]]`或`${...}`）和OGNL表达式（`#{...}`，用于国际化）等。 8. **Thymeleaf条件语句和循环结构**：如`th:if`、`...
springboot-mvc-thymeleaf-crud：Projeto SpringBoot MVC与Thymeleaf和MySQL
02-17
10. **Thymeleaf模板**: Thymeleaf模板文件（通常以`.html`结尾）是静态HTML，但可以包含Thymeleaf表达式和指令。这些表达式和指令在服务器端解析，将动态数据注入到HTML中。 11. **配置文件**: 项目中会有`...
【SpringBoot】| Thymeleaf 模板引擎
m0_61933976的博客
10-07 5503
【SpringBoot】| Thymeleaf 模板引擎
thymeleaf中th:href或th:action带参数的写法
HR的博客
07-15 3592
推荐写法，简单好看，可读性高，如果是多个参数用逗号（,）分隔 URL表达式: <form id="listForm" th:action="@{/album/reductionItems(uid=${session.user.getUid()})}" method="post"> URL表达式+拼接字符串:可读性不强 <a th:href="@{'/order.html?pageNum='+${pageInfo.prePage}}">上一页</a> <a
Thymeleaf (三) ---------Thymeleaf 属性
在森林里麋了鹿
03-22 5702
目录一、th:action 属性二、th:method 属性三、th:href 属性四、th:src 属性五、th:text 属性六、th:style 属性七、th:each 属性1、循环列表2、遍历数组 Array 大部分属性和 html 的一样，只不过前面加了一个 th 前缀。 加了 th 前缀的属性，是经过模版引擎处理的 一、th:action 属性 定义后台控制器的路径，类似标签的 action 属性，主要结合 URL 表达式,获取动态变量 <form id="login" th:actio
【学习笔记——SpringBoot 0106】Thymeleaf表单页面因th:object无后台对象传入而解析错误/An error happened during template parsing
XD_Yangf的博客
08-07 3914
此篇分享一个关于Thymeleaf表单提交的问题
thymeleaf的常用方法
yuzheh521的博客
03-18 537
thymeleaf的常用方法 使用之前要在html的标签加入 xmlns:th="http://www.thymeleaf.org" 例如: 路径,或者引入静态资源 语法:th:href="@{/}":可以直接获取项目的根目录 例如:th:href="@{/css/bootstrap.min.css}":引入css等静态资源 例如:th:href="@{/toUpdate}":跳转到toUp...
th:object、th:field、th:value 和 #dates.format 的冲突问题处理
weixin_34390105的博客
12-12 7762
若直接使用th:object 分解对象后,在搭配th:field="${#dates"使用#dates.format会抛出下面的异常: ------------------------------------------------------- 若搭配th:field="*{#dates"使用#dates.format会抛出下面的异常: 最后只能够这样,...
springboot入门之Thymeleaf篇
xxb5502296的博客
10-23 6945
Thymeleaf是一款模板引擎。她不同于一般地在模板里编码实现逻辑，而是利用了XML标签和属性，由模板引擎来执行这些DOM上预定义好的逻辑。
thymeleaf使用@{/}进行跳转
weixin_43196575的博客
07-17 4256
<form th:action="@{/login}" method="post" onsubmit="return verify()"> 使用@{/} 获取上下文可以避免打包成war 跳转项目名丢失问题 Jsp 的老方法${pageContext.request.contextPath}=Thymeleaf 的新方式 @{} ...
Springboot实战：03-集成Thymeleaf详解
本篇文章是关于Spring Boot框架的一个深入教程，着重讲解了如何在Spring Boot项目中集成Thymeleaf模板引擎。作者以"虾米大王教你学编程"为主题，旨在帮助读者从基础入门到实战操作，通过实例演示一步步构建一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

　 T

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

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

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

打赏作者

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

抵扣说明：

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

余额充值