首页 > 图灵资讯 > 技术篇>正文
Thymeleaf模板
2023-06-09 10:13:11
1.了解Thymeleaf92
Thymeleaf是一种流行的模板引擎，采用Java语言开发
模板引擎是一个技术术语，是跨领域、跨平台的概念。Java语言系统下有模板引擎
C#、PHP语言系统下也有模板引擎，模板引擎技术甚至用于JavaScript。Java生态下的模板引擎有Thymeleaf、Freemaker、Velocity、Beetl(国产)等。
Thymeleaf对网络环境没有严格的要求，可用于Web环境和非Web环境
下面。在非Web环境中，它可以直接显示模板上的静态数据；在Web环境中，它可以从后台接收数据，并替换模板上的静态数据，如Jsp。它以HTML为基础，以HTML标签为载体，
在HTML标签下实现Thymeleaf。
SpringBoot集成了Thymeleaf模板技术，SpringBoot官方也推荐使用Thymeleaf
Thymeleaf是替代JSP技术的另一种模板技术。它不属于Springboot。Springboot只是将这种模板技术集成得很好。作为前端页面的数据显示，在过去的Javaweb开发中，我们经常选择使用Jsp来完成页面的动态渲染，但jsp需要翻译和编译操作，效率低下
官方网站Thymeleaf：http://www.thymeleaf.org
官方手册Thymeleaf：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
再次强调
Thymeleaf：采用java开发的模板技术，在服务器端运行。将处理后的数据发送给浏览器。
模板是作为视图层工作的。显示数据。Thymeleaf是基于HTml语言的。Thymeleaf语法应用于
html标签中。springboot框架集成thymealeaf，用thymeleaf代替jsp。
2.第一个例子92创建SpringBoot项目：course14
选择依赖：92
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.12</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.bjpoewrnode</groupId> <artifactId>course14</artifactId> <version>0.0.1-SNAPSHOT</version> <name>course14</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <!--起步依赖模板发动机 93--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build></project>
创建92个模板文件
resources/templates/在目录下创建hellolo.html
<!--第一个Thymeleaff 92--><!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>hello.html</title></head><body> <h3>使用Thymeleaf的例子</h3> <p th:text="${data}">向显示数据~</p></body></html>
创建HelloThymeleafController922
package com.bjpoewrnode.controller;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.GetMapping;import javax.servlet.http.HttpServletRequest;///第一个Thymeleaff 92@Controllerpublic class HelloThymeleafController { @GetMapping("/hello") public String helloThymeleaf(HttpServletRequest request){ ///将数据添加到request作用域， 模板引擎可以从request中获取数据 request.setAttribute("data",“欢迎使用Thymeleaf模板引擎”; ///指定视图(模板引用的页面（html）） //逻辑名称 classpath:/templates/hello.html return "hello"; }}
#在开发阶段，关闭缓存，使修改立即生效 93spring.thymeleaf.cache=false#编码格式spring.thymeleaf.encoding=UTF-8#模板类型(默认为html，模板为html文件)spring.thymeleaf.mode=HTMl#模板前缀:类路径classpath:/templates/spring.thymeleaf.prefix=classpath:/templates/#后缀spring.thymeleaf.suffix=.html
4.Thymeleaf表达式94
course14_1代码
表达式是在页面上获取数据的thymeleaf语法。类似${key}
pom.xml
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.12</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.bjpowernode</groupId> <artifactId>course14_</artifactId> <version>0.0.1-SNAPSHOT</version> <properties> <java.version>1.8</java.version> </properties> <dependencies><!-- 依赖于模板的启动 94--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency><!-- web依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build></project>
applicationg.properties
server.port=9001server.servlet.context-path=/myboot#在开发阶段，关闭缓存，使修改立即生效 94spring.thymeleaf.cache=false#编码格式spring.thymeleaf.encoding=UTF-8#模板类型(默认为html，模板为html文件)spring.thymeleaf.mode=HTMl#模板前缀:类路径classpath:/templates/spring.thymeleaf.prefix=classpath:/templates/#后缀spring.thymeleaf.suffix=.html
4.1标准变量表达式95
注意：th:text=“Thymeleaf的属性，用于文本显示
语法:${key}
注：访问容器的标准变量表达式（tomcat）EL中的${}相是上下文环境中的变量
同样。Thymeleaf中的变量表达式使用${变量名}获取Controller中的model数据。
也就是说，request作用域的数据。
功能:为了获取key的文本数据，key是request作用域中的key，使request.setAttribute(),model.addAttribute()
在页面中的html标签中使用th:text="${key}"
Sysuser实体类Sysuser
package com.bjpowernode.model;///实体类 95public class SysUser { private Integer id; private String name; private String sex; private Integer age; public SysUser() { } public SysUser(Integer id, String name, String sex, Integer age) { this.id = id; this.name = name; this.sex = sex; this.age = age; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; }}
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title 95</title></head><body> <h3>index.html---学习Thymeleaf语法</h3> <a href="tpl/expression1> 标准变量表达式 </a></body></html>
ThymeleafController
////第一标准变量表达式 95 @GetMapping(/expression) public String expression(Model model){ ///将数据添加到Model model.addAttribute("site","www.bjpowernode.com"); model.addAttribute("myuser", new SysUser"李四"，"m",20)); //指定视图 return expression1; }
expression.html
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>标准变量表达式 95</title></head><body> <p style="margin-left: 400px"> <h3>标准变量表达式： ${key}</h3> <p th:text="${site}">key不存在</p> <br/> <p>获得Sysuser对象 属性值</p> <p th:text="${myuser.id}">id</p> <p th:text="${myuser.name}">姓名</p> <p th:text="${myuser.sex}">姓名：m男</p> <p th:text="${myuser.age}">年龄</p> <p th:text="${myuser.getName()}">使用getXXXX获取姓名</p> </p></body></html>
语法：*{key}
功能：获取key对应的数据，*{key}需要和th:一起使用object属性。目的是简单地获取对象的属性值。
说明:需要配和th:object一起使用。选择变量表达式，也称为星号变量表达式，使用th:用object属性绑定对象，选择表达式首先使用thject属性:object绑定到后台对象，然后用*代表对象，后{}中的值是对象中的属性。
选择变量表达式*{...}另一种类似于标准变量表达式${...}表示变量的方法
在执行过程中，选择变量表达式是在所选对象上求解，而选择变量表达式是在所选对象上求解${...}在上下文的变量model上求解
ThymeleafController
///选择标准变量表达式 96 @GetMapping(/expression2) public String expression2(Model model){ ///将数据添加到Model model.addAttribute("site","www.bjpowernode.com"); model.addAttribute("myuser", new SysUser"李四"，"m",20)); //指定视图 return expresion2; }
expression2.html
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>选择变量表达式 96</title></head><body> <p style="margin-left: 400px"> <h3>变量表达式的选择： *{key}</h3> <br/> <p>获得Sysuser对象 属性值</p> <p th:text="${myuser.id}">id</p> <p th:text="${myuser.name}">姓名</p> <p th:text="${myuser.sex}">姓名：m男</p> <p th:text="${myuser.age}">年龄</p> <p th:text="${myuser.getName()}">使用getXXXX获取姓名</p> <p>使用 *{} 获取Sysuser的属性值</p> <p th:object="${myuser}"> <p th:text="*{id}"></p> <p th:text="*{name}"></p> <p th:text="*{sex}"></p> <p th:text="*{age}"></p> </p> <p>使用*{}完成表示 对象的属性值</p> <p th:text="*{myuser.name}" ></p> </p></body></html>
语法：@{url}
功能:表示链接，可以
说明:主要用于链接和地址的显示，可用于，、、等等，数据可以在URL路径中动态获取
//链接表达式 97 @GetMapping("/link") public String link(Model model){ model.addAttribute("userId",1002); return "link"; } ////测试链接表达式地址 97 @GetMapping("/queryAccount") @ResponseBody public String queryAccount(Integer id){ return "queryAccount,参数id=+id; } //测试链接表达式地址有两个参数 97 @GetMapping("/queryUser") @ResponseBody public String queryUser(String name, Integer age){ return "queryUser,有两个参数：name="+name+",age="+age; }
link.html
<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org"><head> <meta charset="UTF-8"> <title>链接表达式 97</title></head><body> <h3>链接绝对路径</h3> <a th:href="@{http://www.baidu.com}">链接到百度</a> <h3>链接是相对地址</h3> <a th:href="@{/tpl/queryAccount}">相对地址，没有参数</a> <h3>链接的相对地址，使用字符串链接传输参数</h3> <a th:href="@{'/tpl/queryAccount?id='+ ${userId} }">获取model中的数据</a> <!id='+ ${userId} }">获取model中的数据</a> <!--解释路径中的单引号是为了添加参数--> </body></html>
<h3>推荐使用传参数的方式</h3> <a th:href="@{/tpl/queryAccount(id=${userId})}">传参数</a> <h3>传递多个参数</h3> <a th:href="@{/tpl/queryUser(name='lisi',age=20)}">传多个参数</a>
