模板引擎之Thymeleaf
thymeleaf概述
Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。
Thymeleaf是一种类似于JSP的动态网页技术
JSP 必须依赖Tomcat运行，不能直接运行在浏览器中。HTML可以直接运行在浏览器中，但是不能接收控制器传递的数据
Thymeleaf是一种既保留了HTML的后缀能够直接在浏览器运行的能力、又实现了JSP显示动态数据的功能——静能查看页面效果、动则可以显示数据
官网：https://www.thymeleaf.org/
Thymeleaf快速入门
引入依赖
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.12.RELEASE</version>
</dependency>
创建模板
static目录
static目录下的资源被定义静态资源，SpringBoot应用默认放行；如果将HTML页面创建static目录是可以直接访问的
templates目录
templates目录下的文件会被定义为动态网页模板，SpringBoot应用会拦截templates中定义的资源；如果将HTML文件定义在templates目录，则必须通过控制器跳转访问。
Thymeleaf模板就是HTML文件，在resources目录下创建test.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Thymeleaf</title>
</head>
<body>
<span th:text="${name}"></span>
</body>
</html>
生产模板
public static void main(String[] args) throws FileNotFoundException, UnsupportedEncodingException {
//创建上下文
Context context = new Context();
//创建数据模型
Map<String, Object> dataModel = new HashMap();
dataModel.put("name", "Hello Thymeleaf");
context.setVariables(dataModel);
//准备文件
File file = new File("d:/testOut.html");
//生成页面
PrintWriter writer = new PrintWriter(file, "UTF-8");
//模板解析器
ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
//模板模型
resolver.setTemplateMode(TemplateMode.HTML);
//指定后缀
resolver.setSuffix(".html");
//创建模板引擎
TemplateEngine engine = new TemplateEngine();
//设置模板解析器
engine.setTemplateResolver(resolver);
//执行模板引擎，test是模板名称
engine.process("test", context, writer);
}
浏览器访问
Thymeleaf基本语法
如果要在thymeleaf模板中获取从控制传递的数据，需要使用th标签
在thymeleaf模板页面引入th标签的命名空间
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
th:text
几乎所有的HTML双标签都可以使用 th:text属性，将接收到的数据显示在标签的内容中
<p th:text="${name}">属性name</p>
th:inline内联
HTML内联
<p th:inline="text">属性name的值：[[${name}]]</p>
CSS内联
<style type="text/css" th:inline="css">
.style1{
color:[[${color}]]
}
</style>
JavaScript内联
<script type="css/javascript" th:inline="javascript">
</script>
th:object 和 *
<div th:object="${user}">
<p th:text="*{name}"></p>
<p th:text="*{age}"></p>
</div>
th:each 循环
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr th:each="u:${user}">
<td th:text="${u.id}"></td>
<td th:text="${u.name}"></td>
<td th:text="${u.age}"></td>
</tr>
</tbody>
th:if
如果条件不成立，则不显示此标签
<p th:if="${user.age}<20">age小于20</p>
th:switch 和 th:case
<td th:switch="${user.sex}">
<label th:case="1">男</label>
<label th:case="2">女</label>
<label th:case="*">保密</label>
</td>
th:action
定义后台控制器路径，类似标签的action属性。
<form th:action="@{/test/hello}" >
<input th:type="text" th:name="id">
<button>提交</button>
</form>
th:include
定义碎片 th:fragment
header.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:fragment="fragment1" style="width: 100%; height: 80px;background: red;">
header.html
</div>
</body>
</html>
footer.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div th:fragment="fragment2" style="width: 100%; height: 30px;background: blue;">
footer.html
</div>
</body>
</html>
引用碎片
th:include 和 th:replace
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- <div th:include="header::fragment1"></div>-->
<div th:replace="header::fragment1"></div>
<div style="width: 100%; height: 500px">
定义内容
</div>
<!-- <div th:include="footer::fragment2"></div>-->
<div th:replace="footer::fragment2"></div>
</body>
</html>
Spring集成Thymeleaf
引入依赖
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
<version>3.0.12.RELEASE</version>
</dependency>
配置applicationContext-thymeleaf.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
<!--Controller的组件扫描-->
<context:component-scan base-package="cn.ybzy">
<context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
</context:component-scan>
<!--spring整合资源模板解析器-->
<bean id="templateResolver"
class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
<!--模板前缀:指定目录-->
<property name="prefix" value="/WEB-INF/templates/"/>
<!--模板后缀 :指定扩展名-->
<property name="suffix" value=".html"/>
<!--指定字符集-->
<property name="characterEncoding" value="UTF-8"/>
<!--模式类型指定html5-->
<property name="templateMode" value="HTML5"/>
</bean>
<!--模板引擎-->
<bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
<property name="templateResolver" ref="templateResolver"/>
</bean>
<!--模板视图解析器-->
<bean id="viewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
<property name="templateEngine" ref="templateEngine"/>
<property name="characterEncoding" value="UTF-8"/>
</bean>
</beans>
配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<!--配置前端控制器-->
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!-- 配置初始化参数，用于读取 SpringMVC 的配置文件 -->
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext-thymeleaf.xml</param-value>
</init-param>
<!-- 配置 servlet 的对象的创建时间点：应用加载时创建。取值只能是非 0 正整数，表示启动顺序 -->
<load-on-startup>1</load-on-startup>
</servlet>
<!-- 配置拦截所以请求 -->
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>/index</welcome-file>
</welcome-file-list>
</web-app>
编写代码
@RestController
@RequestMapping("/test")
public class TestController {
@Autowired
private TemplateEngine templateEngine;
@GetMapping("/createTestOutTemplate")
public String createTestOutTemplate() throws FileNotFoundException, UnsupportedEncodingException {
//创建上下文和数据模型
Context context = new Context();
//创建数据模型
Map<String, Object> dataModel = new HashMap();
dataModel.put("name", "Hello Thymeleaf-Spring5");
context.setVariables(dataModel);
//准备文件
File file = new File("d:/testOut.html");
//生成页面
PrintWriter writer = new PrintWriter(file, "UTF-8");
templateEngine.process("test", context, writer);
return "Successful operation";
}
}
生产模板
浏览器访问接口：http://localhost:8888/test/createTestOutTemplate 生产模板
查看模板文件
SpringBoot集成Thymeleaf
引入依赖
<!--thymeleaf配置-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Thymeleaf默认配置
#开启模板缓存（默认值：true）
spring.thymeleaf.cache=false
#Check that the template exists before rendering it.
spring.thymeleaf.check-template=true
#检查模板位置是否正确（默认值:true）
spring.thymeleaf.check-template-location=true
#Content-Type的值（默认值：text/html）
spring.thymeleaf.content-type=text/html
#开启MVC Thymeleaf视图解析（默认值：true）
spring.thymeleaf.enabled=true
#模板编码
spring.thymeleaf.encoding=UTF-8
#要被排除在解析之外的视图名称列表，用逗号分隔
spring.thymeleaf.excluded-view-names=
#要运用于模板之上的模板模式。另见StandardTemplate-ModeHandlers(默认值：HTML5)
spring.thymeleaf.mode=HTML5
#在构建URL时添加到视图名称前的前缀（默认值：classpath:/templates/）
spring.thymeleaf.prefix=classpath:/templates/
#在构建URL时添加到视图名称后的后缀（默认值：.html）
spring.thymeleaf.suffix=.html
#Thymeleaf模板解析器在解析器链中的顺序。默认情况下，它排第一位。顺序从1开始，只有在定义了额外的TemplateResolver Bean时才需要设置这个属性。
spring.thymeleaf.template-resolver-order=
#可解析的视图名称列表，用逗号分隔
spring.thymeleaf.view-names=
配置application.yml
一般开发中将spring.thymeleaf.cache设置为false，其他保持默认值即可。
spring:
thymeleaf:
cache: false
创建html
在resources中创建templates目录，并在其中创建index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Thymeleaf</title>
</head>
<body>
<span th:text="${name}"></span>
</body>
</html>
控制层
@Controller
@RequestMapping("/test")
public class TestController {
/***
* 访问/test/index,跳转到index页面
* @param model
* @return
*/
@RequestMapping("/index")
public String hello(Model model){
model.addAttribute("name","hello welcome");
return "index";
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/137056.html
