SpringBoot入门学习笔记-13-thymeleaf模板引擎&本项目源码

Bill老罗

已于 2023-06-26 09:28:34 修改

阅读量289

点赞数

分类专栏： SpringBoot 入门学习笔记文章标签：学习笔记

于 2023-06-25 16:48:07 首次发布

本文链接：https://blog.csdn.net/gary_royal/article/details/131377879

版权

SpringBoot 入门学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

thymeleaf我们主要用来将html文本渲染生成一个html网页，返回给客户端。

模板引擎是一种可以把程序员提供的数据和模板通过模板引擎转换成固定格式来动态生成HTML的技术

thymeleaf是其中一个主流的模板引擎，也是springboot推荐的。

一、安装thymeleaf，添加spring-boot-starter-thymeleaf。

直接在mavn仓添加依赖即可，maven的话添加pom文件：

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

gradle的话，添加build.gradle:

 implementation group: 'org.springframework.boot', name: 'spring-boot-starter-thymeleaf'

二、在templates中添加静态资源html文件

随便写一个hello.html 示例文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Thymeleaf</title>
</head>
<body>
<p>hello,Thymeleaf!</p>

</body>
</html>

但是位置不能放错，项目src/main/resources/templates/hello.html

三、controller中返回html文件

  @RequestMapping("/hello")
    public String hello(Model model){
        return "hello.html";
    }

然后，我们通过网页访问就会看到写的html内的内容了。（POST也是可以的，看你RequestMapping中有没有限定请求类型）

注意：返回文件不能用@RestController，要用@Controller。

四、yml中配置常用属性

可以把像网页后缀，网页位置都在yml配置中设置好，比如默认的文件夹位置是templates也可以更改。常见配置参考spring.thymeleaf：

spring:
  application:
    name: laoluo-base
  thymeleaf:
    # 关闭thymeleaf的缓存，开发过程中无需重启
    cache: false
    # 设置默认编码
    encoding: utf-8
    mode: HTML5
    # 设置页面后缀
    suffix: .html
    # 设置页面的存储路径
    prefix: classpath:/templates/

这样配置以后就会全局生效，比如原来

return "hello.html"，就可以改为return "hello";

五、设置属性。

在Controller中，我们看到有一个Model类型的model参数，这个就是用来传参的。

1、我们先看传参示例：

    @RequestMapping("/hello")
    public String hello(Model model){
        // 传单个参数
        model.addAttribute("hello","hello Thymeleaf！");
        
        // 通过map传参
        HashMap hashMap =new HashMap<>();
        hashMap.put("k1","k1value");
        hashMap.put("k2","k2value");
        hashMap.put("k3","k3value");
        model.addAllAttributes(hashMap);
        
        return "hello";
    }

完整截图：

2、看接收参数示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Thymeleaf</title>
</head>
<body>
<p>hello,Thymeleaf!</p>
<h1 th:text="${hello}"></h1>
<h1 th:text="${k1}"></h1>
<h1 th:text="${k2}"></h1>
<h1 th:text="${k3}"></h1>
</body>
</html>

截图：

3、我们也可以传map对象。

通过model传一个对象

model.addAttribute("map",hashMap);通过"${map.key}"获取值。

        HashMap hashMap =new HashMap<>();
        hashMap.put("k1","k1value");
        hashMap.put("k2","k2value");
        hashMap.put("k3","k3value");
        model.addAttribute("map",hashMap);

六、Thymeleaf 语法。

Thymeleaf的主要作用是把model中的数据渲染到html中，因此其语法主要是如何解析model中的数据，因此其语法主要是如何解析model中的数据。

1、内置方法和对象。

一些环境相关对象
对象    作用
#ctx    获取Thymeleaf自己的Context对象
#requset    如果是web程序，可以获取HttpServletRequest对象
#response    如果是web程序，可以获取HttpServletReponse对象
#session    如果是web程序，可以获取HttpSession对象
#servletContext    如果是web程序，可以获取HttpServletContext对象
Thymeleaf提供的全局对象：
对象    作用
#dates    处理java.util.date的工具对象
#calendars    处理java.util.calendar的工具对象
#numbers    用来对数字格式化的方法
#strings    用来处理字符串的方法
#bools    用来判断布尔值的方法
#arrays    用来护理数组的方法
#lists    用来处理List集合的方法
#sets    用来处理set集合的方法
#maps    用来处理map集合的方法

