Spring Boot入门第四天:使用Thymeleaf模板引擎

时间:2024-11-17 10:03:55

原文链接

关于Thymeleaf的优点,我只说一条:它就是html页面啊,直接可以用浏览器打开。受够了JSP的同学可以尝试一下。

1.在pom.xml文件中添加依赖:

Spring Boot入门第四天:使用Thymeleaf模板引擎
<!--<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Spring Boot入门第四天:使用Thymeleaf模板引擎

spring-boot-starter-thymeleaf下面已经包括了spring-boot-starter-web,所以可以把spring-boot-starter-web的依赖去掉。

2.配置属性。其实完全可以使用不用配置,但是Spring Boot官方文档建议在开发时将缓存关闭,那就在application.properties文件中加入下面这行吧:

spring.thymeleaf.cache=false

3.编写Controller类。

Spring Boot入门第四天:使用Thymeleaf模板引擎
package com.yws710.springboot.demo1.controller;

import com.yws710.springboot.demo1.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping; @Controller
@RequestMapping("/user")
public class UserController { @Autowired
UserService userService; @RequestMapping("/list2")
public String userList2(Model model) throws Exception {
model.addAttribute("hello","Hello, Spring Boot!");
model.addAttribute("userList", userService.userList());
return "/user/list2";
}
}
Spring Boot入门第四天:使用Thymeleaf模板引擎

4.创建Thymeleaf模板文件。在classpath:resources下创建一个名为templates的文件夹,在templates的子文件夹user中创建一个名为list2.html的文件。

Spring Boot入门第四天:使用Thymeleaf模板引擎
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>用户列表</title>
<link href="/css/main.css" rel="stylesheet" />
</head>
<body>
<h1 th:text="${hello}">Hello, Spring Boot!</h1>
<table>
<tr>
<th>ID</th>
<th>姓名</th>
<th>生日</th>
<th>薪资</th>
</tr>
<tr th:each="user : ${userList}">
<td th:text="${user.id}">0</td>
<td th:text="${user.name}">zhansan</td>
<td th:text="${user.birthday}">1988-06-01</td>
<td th:text="${user.salary}">12345</td>
</tr>
</table> <select>
<option th:each="user:${userList}" th:value="${user.id}" th:text="${user.name}">我是默认值</option>
</select> </body>
</html>
Spring Boot入门第四天:使用Thymeleaf模板引擎

需要注意的是,模板文件中的所有标签都需要闭合哦。meta标签需要这么写:<meta charset="UTF-8" />或者<meta charset="UTF-8"></meta>。但是,难免有疏忽的时候,那怎么办?使用3版本吧。只需要在pom.xml文件中增加如下代码:

Spring Boot入门第四天:使用Thymeleaf模板引擎
    <properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<!-- set thymeleaf version -->
<thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
</properties>
Spring Boot入门第四天:使用Thymeleaf模板引擎

这样就不用担心单标签关闭的问题了,更符合书写习惯。

5.启动项目,查看运行结果:

Spring Boot入门第四天:使用Thymeleaf模板引擎

作为对比,直接在浏览器中打开list2.html看看会怎样?

Spring Boot入门第四天:使用Thymeleaf模板引擎

很遗憾,样式文件没加载到。模板文件中是这样写的:

<link href="/css/main.css" rel="stylesheet" />
但是样式文件是在classes/static/css中呢。淡淡的忧伤。
使用如下方式即可很好地解决上述问题。
<link href="../../static/css/main.css" th:href="@{/css/main.css}" rel="stylesheet" />