本篇文章的学习
在这之前可以补充springboot的基础
详情可看我之前的文章

SpringBoot集成Thymeleaf

Thymeleaf 是一个流行的模板引擎，该模板引擎采用 Java 语言开发
Thymeleaf 是另外的一种模板技术，它本身并不属于 Spring Boot，Spring Boot只是很好地集成这种模板技术，作为前端页面的数据展示

在创建模板的时候还需要多选择一个这个在这里插入图片描述
之后默认会自动添加这些依赖

==Springboot 使用 thymeleaf 作为视图展示，约定将模板文件放置在src/main/resource/templates 目录下，静态资源放置在 src/main/resource/static 目录下==
创建一个控制层面

@Controller
public class UserController {

    @RequestMapping(value = "/message")
    public String message(Model model) {

        model.addAttribute("data","SpringBoot集成Thymeleaf模版引擎");

        return "message";
    }
}

页面这个要配置在特定的目录下
还要加上名称空间才能用她的函数xmlns:th="http://www.thymeleaf.org"
具体使用名称空间的text后的数据，如果有数据传入就会将其替代，如果没有数据才会显示后面的内容
具体底层是html，通过这个名称空间，以及他的函数才可以进行加载识别参数

xmlns:th="http://www.thymeleaf.org"
xmlns -> 命名空间
命名空间后面的地址是一个约束文件,约束你使用thymeleaf表达式
的一个规则文件,就好比我们之前在xml文件中的一此dtd文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    thymeleaf模版引擎的页面必须得通过中央调度器
-->
<h2 th:text="${data}">展示要显示的内容0</h2>
</body>
</html>

配置后启动

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

也可以配置一个视图解析器
默认是有视图解析器的
所谓的视图解析器，下面才是真实跳转的路径

#设置thymeleaf模版引擎的前/后缀,(可选项)
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

为什么使用了th前缀就可以获取后台数据?
那是因为项目中添加了thymeleaf的核心依赖,它的核心依赖会去
解析thymeleaf自己定义的这些标签名称,通过thymeleaf自己的java核心代码来获取我们的后台数据

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

1. 关闭缓存

不用再进行编译只有修改代码，刷新网页就会有显示

#设置thymeleaf模版引擎的缓存,设置为false关闭,默认为true开启
spring.thymeleaf.cache=false

之所以thymeleaf可以代替jsp，是因为jsp要渲染，编译了才可执行

还需要额外配置启动的更新资源在这里插入图片描述

2. 表达式

要配置一个依赖

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

Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取 Controller 中 model 其中的数据

th:text="" 是 Thymeleaf 的一个属性，用于文本的显示

向 model 放入 User 对象

public class User {

    private Integer id;

    private String username;

    private Integer age;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}

创建 user.html 页面获取 User 对象数据

@RequestMapping(value = "/user/detail")
public ModelAndView userDetail() {
    ModelAndView mv = new ModelAndView();
    User user = new User();
    user.setId(1001);
    user.setAge(23);
    user.setUsername("lisi");

    mv.setViewName("userDetail");
    mv.addObject("user",user);

    return mv;
}

==标准变量表达式== ${} （推荐）
html页面的主要功能

<h1>标准变量表达式:${} -> (推荐)</h1>
用户编号:<span th:text="${user.id}"></span><br/>
用户姓名:<span th:text="${user.username}"></span><br/>
用户年龄:<span th:text="${user.age}"></span><br/>

==选择变量表达式==

*{}必须使用th:object属性来绑定这个对象
在div子标签中使用*来代替绑定的对象${user}

<h1>选择变量表达式(星号表达式):*{} -> (不推荐)</h1>
<!--
    *{}必须使用th:object属性来绑定这个对象
    在div子标签中使用*来代替绑定的对象${user}
-->
<div th:object="${user}">
    用户编号:<span th:text="*{id}"></span><br/>
    用户姓名:<span th:text="*{username}"></span><br/>
    用户年龄:<span th:text="*{age}"></span><br/>
