版权声明：本文为小异常原创文章，非商用自由转载-保持署名-注明出处，谢谢！
本文网址：https://blog.csdn.net/sun8112133/article/details/106961006

我在之前发布的《Spring Boot 入门学习笔记》中写过关于 Thymeleaf 模板引擎的博客，在那篇博客中我简单介绍了 Thymeleaf 模板引擎 的使用以及个别标签。

在本篇博客中会主要介绍使用 Spring Boot 来整合 Thymeleaf 模板引擎，还有 Thymeleaf 模板引擎 常用标签，在下一篇博客中我会讲到 Thymeleaf 访问 Servlet Web 对象以及各种内置对象的使用。

一、引入 Thymeleaf

在之前的博客中，我已经简单介绍过这个模板引擎，在此只作简单叙述。

在过去开发 Web 项目时，我们会使用 JSP 作为动态资源来开发 Web 项目。但 Spring Boot 默认是不支持 JSP 的，Spring Boot 官网更推荐使用模板引擎来开发动态资源，而 Thymeleaf 是 Spring Boot 重点推荐的模板引擎工具。

我们还是以一个小例子带大家简单了解一下这个模板引擎。

1、新建 Spring Boot 项目

新建SpringBoot

2、引入依赖信息

在之前的博客中我介绍的依赖信息只是单纯的整合了 Spring，并没有使用 Spring Boot 来整合，本篇博客更推荐大家使用 Spring Boot 整合 Thymeleaf 的方式来引入依赖信息。我们在创建 Spring Boot 项目时选择了 Thymeleaf 起步依赖，就会在 pom.xml 文件中自动生成以下依赖（若没有选择需要手动引入以下依赖信息）：

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

3、创建 Controller，返回 Thymeleaf 视图

@Controller
public class HelloController {
	@GetMapping("/result")
	public ModelAndView result() {
		System.out.println("result");
		ModelAndView modelAndView = new ModelAndView();
		modelAndView.setViewName("result");
		modelAndView.addObject("hello", "Hello World!");
		return modelAndView;
	}
}

4、配置 application.yml

在 application.yml 配置文件中配置 Thymeleaf 模板文件的位置，它默认的位置在：classpath:/templates/ ，模板文件的后缀名是：.html，我们也可以通过以下方式对它的配置信息进行修改：

spring:
  thymeleaf:
    prefix: classpath:/newtemplates/
    suffix: .html

注意： 在以前传统的 Web 项目中，静态资源修改后，是不需要重启的；但是在 Spring Boot 项目中，资源一旦修改，必须重启程序才能生效。

5、创建视图（result.html）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p th:text="${hello}"></p>
</body>
</html>

6、目录结构

目录结构

7、测试

运行 Application 启动类，在浏览器中进行测试：

生成的源代码：

源代码

二、Thymeleaf 常用标签

大家需要注意，只要前端页面用了 Thymeleaf（th标签）技术，则必须通过 Controller 映射才能正确解析。当然直接访问也不会报错，只是不会被解析了。

1、th:text

用于文本显示，将业务数据的值填充到 HTML 标签中。

Thymeleaf
```
<p th:text="${name}"></p>
```

Controller

@GetMapping("/result1")
public ModelAndView result1() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("name", "张三");
	return modelAndView;
}

2、th:utext

也是用于文本显示，与 th:text 不同的是，th:text 获取的值如果是 HTML 标签的话，会进行解析，而 th:utext 不会被解析。

Thymeleaf

<p th:text="${name}"></p>
<p th:utext="${name}"></p>

Controller

@GetMapping("/result2")
public ModelAndView result2() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("name", "<span>这是内嵌的标签</span>");
	return modelAndView;
}

生成的源代码

3、th:if

用来做条件判断，对业务数据的值进行判断，如果成立则显示内容，否则不显示。

Thymeleaf

<p th:if="${score>=90}">优秀</p>
<p th:if="${score<90}">良好</p>

Controller

@GetMapping("/result3")
public ModelAndView result3(){
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("score", 90);   // 显示 优秀
	return modelAndView;
}

4、th:unless

用来做条件判断，逻辑与 th:if 刚好相反，如果条件不成立显示，否则不显示。

Thymeleaf

<p th:unless="${score>=90}">优秀</p>
<p th:unless="${score<90}">良好</p>

Controller

@GetMapping("/result4")
public ModelAndView result4() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("score", 90);   // 显示 良好
	return modelAndView;
}

5、th:switch 与 th:case

