SpringBoot-基础-03-thymeleaf模板引擎

溜溜打工日记

已于 2022-10-26 17:00:30 修改

阅读量454

点赞数

文章标签： java spring 前端

于 2022-10-25 16:19:00 首次发布

本文链接：https://blog.csdn.net/m0_59588925/article/details/127510439

版权

SpringBoot-基础-03-thymeleaf模板引擎

我们写好一个页面模板，如果需要值动态改变，可以使用表达式，模板引擎收到模板以及数据，解析对应的表达式，将数据填充到指定位置，产生最终的html页面，达到数据渲染的效果。

一、thymeleaf语法规则

1、th属性，常用th属性如下：

 （1）th:text: 文本替换
 （2）th:utext：支持html的文本替换（可以解析html）
 （3）th:value： 属性赋值
 （4）th:each：遍历循环元素
 （5）th:if：判断条件，类似的还有th：unless，th:switch，th:case
 （6）th:insert：代码块引入，类似的还有th:replace，th:include，当用于公共代码快提取的场景
 （7）th:fragment：定义代码块，方便被th:insert引用
 （8）th:object：声明变量，一般和*{}配合使用
 （9）th:attr：设置标签属性，多个属性可以用逗号分隔

2、标准表达式语法：

 ${,,,} 变量表达式
 @{...} 链接表达式
 #{...} 消息表达式
 ~{...} 代码块表达式
 *{...} 选择变量表达式

（1）~{…}代码块表达式

支持两种语法：_{{templatename::fragementname}/}{templatename::#id}
其中，templatename为/resources/templates下的html文件名称
fragementname即通过th:fragement=“fragementname”声明的代码块
不支持class选择器

// 示例：
    <div th:insert="~{grammar/common::thCommon}"></div>

（2）@{…}链接表达式

链接表达式可以动态获取项目路径
表达式结构：
无参： @{/xxx}
有参：@{/xxx(k1=v1,k2=v2)}，对应url结构：xxx?k1=v1&k2=v2
引入本地资源：@{/项目本地的资源路径}
引入外部资源：@{/webjars/资源在jar包中的路径}

//引入本地资源
<link th:href="@{/main/css/itdragon.css}" rel="stylesheet">
//引入外部资源
<link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
//无参
<for
m class="form-login" th:action="@{/user/login}" th:method="post" >
//有参
<a class="btn btn-sm" th:href="@{/login.html(l='zh_CN')}">中文</a>

（3）${…}变量表达式

（1）获取对象的属性和方法
（2）使用ctx、vars、locale、request、response、session、servletContext内置对象
（3）使用dates、numbers、Strings、objects、arrays、lists、sets、maps等内置方法

<div  th:text="${hello}"></div>

二、thymeleaf基本使用

1、基本结构

HelloController.class控制层

@Controller
public class HelloController {
   @RequestMapping("/success")
   public String success(Map<String, Object> map) {
       map.put("hello", "通过模板引擎跳转到success.html页面");
       return "success";
   }
   @RequestMapping("/login")
   public Object login(Map<String,Object> map) {
       List<String> list=new ArrayList<String>();
       list.add("teacher1");
       list.add("teacher2");
       list.add("teacher3");
       map.put("name", "小明");
       map.put("persons",list);
       map.put("sex","女");
       List<Student3> students=new ArrayList<Student3>();
       students.add(new Student3("同学1",13));
       students.add(new Student3("同学2",13));
       map.put("classmates",students);
       return "login";
   }
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf语法</title>
</head>
<body>
<!--插入代码块-->
<div th:insert="~{success::success}"></div>
<!--链接表达式-->
<a th:href="@{/success}">链接2</a>

<!--${}变量表达式-->
<p th:text="${name}"></p>

<div th:each="person : ${persons}">
<p th:text="${person}"></p>
</div>

<div>
    <p th:text="${person}" th:each="person : ${persons}"></p>
</div>

<div th:if="${not #strings.isEmpty(sex)}">
    <p th:text="${classmate.name}" th:each="classmate : ${classmates}">
</div>

</body>
</html>

success.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 th:fragment="success">成功！</h1>
</body>
</html>

2、thymeleaf模板依赖

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

3、模板引擎配置类

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {

	private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8");

	private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html");

	public static final String DEFAULT_PREFIX = "classpath:/templates/";//前缀

	public static final String DEFAULT_SUFFIX = ".html";//后缀