</div>

<h1>标准变量表达式与选择变量表达式的混合使用(不推荐)</h1>
用户编号<span th:text="*{user.id}"></span><br/>
用户年龄<span th:text="*{user.age}"></span><br/>
用户姓名<span th:text="*{user.username}"></span><br/>

下面讲解的是路径表达式中常用的区别
==路径表达式== @{...}

绝对路径跳转（不带参数）

<a href="http://www.baidu.com">传统写法:跳转至百度</a><br/>
<a th:href="@{http://www.bjpowernode.com}">路径表达式:路径到动力节点</a><br/>
<a th:href="@{http://localhost:8080/user/detail1}">跳转至:/user/detail1</a><br/>
<a href="http://localhost:8080/user/detail1">传统写法跳转至:/user/detail1</a><br/>

相对路径跳转（不带参数）

<h2>URL路径表达式,相对路径[没有参数](实际开发中推荐使用的)</h2>
<a th:href="@{/user/detail1}">跳转至:/user/detail1</a><br/>

绝对路径跳转（带参数）

<h2>绝对路径(带参数)(不推荐使用)</h2>
<a href="http://localhost:8080/test?username='zhangsan'">绝对路径,带参数:/test,并带参数username</a><br/>
<a th:href="@{http://localhost:8080/test?username=zhangsan}">路径表达工写法,带参数:/test,并带参数username</a><br/>

相对路径跳转（带参数）

<h2>相对路径(带参数)</h2>
<a th:href="@{/test?username=lisi}">相对路径,带参数</a>

<h2>相对路径(带参数:后台获取的参数值)</h2>
<!--/test?username=1001-->
<a th:href="@{'/test?username='+${id}}">相对路径:获取后台参数值</a>

<h2>相对路径(带多个参数:后台获取的参数值)</h2>
<!--
    /test1?id=1001&username=zhaoliu&age=28
-->
<a th:href="@{'/test1?id='+${id}+'&username='+${username}+'&age='+${age}}">相对路径(带多个参数:后台获取的参数值)</a>
<a th:href="@{/test1(id=${id},username=${username},age=${age})}">强烈推荐使用:@{}相对路径(带多个参数:后台获取的参数值)</a><br/>
<a th:href="@{'/test2/'+${id}}">请求路径为RESTful风格</a><br/>
<a th:href="@{'/test3/'+${id}+'/'+${username}}">请求路径为RESTful风格</a><br/>

在控制层面的代码为

@RequestMapping(value = "/user/detail1")
public String userDetail1(Model model) {
    User user = new User();
    user.setId(1002);
    user.setAge(24);
    user.setUsername("wangwu");

    model.addAttribute("user",user);

    return "userDetail";
}

@RequestMapping(value = "/url")
public String urlExpression(Model model) {

    model.addAttribute("id",1001);
    model.addAttribute("age",28);
    model.addAttribute("username","zhaoliu");

    return "url";
}


@RequestMapping(value = "/test")
public @ResponseBody String test(String username) {
    return "请求路径/test,参数是:" + username;
}

@RequestMapping(value = "/test1")
public @ResponseBody String test1(Integer id,String username,Integer age) {
    return "请求路径/test1,参数id=" + id+",username="+username+",age="+age;
}

@RequestMapping(value = "/test2/{id}")
public @ResponseBody String test2(@PathVariable("id") Integer id) {
    return "ID="+id;
}

@RequestMapping(value = "/test3/{id}/{username}")
public @ResponseBody String test3(@PathVariable("id") Integer id,
                                  @PathVariable("username") String username) {
    return "ID="+id+"----username="+username;
}

3. 常用属性

