Thymeleaf使用环境搭建和简单使用
Thymeleaf与JSP比较
与JSP相比，Thymeleaf模板是原生的，不依赖标签库，可以在接收原始的HTML的地方进行编辑和渲染。不与servlet规范耦合。JSP在内嵌的servlet容器上运行有一些问题（内嵌Tomcat，Jetty不支持jar形式运行JSP，Undertow不支持JSP），也就是说，springboot项目如果想使用JSP的话，必须放弃其内嵌的Tomcat。Spring Boot 提供大量的模板引擎（FreeMarker，Groovy，Thymeleaf，Velocity和Mustache），Spring Boot推荐使用Thymeleaf，Thymeleaf提供完美的Spring MVC支持。
非Spring Boot项目使用Thymeleaf环境
需要配置三个启用Thymeleaf与Spring集成的Bean
- ThymeleafViewResolver: 将逻辑视图名称解析为Thymeleaf模板视图
- SpringTemplateEngine: 处理模板并渲染结果
- TemplateResolver：加载Thymeleaf模板
使用java配置：
@Bean
public ViewResolver viewResolver(SpringTemplateEngine templateEngine){
ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
viewResolver.setTemplateEngine(templateEngine);
return viewResolver;
}
@Bean
public TemplateEngine templateEngine(TemplateResolver templateResolver){
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver(templateResolver);
return templateEngine;
}
@Bean
public TemplateResolver templateResolver(){
TemplateResolver templateResolver = new ServletContextTemplateResolver();
templateResolver.setPrefix("/WEB-INF/templates/");
templateResolver.setSuffix(".html");
templateResolver.setTemplateMode("HTML5");
return templateResolver;
}
使用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:p="http://www.springframework.org/schema/p"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
<bean id="viewResolver"
class="org.thymeleaf.spring4.view.ThymeleafViewResolver"
p:templateEngine-ref="templateEngine"/>
<bean id="templateEngine"
class="org.thymeleaf.spring4.SpringTemplateEngine"
p:templateResolver-ref="templateResolver"/>
<bean id="templateResolver"
class="org.thymeleaf.templateresolver.ServletContextTemplateResolver"
p:prefix="/WEB-INF/templates/"
p:suffix=".html"
p:templateMode="HTML5"/>
</beans>
Spring Boot使用Thymeleaf
- 新建Spring Boot项目
- 在创建时添加thymeleaf依赖，或者是创建完毕在pom.xml文件中添加thymeleaf依赖
pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
在application.properties中配置
//关闭缓存
spring.thymeleaf.cache=false
Thymeleaf的简单使用
新建html页面
传统项目放在配置的位置
springboot项目一般放在static/templates下
首先添加thymeleaf的命名空间
xmlns:th="http://www.thymeleaf.org"
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>index</title>
</head>
<body>
</body>
</html>
测试
在static里面创建css/style.css，用来测试读取静态资源
.title{
color: red;
font-size: larger;
}
创建javaBean
public class Student {
private String name;
private Double score;
public Student(String name, Double score) {
this.name = name;
this.score = score;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Double getScore() {
return score;
}
public void setScore(Double score) {
this.score = score;
}
}
准备测试数据
@Controller
@SpringBootApplication
public class ThymeleafdemoApplication {
@RequestMapping("/")
public String index(Model model){
Student stu = new Student("stu_1", 34.5d);
List<Student> studentList1 = new ArrayList<>();
Student s1 = new Student("list-1", 23.5d);
Student s2 = new Student("list-2", 22.5d);
Student s3 = new Student("list-3", 21.5d);
studentList1.add(s1);
studentList1.add(s2);
studentList1.add(s3);
//空的list
List<Student> studentList2 = new ArrayList<>();
model.addAttribute("stu", stu);
model.addAttribute("studentList1", studentList1);
model.addAttribute("studentList2", studentList2);
return "index";
}
public static void main(String[] args) {
SpringApplication.run(ThymeleafdemoApplication.class, args);
}
}
在templates下创建index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>index</title>
<!--添加css-->
<link rel="stylesheet" type="text/css" th:href="@{css/style.css}"/>
</head>
<body>
<!--测试css资源引用 red：成功找到css资源-->
<div class="title">测试1</div>
<br/>
<h3>下面是获取stu对象的值：</h3>
<div>
stu姓名：
<span th:text="${stu.name}">获取不到</span>
stu成绩:
<span th:text="${stu.score}">获取不到</span>
</div>
<br/>
<div>
<h3>下面是获取list的值</h3>
<div th:if="${ #lists.isEmpty(studentList2)}">
这是空列表
</div>
<div th:if="${ not #lists.isEmpty(studentList1)}">
<h4>列表内容如下：</h4>
<div th:each="stu:${studentList1}">
学生姓名：
<span th:text="${stu.name}">没有数据</span>
成绩：
<span th:text="${stu.score}">没有数据</span>
</div>
</div>
</div>
</body>
</html>
测试结果：
thymeleaf模板编写时需要严格的按照html规范！！！
补充
避免thymeleaf的html代码检查过严
在pom.xml文件添加依赖：
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.21</version>
</dependency>
在application.properties配置thymeleaf的mode
spring.thymeleaf.mode=LEGACYHTML5
内容参考《Spring实战》、《Java EE开发颠覆者 Spring Boot实战》
