SpringBoot使用Thymeleaf模板 - 易学教程，面试笔记经验！

Thymeleaf介绍

虽然在Web开发中，前后端分离已经是大势所趋，后端只需要写一些api接口即可，展现给用户的界面全部由前端来完成，但是在一些小的系统中，或者是开发人员不够的情况下还是需要后端人员做一些前端模板的渲染工作。

在之前web开发中，使用jsp作为模板引擎渲染前端页面，虽然在我看来jsp和thymeleaf没有太大的区别，都是语法上的不同，但是SpringBoo框架中建议使用thymeleaf，认为Thymeleaf增加了html代码的可读性,对于前后端分离的系统还是Vue和React框架。

下面介绍SpringBoot中使用Thymeleaf模板的方法。

Thymeleaf安装

在我们的SpringBoot项目加入Thymeleaf模板的依赖。

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

配置Thymeleaf参数

#模板文件配置
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.mode=HTML

Thymeleaf简单例子入门

1. 定义控制器

@Controller
@Validated
public class HelloController {

    @GetMapping ("/hello/index")
    public String index(ModelMap modelMap, String name) {
        modelMap.put("name", name);
        return "hello/index";
    }

}

这里的返回值是模板的路径，其根目录是src\main\resources\templates，那么hello/index返回的路径是src\main\resources\templates\hello\index.html。

2. 定义模板文件

在目录src\main\resources\templates\hello下创建文件index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
你好：<span th:text="${name}"></span>
</body>
</html>

这里使用了最简单的标签text标签,Thymeleaf的语法是在html标签里面写变量值，这个增加了html代码的可读性吧，这也是Spring框架中为什么推崇它的原因。

3. 重启项目浏览器输入 http://localhost:8080/hello/index?name=yxjc123.com

SpringBoot使用Thymeleaf模板

以上完成了Thymeleaf模板引擎最简单的例子。

Thymeleaf字符串函数

Thymeleaf内置了一些字符串函数，它们是

${#strings.isEmpty(key)}：判断字符串是否为空，如果为空返回 true，否则返回 false
${#strings.contains(msg,'T')}：判断字符串是否包含指定的子串，如果包含返回 true，否则返回 false
${#strings.startsWith(msg,'a')}：判断当前字符串是否以子串开头，如果是返回 true，否则返回 fals
${#strings.endsWith(msg,'a')}：判断当前字符串是否以子串结尾，如果是返回 true，否则返回 false
${#strings.length(msg)}：返回字符串的长度
${#strings.indexOf(msg,'h')}：查找子串的位置，并返回该子串的下标，如果没找到则返回-1
${#strings.substring(msg,2)}：字符串截取
${#strings.substring(msg,2,5)}：字符串截取
${#strings.toUpperCase(msg)}：字符串转大写
${#strings.toLowerCase(msg)}：字符串转小写

Thymeleaf日期格式化

${#dates.format(key)}：格式化日期，默认的以浏览器默认语言为格式化标准
${#dates.format(key,'yyyy-MM-dd HH:MM:ss')}：按照自定义的格式做日期转换
${#dates.year(key)}：取年
${#dates.month(key)}：取月
${#dates.day(key)}：取日

例子：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
当前时间： <span th:text="${#dates.format(date,'yyyy-MM-dd HH:MM:ss')}"></span>
</body>
</html>

输出结果：

SpringBoot使用Thymeleaf模板

Thymeleaf条件判断

th:if

<div>
    <span th:if="${gender}=='1'">
        性别：男
    </span>
    <span th:if="${gender}=='2'">
        性别：女
    </span>
</div>

th:switch / th:case

<div th:switch="${id}">
    <span th:case="1">id为1</span>
    <span th:case="2">id为2</span>
    <span th:case="3">id为3</span>
    <span th:case="*">没有匹配的值</span>
</div>

Thymeleaf循环

使用语法：th:each

参数值：

index 当前迭代器的索引，从0开始
count 当前迭代对象的计数，从1开始
size 被迭代对象的长度
odd/even 布尔值，当前循环是否是偶数/奇数，从0开始
first 布尔值，当前循环的是否是第一条，如果是返回true，否则返回false
last 布尔值，当前循环的是否是最后一条，如果是则返回true，否则返回false

以下给出循环的例子

控制器代码：

@Controller
public class HelloController {

    @GetMapping ("/hello/index")
    public String index(ModelMap modelMap) {
        List<User> userList= new ArrayList<User>();
        User user1 = new User("张三","男");
        User user2 = new User("李四","男");
        User user3 = new User("王五","女");
        Collections.addAll(userList, user1, user2, user3);
        modelMap.addAttribute("userList", userList);
        return "hello/index";
    }

}

模板代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
用户列表：
<table border="1">
    <tr><td>名字</td><td>性别</td></tr>
    <tr th:each="user,iterStat : ${userList}">
        <td th:text="${user.name}"></td>
        <td th:text="${user.gender}"></td>
    </tr>
</table>
</body>
</html>

输出

SpringBoot使用Thymeleaf模板

Thymeleaf遍历Map

例子：

控制器代码

@Controller
public class HelloController {

    @GetMapping ("/hello/index")
    public String index(ModelMap modelMap) {
        Map<String ,String> map = new HashMap();
        map.put("java","Java学习笔记");
        map.put("php","PHP学习笔记");
        modelMap.put("map",map);
        return "hello/index";
    }

}

前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
笔记：
<table border="1">
    <tr><td>编程语言</td><td>笔记名</td></tr>
    <tr th:each="m:${map}">
        <td th:text="${m.key}"></td>
        <td th:text="${m.value}"></td>
    </tr>
</table>
</body>
</html>

输出：

SpringBoot使用Thymeleaf模板