属性	描述
th:action	th:action 定义后台控制器的路径，类似标签的 action 属性，主要结合 URL 表达式,获取动态变量
th:method	设置请求方法
th:href	定义超链接，主要结合 URL 表达式,获取动态变量
th:src	用于外部资源引入，比如`<script>`标签的 src 属性，`<img>`标签的 src 属性，常与@{}表达式结合使用，在 SpringBoot 项目的静态资源都放到 resources 的 static 目录下。放到 static 路径下的内容，写路径时不需要写上 static
th:id	类似 html 标签中的 id 属性
th:name	设置名称
th:value	类似 html 标签中的 value 属性，能对某元素的 value 属性进行赋值
th:attr	给 HTML 中某元素的某属性赋值，好处是可以给 html 中没有定义的属性动态的赋值
th:text	用于文本的显示，该属性显示的文本在标签体中，如果是文本框，数据会在文本框外显示，要想显示在文本框内，使用 th:value
th:object	用于数据对象绑定,通常用于选择变量表达式（星号表达式）
th:onclick	点击按钮
th:style	设置样式
th:each	后台传来一个对象集合那么就可以使用此属性遍历输出，它与JSTL 中的`<c: forEach>`类似，此属性既可以循环遍历集合，也可以循环遍历数组及 Map
th:inline	有三个取值类型 (text, javascript 和 none)，值为 none 什么都不做，没有效果

比如

<form method="get" action="http://localhost:8080/test1">
    用户编号:<input type="text" name="id" /><br/>
    用户姓名:<input type="text" name="username" /><br/>
    用户年龄<input type="text" name="age" /><br/>
    <input type="submit" value="submit"/>
</form>

内敛文本（th:inline=”text”）

<div th:inline="text">

    数据:[[${data}]]

</div>
//或者直接使用
数据outside:[[${data}]]

内敛脚本（th:inline=”javascript”）

<h1>内敛脚本 th:inline="javascript"</h1>
<script type="text/javascript"  th:inline="javascript">
    function showData() {
        alert([[${data}]]);
        alert("----");
    }
</script>
<button th:onclick="showData()">展示数据</button>

4. 遍历元素

此处只po出关键代码

==遍历List 集合==

@RequestMapping("/each/list")
public String eachList(Model model) {
    List<User> userList = new ArrayList<User>();

    for (int i = 0; i < 10; i++) {
        User user = new User();
        user.setId(100 + i);
        user.setNick("张" + i);
        user.setPhone("1361234567" + i);
        user.setAddress("北京市大兴区" + i);
        userList.add(user);
    }
    model.addAttribute("userList", userList);
    model.addAttribute("data", "SpringBoot");
    return "eachList";
}

user 当前循环的对象变量名称(随意)
userStat 当前循环对象状态的变量(可选默认就是对象变量名称+Stat)
${userList} 当前循环的集合

count: 当前迭代对象的个数（从 1 开始计算）这两个用的较多
size: 被迭代对象的大小
current: 当前迭代变量
even/odd: 布尔值，当前循环是否是偶数/奇数（从 0 开始计算）
first: 布尔值，当前循环是否是第一个
last: 布尔值，当前循环是否是最后一个
注意：循环体信息 interStat 也可以不定义，则默认采用迭代变量加上 Stat 后缀，即 userStat

<div th:each="user,userStat:${userList}">
    <span th:text="${userStat.index}"></span>
    <span th:text="${userStat.count}"></span>
    <span th:text="${user.id}"></span>
    <span th:text="${user.nick}"></span>
    <span th:text="${user.phone}"></span>
    <span th:text="${user.address}"></span>
</div>

<div></div>
<div th:each="user:${userList}">
    <span th:text="${userStat.index}"></span>
    <span th:text="${userStat.count}"></span>
    <span th:text="${user.id}"></span>
    <span th:text="${user.nick}"></span>
    <span th:text="${user.phone}"></span>
    <span th:text="${user.address}"></span>
</div>

==遍历Map 集合==