2、使用示例，hello.html中通过${name}使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Thymeleaf</title>
</head>
<body>
<p>hello,Thymeleaf!</p>
<!--在JSP中通过EL表达式进行获取-->
<!--${hello}-->
<!--HTML中用法-->

    这样直接引用变量无效。
    <p>${hello}</p>

    可以放在一些无意义的标签，通过th:text方法引用
    <p><span th:text="${hello}"></span></p>

    内置对象使用示例,toLowerCase：
    <div th:text="${#strings.toLowerCase(hello)}">

</body>
</html>

3、Thymeleaf 还提供了大量的 th 属性，这些属性可以直接在 HTML 标签中使用，其中常用 th 属性及其示例如下表。

更多的属性下表，以下更摘录自Thymeleaf教程（10分钟入门） (biancheng.net)

属性	描述	示例
th:id	替换 HTML 的 id 属性	<input id="html-id" th:id="thymeleaf-id" />
th:text	文本替换，转义特殊字符	<h1 th:text="hello，bianchengbang" >hello</h1>
th:utext	文本替换，不转义特殊字符	<div th:utext="'<h1>欢迎来到编程帮！</h1>'" >欢迎你</div>
th:object	在父标签选择对象，子标签使用 *{…} 选择表达式选取值。没有选择对象，那子标签使用选择表达式和 ${…} 变量表达式是一样的效果。同时即使选择了对象，子标签仍然可以使用变量表达式。	<div th:object="${session.user}" > <p th:text="*{fisrtName}">firstname</p> </div>
th:value	替换 value 属性	<input th:value = "${user.name}" />
th:with	局部变量赋值运算	<div th:with="isEvens = ${prodStat.count}%2 == 0" th:text="${isEvens}"></div>
th:style	设置样式	<div th:style="'color:#F00; font-weight:bold'">编程帮 www.biancheng.net</div>
th:onclick	点击事件	<td th:onclick = "'getInfo()'"></td>
th:each	遍历，支持 Iterable、Map、数组等。	<table> <tr th:each="m:${session.map}"> <td th:text="${m.getKey()}"></td> <td th:text="${m.getValue()}"></td> </tr> </table>
th:if	根据条件判断是否需要展示此标签	<a th:if ="${userId == collect.userId}">
th:unless	和 th:if 判断相反，满足条件时不显示	<div th:unless="${m.getKey()=='name'}" ></div>
th:switch	与 Java 的 switch case语句类似通常与 th:case 配合使用，根据不同的条件展示不同的内容	<div th:switch="${name}"> <span th:case="a">编程帮</span> <span th:case="b">www.biancheng.net</span> </div>
th:fragment	模板布局，类似 JSP 的 tag，用来定义一段被引用或包含的模板片段	<footer th:fragment="footer">插入的内容</footer>
th:insert	布局标签；将使用 th:fragment 属性指定的模板片段（包含标签）插入到当前标签中。	<div th:insert="commons/bar::footer"></div>
th:replace	布局标签；使用 th:fragment 属性指定的模板片段（包含标签）替换当前整个标签。	<div th:replace="commons/bar::footer"></div>
th:selected	select 选择框选中	<select> <option>---</option> <option th:selected="${name=='a'}"> 编程帮 </option> <option th:selected="${name=='b'}"> www.biancheng.net </option> </select>
th:src	替换 HTML 中的 src 属性	<img th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" />
th:inline	内联属性；该属性有 text、none、javascript 三种取值，在 <script> 标签中使用时，js 代码中可以获取到后台传递页面的对象。	<script type="text/javascript" th:inline="javascript"> var name = /[[${name}]]/ 'bianchengbang'; alert(name) </script>
th:action	替换表单提交地址	<form th:action="@{/user/login}" th:method="post"></form>