013-springboot-thymeleaf-常用属性

最新推荐文章于 2023-03-07 17:12:36 发布

AlluzeYu

最新推荐文章于 2023-03-07 17:12:36 发布

阅读量3k

点赞数 2

分类专栏： SpringBoot 文章标签： java

本文链接：https://blog.csdn.net/allurelover/article/details/117388077

版权

SpringBoot 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1、创建 SpringBoot 的 web 项目并使用模版引擎

1.1 创建module

020-springboot-thymeleaf-property

1.2 查看pom文件的依赖

pom.xml中应该有以下两个依赖

1.3 编辑核心配置文件

1.4 引入lombok依赖

 	<dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
    </dependency>

1.5 创建User实体类

1.6 创建PropertyController类

package com.zzy.springboot.web;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class PropertyController {
    @RequestMapping(value = "/index")
    public String index(Model model){
        model.addAttribute("data", "thymeleaf的常用属性");
        return "index";
    }
}

1.7 在src/main/resources/templates下创建index页面

引入thymeleaf的命名空间
xmlns:th=“http://www.thymeleaf.org”

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 th:text="${data}"></h1>
</body>
</html>

1.8 测试访问

启动

访问：
http://localhost:8020/index

2、th:action属性

2.1 th:action

th:action 但是定义后台空值器的路径，
		  类似于<form>表单表球按中的action属性
		  主要给URL表达式获取动态变量

2.2 在index.html页面上添加以下内容

<!--th:action属性的使用-->
    <h1>th:action属性的使用</h1>
    <h2>请求路径中需要动态获取变量数据时，必须添加th：前缀</h2>
    <form th:action="@{'/user/login/?id='+${user.id}}"></form>
    <h2>以下两种方式获取不到用户 id</h2>
    <form action="'/user/login?id='+${user.id}"></form>
    <form action="/user/login"+${user.id}></form>

2.3 编辑PropertyController中index方法中添加如下代码

/**
     * 测试环境搭建的方法
     * 侧首th:action属性的使用
     * @param model
     * @return
     */
    @RequestMapping(value = "/index")
    public String index(Model model){
        model.addAttribute("data", "thymeleaf的常用属性");
        User user = new User();
        user.setId(1);
        user.setName("詹姆斯");
        user.setPhone("23");
        user.setAdress("洛杉矶");
        model.addAttribute("user", user);
        return "index";
    }

2.4 运行访问

http://localhost:8020/index

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

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

3、th:method属性

th:method：是用来设置请求方法的类型

<!--th：method属性的使用-->
    <h1>th:method属性的使用</h1>
    <form th:action="@{/login}" th:method="post">...post方式提交</form>

4、th:href属性

4.1 th:href的使用

th:gref: 是用来定义超链接，主要结合URL表达式，获取动态变量

4.2 编辑index.html

 <!--th:href属性的使用-->
    <h1>th:href属性的使用</h1>
    <a href="http://www.baidu.com">传统方式：超链接百度</a>
    <a th:href="'http://www.baidu.com?id=' + ${user.id}">th:href 链接</a>

4.3 运行访问

5、th:src属性

5.1 th:src使用

th:src ：用于外部资源的引入，
	比如:<script>标签的src属性，
	<img>标签的src属性，常与路径表达式@{}结合使用，
	springboot静态资源都放到了static目录下，
	在static目录下的内容，写路径时不需要写上static

5.2 编辑index.html

<!--th:src属性的使用-->
        <h1>th:src属性的使用</h1>
        <!--以下方式无法引入 js-->
        <script src="/static/jquery-3.6.0.min.js"></script>
        <!--该方法是常用方法-->
        <script type="text/javascript" th:src="@{/jquery-3.6.0.min.js}"></script>
        <script>
            $(function () {
                alert("引入js")
            });
        </script>

5.3 运行访问

http://localhost:8020/index

6、th:id 、th:name属性

6.1 id和name的使用

th:id ：类似 html 标签中的 id 属性
th:name：设置名称

6.2 编辑index.html

<!--th:id th:name属性的使用-->
    <h1>th:id th:name属性的使用</h1>
    <form th:action="@{/submit}" th:method="post">
        用户编号：<input type="text" th:id="id" th:name="id"><br>
        用户名称：<input type="text" th:id="name" th:name="username"><br>
        提交：<input type="submit" value="提交">
    </form>

6.3 编辑PropertyController

   /**
     * th:id 和 th:name属性
     * @param id
     * @param username
     * @return
     */
    @PostMapping(value = "/submit")
    @ResponseBody
    public String submit(Integer id,String username){
        return "用户编号是："+id+"用户名称是："+username;
    }