@RequestMapping(value = "/each/map")
public String eachMap(Model model) {
    Map<Integer, Object> userMaps = new HashMap<Integer, Object>();

    for (int i = 0; i < 10; i++) {
        User user = new User();
        user.setId(i);
        user.setNick("李四" + i);
        user.setPhone("1390000000" + i);
        user.setAddress("天津市" + i);
        userMaps.put(i, user);
    }
    model.addAttribute("userMaps", userMaps);
    return "eachMap";
}

<div th:each="userMap,userMapStat:${userMaps}">
    <span th:text="${userMapStat.count}"></span>
    <span th:text="${userMapStat.index}"></span>
    <span th:text="${userMap.key}"></span>
    <span th:text="${userMap.value}"></span>
    <span th:text="${userMap.value.id}"></span>
    <span th:text="${userMap.value.nick}"></span>
    <span th:text="${userMap.value.phone}"></span>
    <span th:text="${userMap.value.address}"></span>
</div>


<div th:each="userMap:${userMaps}">
    <span th:text="${userMapStat.count}"></span>
    <span th:text="${userMapStat.index}"></span>
    <span th:text="${userMap.key}"></span>
    <span th:text="${userMap.value}"></span>
    <span th:text="${userMap.value.id}"></span>
    <span th:text="${userMap.value.nick}"></span>
    <span th:text="${userMap.value.phone}"></span>
    <span th:text="${userMap.value.address}"></span>
</div>

==遍历数组==

@RequestMapping(value = "/each/array")
public String eachArray(Model model) {

    User[] userArray = new User[10];

    for (int i = 0; i < 10; i++) {

        User user = new User();
        user.setId(i);
        user.setNick("赵六" + i);
        user.setPhone("1380000000" + i);
        user.setAddress("深圳市" + i);
        userArray[i] = user;

    }
    model.addAttribute("userArray", userArray);
    return "eachArray";
}

<h1>循环遍历Array数组(使用方法同list一样)</h1>
<div th:each="user,userStat:${userArray}">
    <span th:text="${userStat.index}"></span>
    <span th:text="${userStat.count}"></span>
    <span th:text="${user.id}"></span>
    <span th:text="${user.nick}"></span>
    <span th:text="${user.phone}"></span>
    <span th:text="${user.address}"></span>
</div>

==遍历混合组合==
List 里面放 Map，Map 里面又放的是 List
在这里插入图片描述

@RequestMapping(value = "/each/all")
public String eachAll(Model model) {
    //list -> Map -> List -> User
    List<Map<Integer, List<User>>> myList = new ArrayList<Map<Integer, List<User>>>();

    for (int i = 0; i < 2; i++) {

        Map<Integer, List<User>> myMap = new HashMap<Integer, List<User>>();
        for (int j = 0; j < 2; j++) {
            List<User> myUserList = new ArrayList<User>();
            for (int k = 0; k < 3; k++) {
                User user = new User();
                user.setId(k);
                user.setNick("张三" + k);
                user.setPhone("1350000000" + k);
                user.setAddress("广州市" + i);
                myUserList.add(user);
            }
            myMap.put(j, myUserList);
        }
        myList.add(myMap);

    }
    model.addAttribute("myList", myList);
    return "eachAll";
}

<h2>循环遍历复杂集合:list -> Map -> list -> User</h2>
<div th:each="myListMap:${myList}">
    <div th:each="myListMapObj:${myListMap}">
        Map集合的key:<span th:text="${myListMapObj.key}"></span>
        <div th:each="myListMapObjList:${myListMapObj.value}">
            <span th:text="${myListMapObjList.id}"></span>
            <span th:text="${myListMapObjList.nick}"></span>
            <span th:text="${myListMapObjList.phone}"></span>
            <span th:text="${myListMapObjList.address}"></span>
        </div>
    </div>
</div>

5. 条件判断

控制层类的代码没变

@Controller
public class UserController {

    @RequestMapping(value = "/condition")
    public String condition(Model model) {

        model.addAttribute("sex",1);

        model.addAttribute("flag",true);

        model.addAttribute("productType",0);


        return "condition";
    }
}

