SpringBoot实战(06)：Thymeleaf使用指南
Thymeleaf使用指南
- 一、添加 Thymeleaf 依赖
- 二、编写简单的页面
- 三、选择变量表达式
- 四、Thymeleaf 日期格式化
- 五、js 中使用 Thymeleaf 表达式
一、添加 Thymeleaf 依赖
- 首先，需要在 pom.xml 文件中添加 Thymeleaf 依赖：
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
- Spring Boot 默认存放模板页面的路径在
src/main/resources/templates或者src/main/view/templates，默认的页面文件后缀是.html。我们在项目中使用默认路径即可，如果需要调整在 application.properties 添加如下信息：
# thymeleaf模板信息
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
#开发时关闭缓存
spring.thymeleaf.cache=false
注：开发阶段尽量将
spring.thymeleaf.cache属性设置为 false，避免出现修改了存在缓存导致页面没有及时刷新。
二、编写简单的页面
Thymeleaf 已经配置好了，现在我们通过一个简单的案例来演示一下如果使用 Thymeleaf 表达式。
- 创建一个 Controller 对象:
@Controller
public class UserController {
@GetMapping("/user/person")
public String show(Model model) {
model.addAttribute("uid", "1001");
model.addAttribute("name", "jie_ming514");
return "system/user/person";
}
}
- 在 templates 目录下创建一个 system/user/person.html 文件，内容如下：
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf模板选择效果title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
head>
<body>
<p th:text="'用户ID：' + ${uid}" />
<p th:text="'用户名称：' + ${name}" />
body>
html>
注:
是 Thymeleaf 命名空间，通过引入该命名空间就可以在 HTML 文件中使用 Thymeleaf 标签语言，用关键字th来标注。 不加影响不大，但是部分编辑器会因为未找到命名空间而报错。
三、选择变量表达式
上面的方法是获取变量，有时我们需要获取对象的信息，可以使用 th:object 获取对象
- 创建一个 pojo;
public class UserDO {
//用户ID
private Long id;
//用户名
private String username;
//密码
private String password;
//省略set/get方法
}
- 编写 Controller 类;
@Controller
public class UserController {
@GetMapping("/user/person")
public String show(Model model) {
UserDO user = new UserDO();
user.setId(1001L);
user.setUsername("admin");
user.setPassword("abc123");
model.addAttribute("user", user);
return "system/user/person";
}
}
- 前端页面展示;
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>SpringBoot模版渲染title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
head>
<body>
<div th:object="${user}">
<p th:text="'用户ID：' + *{id}" />
<p th:text="'用户名称：' + *{username}" />
<p th:text="'密码：' + *{password}" />
div>
body>
html>
四、Thymeleaf 日期格式化
有时我们需要展示时间，我们会这样写：
<input type="text" th:value="${user.ctime}" />
但是使用默认的日期格式往往不是我们想要的格式 Mon Dec 03 23:16:50 CST 2020
此时我们对日期进行格式化，转化成 YYYY-MM-dd HH:mm:ss 的格式：
<input type="text" th:value="${#dates.format(user.ctime,'YYYY-MM-dd HH:mm:ss')}"
/>
五、js 中使用 Thymeleaf 表达式
上面我们讲的都是通过标签中添加 th:xx="" 这种表达式来读取服务器端的变量。那我们要是在 js 中需要使用变量该怎么办了？ 当然有办法，使用内联表达是就可以读取变量信息。
内联表达式使用方法：[[${xx}]]，例如：
<script th:inline="javascript">
var user = [[${user}];
var APP_PATH = [[${#request.getContextPath()}]];
var LANG_COUNTRY = [[${#locale.getLanguage()+'_'+#locale.getCountry()}]];
script>
注： 如果你的项目中 html 文件和 js 文件是分离开的，内联表达式在 js 文件中是无法生效的。需要在 html 文件中添加脚本块，转化成 js 的对象后在使用。