这两个标签需要结合起来使用，用作多条件等值判断，逻辑与 Java 中的 switch-case 一致，当 switch 中的业务数据值等于某个 case 值时，就显示该 case 值对应的内容。

Thymeleaf

<div th:switch="${id}">
	<p th:case="1">张三</p>
	<p th:case="2">李四</p>
	<p th:case="3">王五</p>
</div>

Controller

@GetMapping("/result5")
public ModelAndView result5() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("id", 2);
	return modelAndView;
}

生成的源代码

6、th:action

用来指定请求的 URL，相当于 form 表单中的 action 属性。

Thymeleaf

<form th:action="@{/login}" method="post">
	用户名：<input type="text" name="name"><br>
	密码：<input type="password" name="password"><br>
    <input type="submit" value="登录">
</form>

7、th:each

用来做遍历，将集合、数组的数据进行遍历。

Thymeleaf

<table>
	<tr>
		<th>编号</th>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr th:each="user : ${list}">
		<td th:text="${user.id}"></td>
		<td th:text="${user.name}"></td>
		<td th:if="${user.gender == 1}">男</td>
		<td th:if="${user.gender == 0}">女</td>
	</tr>
</table>

Controller

@GetMapping("/result7")
public ModelAndView result7() {
	List<User> list = new ArrayList<>();
	list.add(new User(1L, "张三", 0));
	list.add(new User(2L, "李四", 1));
	list.add(new User(3L, "王五", 0));
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("list", list);
	return modelAndView;
}

生成的源代码

8、th:value

用来给表单标签赋值。

Thymeleaf

<input type="text" th:value="${value}">

Controller

@GetMapping("/result8")
public ModelAndView result8() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("value", "Thymeleaf");
	return modelAndView;
}

生成的源代码

9、th:src

用来引入静态资源，相当于 HTML 原生标签 img、script 的 src 属性。

${src}：需要 Controller 将具体的路径传到 src 中；

@{/1.jpg}：不需要传入具体路径，只需要解析 th 标签即可。

Thymeleaf

<img th:src="${src}">
<img th:src="@{/1.jpg}">

Controller

@GetMapping("/result9")
public ModelAndView result9() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("src", "/1.jpg");
	return modelAndView;
}

生成的源代码

10、th:href

用来引入链接，相当于 HTML 原生标签中 a标签的 href 属性。

Thymeleaf

<a th:href="${href}">百度</a>
<a th:href="@{http://www.baidu.com}">百度</a>

Controller

@GetMapping("/result10")
public ModelAndView result10() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("href", "http://www.baidu.com");
	return modelAndView;
}

生成的源代码

11、th:selected

用来给 HTML 元素设置选中项，条件成立则选中，否则不选中。

Thymeleaf

<select>
	<!-- 方式一（推荐）： -->
	<option th:each="user:${list}" th:text="${user.name}" 
th:selected="${user.name == name}"></option>
</select>
<select>
	<!-- 方式二： -->
	<option th:selected="${name=='张三'}">张三</option>
	<option th:selected="${name=='李四'}">李四</option>
	<option th:selected="${name=='王五'}">王五</option>
</select>

Controller

@GetMapping("/result11")
public ModelAndView result11() {
	List<User> list = new ArrayList<>();
	list.add(new User(1L, "张三", 0));
	list.add(new User(2L, "李四", 1));
	list.add(new User(3L, "王五", 0));
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("list", list);    // 如果使用方式二则不需要传 list
	modelAndView.addObject("name", "李四");
	return modelAndView;
}

生成的源代码

12、th:attr

用来给 HTML 标签的任意属性赋值。

Thymeleaf
```
<input th:attr="value=${attr}">
```

Controller

@GetMapping("/result12")
public ModelAndView result12() {
	ModelAndView modelAndView = new ModelAndView();
	modelAndView.setViewName("result");
	modelAndView.addObject("attr", "Thymeleaf");
	return modelAndView;
}

生成的源代码

博客中若有不恰当的地方，请您一定要告诉我。前路崎岖，望我们可以互相帮助，并肩前行！

SpringBoot整合Thymeleaf（上）

文章目录

一、引入 Thymeleaf

1、新建 Spring Boot 项目

2、引入依赖信息

3、创建 Controller，返回 Thymeleaf 视图

4、配置 application.yml

5、创建视图（result.html）

6、目录结构

7、测试

二、Thymeleaf 常用标签

1、th:text

2、th:utext

3、th:if

4、th:unless

5、th:switch 与 th:case

6、th:action

7、th:each

8、th:value

9、th:src

10、th:href

11、th:selected

12、th:attr

猜你喜欢