主要的区别是在于
下面的判断语句
==if判断==

<h1>th:if 用法:如果满足条件显示(执行),否则相反</h1>
<div th:if="${sex eq 1}">
    男
</div>
<div th:if="${sex eq 0}">
    女
</div>

==unless判断==

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

==switch判断==

<h1>th:switch/th:case用法</h1>
<div th:switch="${productType}">
    <span th:case="0">产品0</span>
    <span th:case="1">产品1</span>
    <span th:case="*">无此产品</span>
</div>

6. 字面量

字面量主要有

文本字面量，用单引号'....'的字符串就是字面量
数字字面量，用双引号数字就是字面量
boolean字面量
null字面量

主要的部分代码展示如下

<h1>文本字面量,用单引号'....'的字符串就是字面量</h1>
<a th:href="@{'/user/detail?sex=' + ${sex}}">查看性别</a>
<span th:text="Hello"></span>

<h1>数字字面量</h1>
今年是<span th:text="2020">1949</span>年<br/>
20年后是<span th:text="2020+20">1969</span>年<br/>

<h1>boolean字面量</h1>
<div th:if="${flag}">
    执行成功
</div>
<div th:if="${!flag}">
    不成功
</div>

<h1>null字面量</h1>
<span th:text="${user.id}"></span>
<div th:unless="${userDetail eq null}">
    对象已创建,地址不为空
</div>

<div th:if="${userDetail.id eq null}">
    空
</div>

7. 字符串拼接

这个拼接类似java代码
在html代码中的展示

<span th:text="'共'+${totalRows}+'条'+${totalPage}+'页,当前第'+${currentPage}+'页,首页 上一页 下一页 尾页'">共120条12页,当前第1页,首页 上一页 下一页 尾页</span>

8. 数学运算

三元运算：表达式?” 正确结果”:” 错误结果”
算术运算：+ , - , * , / , %
关系比较：> , < , >= , <= ( gt , lt , ge , le )
相等判断：== , != ( eq , ne )

表达式	描述
ne	not equal
eq	equal
ge	great equal
le	little equal
gt	great
lt	little

部分代码展示

<h1>三元运算符 表达式?正确:错误</h1>
<div th:text="${sex eq 1 ? '男':'女'}"></div>
<div th:text="${sex == 1 ? '男':'女'}"></div>

<h1>算术运算</h1>
20+5=<span th:text="20+5"></span><br/>
20-5=<span th:text="20-5"></span><br/>
20*5=<span th:text="20*5"></span><br/>
20/5=<span th:text="20/5"></span><br/>
20%3=<span th:text="20%3"></span><br/>

<h1>关系比较</h1>
5>2为<span th:if="5 gt 2">真</span><br/>
5>2为<span th:if="5 > 2">真</span><br/>
5<2<span th:unless="5 lt 2">真</span><br/>
5<2<span th:unless="5 < 2">真</span><br/>
1>=1<span th:if="1 ge 1">真</span><br/>
1>=1<span th:if="1 >= 1">真</span><br/>
1<=1<span th:if="1 le 1">真</span><br/>
1<=1<span th:if="1 <= 1">真</span><br/>

<h1>相等判断</h1>
<span th:if="${sex == 1}">男</span>
<span th:if="${sex eq 1}">男</span>
<span th:unless="${sex ne 1}">女</span>

SpringBoot集成Thymeleaf从入门到精通（全）

SpringBoot集成Thymeleaf

1. 关闭缓存

2. 表达式

3. 常用属性

4. 遍历元素

5. 条件判断

6. 字面量

7. 字符串拼接

8. 数学运算

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

SpringBoot集成Thymeleaf从入门到精通（全）

SpringBoot集成Thymeleaf

1. 关闭缓存

2. 表达式

3. 常用属性

4. 遍历元素

5. 条件判断

6. 字面量

7. 字符串拼接

8. 数学运算

热门文章

最新文章

相关课程

相关电子书

相关实验场景