SpringBoot中使用thymeleaf模板引擎

最新推荐文章于 2024-07-22 08:30:00 发布

编程写手

最新推荐文章于 2024-07-22 08:30:00 发布

阅读量1k

点赞数

分类专栏： SpringBoot

本文链接：https://blog.csdn.net/weixin_45492007/article/details/98879761

版权

SpringBoot 专栏收录该内容

90 篇文章 2 订阅

订阅专栏

在spring boot中使用thymeleaf模板技术

环境：JDK1.8、Maven 3.6.1、eclipse

导入thymeleaf对springboot的支持，其中pom文件如下：

<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
	</properties>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.2.4.RELEASE</version>
		<relativePath />
	</parent>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<!-- 配置模板引擎thymeleaf -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<!-- junit配置 -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<configuration>
					<source>1.8</source>
					<target>1.8</target>
				</configuration>
			</plugin>
		</plugins>
	</build>

关于当前thymeleaf模板技术主要来源于thymeleaf官网

1.创建resources文件，并在resources文件中添加templates文件夹
2.指定当前的模板文件夹
3.开始编写静态html页面，并使用thymeleaf技术
4.编写controller层

在application.properties文件中指定当前的模板文件夹的位置

在application.properties中添加如下内容
spring.thymeleaf.prefix=classpath:/templates/

开始编写静态html页面，并使用thymeleaf技术,这里创建index.html页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
</head>
<body>
	<h1>简单的输出name:</h1>
	<h1>
		Hello <span th:text=" ${name}"></span>!
	</h1>

	<h1>简单的输出list集合:</h1>
	<table border="1">
		<tr>
			<th>下标</th>
			<th>编号</th>
			<th>用户名</th>
			<th>出生日期</th>
			<th>年龄</th>
			<th>是否在职</th>
		</tr>
		<tr th:each="user,status : ${userList}">
			<td th:text="${status.index}"></td>
			<td th:text="${status.count}"></td>
			<td th:text="${user.name}"></td>
			/* 使用${#dates.format(user.birth, 'yyyy-MM-dd')}可以按照指定的格式解析日期类型的数据*/
			<td th:text="${#dates.format(user.birth, 'yyyy-MM-dd')}"></td>
			<td th:text="${user.age}"></td>
			<td>
				<span th:switch="${user.onWork}">
					<span th:case="true">
						是
					</span>
					<span th:case="*">
						默认值：否
					</span>
				</span>
			</td>
		</tr>
	</table>

	<h1>简单的输出map集合:</h1>
	<table border="1">
		<tr>
			<th>map的key</th>
			<th>编号</th>
			<th>用户名</th>
			<th>出生日期</th>
			<th>年龄</th>
			<th>是否在职</th>
		</tr>
		<tr th:each="user,status : ${userMap}">
			<td th:text="${user.key}"></td>
			<td th:text="${status.count}"></td>
			<td th:text="${user.value.name}"></td>
			<td th:text="${#dates.format(user.value.birth, 'yyyy-MM-dd')}"></td>
			<td th:text="${user.value.age}"></td>
			<td>
				<span th:switch="${user.value.onWork}">
					<span th:case="true">
						是
					</span>
					<span th:case="*">
						默认值：否
					</span>
				</span>
			</td>
		</tr>
	</table>
</body>
</html>

4.编写controller层

创建实体类User

/**
 * @description 简答的使用thymeleaf的实体类
 * @author hy
 * @date 2019-08-08
 */
public class User {
	private String name;//用户姓名
	private Date birth;//用户出生日期
	private Integer age;//用户年龄
	private Boolean onWork;//是否在职
	........省略getter、setter方法
	}

编写controller层

@SpringBootApplication
@Controller
public class Application {
	private List<User> userList = new ArrayList<User>();
	{
		userList.add(new User("孙悟空", new Date(), 1000, true));
		userList.add(new User("猪八戒", new Date(), 500, true));
		userList.add(new User("沙和尚", new Date(), 300, false));
		userList.add(new User("唐三藏", new Date(), 20, true));
	}

	private Map<String, User> userMap = new HashMap<String, User>();
	{
		userMap.put("1", new User("孙悟空", new Date(), 1000, true));
		userMap.put("2", new User("猪八戒", new Date(), 500, true));
		userMap.put("3", new User("沙和尚", new Date(), 300, false));
		userMap.put("4", new User("唐三藏", new Date(), 20, true));
	}

	@RequestMapping("/index")
	public String index(Model model) {
		model.addAttribute("name", "三毛");
		model.addAttribute("userList", userList);
		model.addAttribute("userMap", userMap);
		return "index";
	}

	public static void main(String[] args) {
		SpringApplication.run(Application.class, args);
	}
}

结果就不显示了，如果出现乱码问题可以在application.properties文件中添加如下内容：

将当前的Spring编码设置为UTF-8
spring.http.encoding.force=true
spring.http.encoding.charset=UTF-8
spring.http.encoding.enabled=true
server.tomcat.uri-encoding=UTF-8

总结
1.使用thymeleaf模板技术的时候，必须在标签内添加th:xx="表达式"才可以使用，与原来的jsp中的使用方式完全不一样，使用起来感觉有点怪怪的

2.获取作用域的数据的时候

使用${session.属性}来访问session中的作用域的值，
使用${application.属性}f访问application中的作用域的值

3.在迭代LIst集合的时候

  使用th:each="别名,这里为状态变量 : ${要迭代的集合对象}"
  获取当前迭代的下标是
			   状态变量.index
			   count为当前迭代的第几个

4.在迭代map集合的时候

直接使用th:foreach="${"每次迭代的值：${对应的model中添加的key}}"，
使用的时候需要用每次迭代的值.key或者每次迭代的值.value来输出值

5.在处理日期格式的时候必须使用

${#dates.format(需要输出的日期属性, '输出的日期的格式')}

6.在结构例如if-else或者switch或者if-ifelse-else等的时候时可以使用th:switch和th:case

例如:
			<div  th:switch="${对象.属性}">
				<div  th:case="'值1'">
					<img th:src="@{/static/images/logo-A.png}">
				</div>
				<div  th:case="'值2'">
					<img th:src="@{/static/images/logo-B.png}">
				</div>
				<div th:case="*">//*表示默认
					<img th:src="@{/static/images/logo-c.png}">
				</div>
			</div>

7.在单独使用if结构的时候需要使用th:if

th:if="${中间使用表达式}"

8.在使用页面跳转的时候需要使用：

使用该方法访问controller中requestMapping属性:
th:href="@{'这里为requestMapping中的value字符串'}"

传递参数的时候需要使用 :
th:href="@{'这里为requestMapping中的value字符串'+${传递的对象.对象的属性}}"

9.数据的回显：

 数据的回显
 th:field="*{user.name}" 会自动绑定对象为user属性为name的值到input的value属性中
 
 回显日期类型的数据：
 th:value="${#dates.format(对象.日期类型的数据, '显示的日期类型的数据的格式')}"

10.使用form中的action属性的使用规则：

<form action="#" th:action="@{requestMapping中的value值}">

以上纯属个人的一些见解，如有问题请联系本人！

编程写手

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录