6.3 运行访问

http://localhost:8020/index

文本框输入id和用户名

点击提交按钮

6.4 查看页面元素

7、th:value属性

7.1 th:value的用法

类似HTNL中的value属性，能对元素的value属性进行赋值
< input type=“hidden” id=“userId” name=“userId” value="${user.id}" >

7.2 编辑index.html

 <!--th:value属性的使用-->
    <h1>th:value属性的使用</h1>
    <input type="hidden" id="userId" name="userId" th:value="${user.id}">

7.3 运行访问检察元素

8、th:attr属性

8.1 th:attr的用法

用于给HTML中的元素的属性赋值，好处是给html中没有定义的属性赋值

8.2 编辑index.html

 <!--th:attr属性的使用-->
    <h1>th:attr属性的使用</h1>
    <span tom="${user.name}"></span><br>
    <span th:attr="tom=${user.name}"></span>

8.3 运行访问检查元素

9、th:text属性

9.1 th:text的用法

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

9.2 编辑index.html

<!--th:text属性的使用-->
    <h1>th:text属性的使用</h1>
    <input type="text" id="uAdd" name="uAddress" th:text="${user.adress}">

9.3 运行访问检查元素

10、th:object属性

用于数据对象的绑定
通常用于选择变量表达式（星号表达式）

11、th:onclick属性

11.1 th:onclick的使用

点击事件

11.2 编辑index.html

 <!--th:onclick属性的使用-->
    <h1>th:onclick属性的使用</h1>
    <button th:onclick="'getId('+${user.id}+')'">用户编号</button>
    <button th:onclick="getName([[${user.name}]])">用户姓名</button>
    <script type="text/javascript">
        function getId(id) {
            console.log(id);
        };
        function getName(name) {
            console.log(name);
        }
    </script>

11.3 运行访问F12

点击按钮查看控制台

检查元素

12、th:style属性

设置样式

13、th:each属性

13.1 th:each的使用

这个属性非常常用，比兔后台传递一个对象集合，可以使用此属性进行遍历输出，与JSTL中的<c:foreach>类似，
此属性可以遍历集合，也可以遍历数组和map

13.2 th:each遍历List集合

13.2.1 编辑EachUserController

package com.zzy.springboot.web;
import com.zzy.springboot.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class EachUserController {
    @RequestMapping(value = "/each/list")
    public String eachList(Model model){
        List<User> userlist = new ArrayList<>();
        for (int i=0;i<10;i++){
           User user = new User();
           user.setId(100+i);
           user.setName("tom"+i);
           user.setPhone("95533"+i);
           user.setPhone("石景山"+i);
           userlist.add(user);
        }
        model.addAttribute("userlist", userlist);
        return "eachListUser";
    }
}

13.2.2 在src/main/resources/temolates目录下创建eachListUser.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--th:each属性遍历list集合-->
    <H1>th:each属性遍历list集合</H1>
    <!--
        user:当前循环的对象变量名称
        userStat:当前循环对象状态的变量(可写可不写 默认存在)
        ${userList} 当前遍历的结合
    -->
    <div th:each="user,userStst:${userlist}">
        <span th:text="${user.id}"></span>
        <span th:text="${user.name}"></span>
        <span th:text="${user.phone}"></span>
        <span th:text="${user.adress}"></span>
        <!--计数-->
        <span th:text="${userStst.count}"></span>
        <!--当前user对象-->
        <!--<span th:text="${userStst.current}"></span>-->
        <!--下标-->
        <span th:text="${userStst.index}"></span>
    </div>
</body>
</html>

13.2.3 遍历关键字说明

< div th:each=“user,userStst:${userList}” >

user
定义变量，用于接收遍历${userList}集合中的一个数据
userStat
${userList} 循环体的信息
其中 user 及 iterStat 自己可以随便取名
iterStat
是循环体的信息，通过该变量可以获取如下信息
- index: 当前迭代对象的 index（从 0 开始计算）
- count: 当前迭代对象的个数（从 1 开始计算）这两个用的较多
- size: 被迭代对象的大小
- current: 当前迭代变量
- even/odd: 布尔值，当前循环是否是偶数/奇数（从 0 开始计算）
- first: 布尔值，当前循环是否是第一个
- last: 布尔值，当前循环是否是最后一个
- 注意：循环体信息 interStat 也可以不定义，则默认采用迭代变量加上 Stat 后缀，即 userStat

13.2.4 运行访问

http://localhost:8020/each/list

13.3 th:each遍历map

13.3.1 编辑EachUserController

 /**
     * th:each遍历map集合
     * @param model
     * @return
     */
    @RequestMapping(value = "/each/map")
    public String eachMap(Model model){
        Map<Object,Object> userMaps = new HashMap<>();
        for (int i=0;i<10;i++){
            User user = new User();
            user.setId(200+i);
            user.setName("亚当斯"+i);
            user.setPhone("12号"+i);
            user.setAdress("俄克拉荷马");
            userMaps.put(i, user);
        }
        model.addAttribute("userMaps", userMaps);
        return "eachMapUser";
    }

13.3.2 在src/main/resources/temolates目录下创建eachMapUser.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--th:each遍历Map集合-->
    <h1>th:each遍历Map集合</h1>
    <!--
        Map 集合结构
        key    value
        1       user
        2       user
        3       user
        4       user
        5       user
    -->
    <div th:each="userMap,userMapStat:${userMaps}">
        <span th:text="${userMapStat.count}"></span> <!--计数-->
        <span th:text="${userMapStat.index}"></span> <!--下标-->
        <!--遍历map中的key-->
        <span th:text="${userMap.key}"></span>
        <span th:text="${userMap.value}"></span>
        <span th:text="${userMap.value.id}"></span>
        <span th:text="${userMap.value.name}"></span>
        <span th:text="${userMap.value.phone}"></span>
        <span th:text="${userMap.value.adress}"></span>
    </div>
</body>
</html>

13.3.3 运行访问

http://localhost:8020/each/map

13.3.4 代码说明

th:each=“userMap,userMapStat:${userMaps}” ，

userMap 变量接收每次遍历的结果，封装
为一个键值对，
userMapStat 状态
userMap.key：获取当前键值对中的 key
userMap.value：获取当前键值对中的 value

13.4 th:each遍历数组

13.4.1编辑EachUserController

   /**
     * th:each属性遍历array数组
     * @param model
     * @return
     */
    @RequestMapping(value = "/each/array")
    public String eachArray(Model model){
        User[] userArrays = new User[10];
        for (int i=0;i<10;i++){
            User user = new User();
            user.setId(300+i);
            user.setName("哈里斯"+i);
            user.setPhone("20"+i);
            user.setAdress("布鲁克林篮网"+i);
            userArrays[i] =user;
        }
        model.addAttribute("userArrays",userArrays);
        return "userArraysUser";
    }

13.4.2 在src/main/resources/temolates目录下创建eachArraysUser.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--th:each遍历数组-->
    <h1>th:each遍历数组</h1>
    <div th:each="user,userStat:${userArrays}">
        <span th:text="${user.id}"></span>
        <span th:text="${user.name}"></span>
        <span th:text="${user.phone}"></span>
        <span th:text="${user.adress}"></span>
    </div>
</body>
</html>

13.4.3 运行访问

http://localhost:8020/each/array

13.5 th:each编辑复杂集合

13.5.1 遍历案例

需求：需求：List 里面放 Map，Map 里面又放的是 List，List里面放的是User对象

13.5.2 编辑EachUserController

 /**
     * th:each属性遍历复杂几何
     * list--map--list--user
     * @param model
     * @return
     */
    @RequestMapping(value = "/each/all")
    public String eachAll(Model model){
        List<Map<Integer,List<User>>> myList = new ArrayList<>();
        for (int i=0;i<2;i++){
            Map<Integer,List<User>> myMap = new HashMap<>();
                for (int j=0;j<2;j++){
                    List<User> userList = new ArrayList<>();
                        for (int k=0;k<5;k++){
                            User user = new User();
                            user.setId(888+k);
                            user.setName("恩比德"+k);
                            user.setPhone("21"+k);
                            user.setAdress("费城"+k);
                            userList.add(user);
                        }
                    myMap.put(j, userList);
                }
            myList.add(myMap);
        }
        model.addAttribute("myList", myList);
        return "eachAllUser";
    }

13.5.3 在src/main/resources/temolates目录下创建eachAllUser.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--th:each属性遍历复杂集合-->
    <h1>th:each属性遍历复杂集合</h1>
    <!--外层list中的map-->
    <div th:each="myListMap,listMapStst:${myList}">
        <!--map中的key和value-->
        <div th:each="mylistMapObj:${myListMap}">
            <!--map集合中key和value，value是List<User>-->
            map集合key：<span th:text="${mylistMapObj.key}"></span>
                <!--遍历map.value-->
                <div th:each="mylistMapObjList:${mylistMapObj.value}">
                    <span th:text="${mylistMapObjList.id}"></span>
                    <span th:text="${mylistMapObjList.name}"></span>
                    <span th:text="${mylistMapObjList.phone}"></span>
                    <span th:text="${mylistMapObjList.adress}"></span>
                </div>
        </div>
    </div>
</body>
</html>

13.5.4 运行访问

http://localhost:8020/each/all

14、 th:if th:unless th:switch/th:case属性

14.1 属性介绍

th:if 用法:如果满足条件显示，否则相反
th:unless 用法：与 th:if 用法相反，即对判断条件取反
th:switch/th:case：判断case执行与否

14.2 编辑PropertyController

    /**
     * th:if unless switch case属性的使用
     * @param request
     * @param model
     * @return
     */
    @RequestMapping(value = "/condition")
    public String ifUnlessSwitch(HttpServletRequest request,Model model){
        model.addAttribute("sex",1);
        model.addAttribute("flag", true);
        model.addAttribute("state", 1);
        return "ifUnlessSwitch";
    }

14.3 在src/main/resources/temolates目录下创建ifUnlessSwitch.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--th:if用法：如果满足条件执行，否则不执行-->
    <h1>th:if用法：如果满足条件执行，否则不执行</h1>
    <div th:if="${sex eq 1}">
        男
    </div>
    <div th:if="${sex eq 0}">
        女
    </div>


    <!--th:unless用法：与th:if用法相反，即条件判断取反-->
    <h1>th:unless用法：与th:if用法相反，即条件判断取反</h1>
    <div th:unless="${sex ne 1}">
        男
    </div>

    <!---th:switch/th:case的用法-->
    <h1>th:switch/th:case 的用法</h1>
    <div th:switch="${state}">
        <span th:case="0">产品0</span>
        <span th:case="1">产品1</span>
        <span th:case="*">没有此产品</span> <!--既不满足1 也不满足0-->
    </div>

</body>
</html>

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

14.4 运行访问

http://localhost:8020/condition

15、th:inline = “text” 内敛文本 — [[表达式]]

15.1 什么是内敛文本

th:inline 有三个取值类型 (text, javascript 和 none)，值为 none 什么都不做，没有效果
内敛文本表达式不依赖于 html 标签，直接使用内敛表达式[[表达式]]即可获取动态数据，但必须要求在父级标签上加 th:inline = “text”属性

15.2 编辑InLineController


    /**
     * th:inline内敛文本使用
     * @param model
     * @return
     */
    @RequestMapping(value = "/inline")
    public String inline(Model model){
        User user = new User();
        user.setId(47);
        user.setName("AK47");
        user.setPhone("47");
        user.setAdress("RUS");
        model.addAttribute("user", user);
        return "inline";
    }

15.3 在src/main/resources/temolates目录下创建inLine.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>内敛文本</title>
</head>
<body>
    <h1>标准变量表达式获取数据</h1>
    <div>
        用户编号：<span th:text="${user.id}"></span><br>
        用户名称：<span th:text="${user.name}"></span><br>
        用户电话：<span th:text="${user.phone}"></span><br>
        用户地址：<span th:text="${user.adress}"></span>
    </div>

    <h1>内敛文本获取数据 th:inline="text"</h1>
    <div th:inline="text">
        <span>[[${user.id}]]</span><br>
        <span>[[${user.name}]]</span><br>
        <span>[[${user.phone}]]</span><br>
        <span>[[${user.adress}]]</span><br>
    </div>
    <!--注意：一般我们将 th:inline="text"放到<body th:inline="text">标签中-->
</body>
</html>

-注意：一般我们将 th:inline="text"放到标签中

15.4 运行访问

http://localhost:8020/inline

16、th:inline = “javascript” 内敛脚本

16.1 内敛脚本的作用

th:inline=”javascript”在 js 代码中获取后台的动态数据

16.2 在 inline.html 页面上，添加如下代码

<!--内敛脚本获取后台数据-->
    <h1>内敛脚本动态获取数据 th:inline="javascript"</h1>
    <button th:onclick="showdata()">展示数据</button>
    <script type = "text/javascript" data-th-inline="javascript">
        function showdata() {
            alert([[${user.name}]]);
        }
    </script>

16.3 运行访问

http://localhost:8020/inline

AlluzeYu

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
013-springboot-thymeleaf-常用属性

1、创建 SpringBoot 的 web 项目并使用模版引擎1.1 创建module020-springboot-thymeleaf-property1.2 查看pom文件的依赖pom.xml中应该有以下两个依赖1.3 编辑核心配置文件1.4 引入lombok依赖 <dependency> <groupId>org.projectlombok</groupId> <artifactId>lom
复制链接

扫一扫

专栏目录