Spring Boot（六）springboot模板引擎——Thymeleaf

一、Thymeleaf简介

  Thymeleaf 是一个流行的模板引擎，该模板引擎采用 Java 语言开发 模板引擎是一个技术名词，是跨领域跨平台的概念，在 Java 语言体系下有模板引擎，在 C#、PHP 语言体系下也有模板引擎，甚至在 JavaScript 中也会用到模板引擎技术，Java 生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl（国产） 等。

  Thymeleaf 对网络环境不存在严格的要求，既能用于 Web 环境下，也能用于非 Web 环境下。在非 Web 环境下，他能直接显示模板上的静态数据；在 Web 环境下，它能像 Jsp 一样从后台接收数据并替换掉模板上的静态数据。它是基于 HTML 的，以 HTML 标签为载体，Thymeleaf 要寄托在 HTML 标签下实现。

  SpringBoot 集成了 Thymeleaf 模板技术，并且 Spring Boot 官方也推荐使用 Thymeleaf 来替代 JSP 技术，Thymeleaf 是另外的一种模板技术，它本身并不属于 Spring Boot，Spring Boot只是很好地集成这种模板技术，作为前端页面的数据展示，在过去的 Java Web 开发中，我们往往会选择使用 Jsp 去完成页面的动态渲染，但是 jsp 需要翻译编译运行，效率低 。

Thymeleaf 的官方网站：http://www.thymeleaf.org

Thymeleaf 官方手册：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

二、Thymeleaf 文件在SpringBoot项目中的位置

  位于resources目录下的templcates文件夹下。

三、使用Thymeleaf前提条件

  1. 创建SpringBoot项目是勾选Thymeleaf

  1. 在html文件上方<html lang="en">加上xmlns:th="http://www.thymeleaf.org" 
<!DOCTYPE html>
<!-- xmlns:th="http://www.thymeleaf.org" xmlns:是一个命名空间 地址是thymeleaf的规则文件 -->
<!-- 项目中包含thymeleaf依赖，他会根据thymeleaf自定义的标签名称， 获取后台数据 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1 th:text="${data}">thymeleaf模板引擎</h1>
    </body>
</html>

四、Thymeleaf表达式

  1. 标准表达式 
<h2>thymeleaf标准表达式：${}</h2>
用户编号：<h3 th:text="${user.id}"></h3>
用户姓名：<h3 th:text="${user.name}"></h3>
用户住址：<h3 th:text="${user.address}"></h3>

  在控制层中，初始化了一个User对象，包含id、name、address属性，赋值后放入到Model中，在Thymeleaf页面中，直接使用标准表达式即可获取到数据。th:text是Thymeleaf的语法规则，表示表达式中的值会替代当前标签中的文本。

  1. 变量表达式（星号表达式） 
<h2>thymeleaf变量表达式（星号表达式）：*{}</h2>
<div th:object="${user}">
    用户编号：<h3 th:text="*{id}"></h3>
    用户姓名：<h3 th:text="*{name}"></h3>
    用户住址：<h3 th:text="*{address}"></h3>
</div>

  使用th:object表示${}是一个对象，在它的字标签中可以直接使用星号表达式——*{}，直接显示属性的值。

  1. URL路径表达式 
<h1>URL路径表达式：@{......}</h1>

<h2>a标签中的绝对路径（无参数）：</h2>
<a href="http://www.baidu.com">传统方法跳转至百度</a><br>		<!-- 与下一行代码功能相同 -->
<a th:href="@{https://blog.csdn.net/ccccc_chuang}">跳转至krain</a><br>

<a href="http://localhost:8080/user/detail">传统方法跳转至/user/detail</a><br>		<!-- 与下一行代码功能相同 -->
<a th:href="@{http://localhost:8080/user/detail}">跳转至/user/detail</a><br>

<h2>相对路径（无参数）</h2>
<a th:href="@{/user/detail}">跳转至/user/detail</a><br>

<h2>绝对路径（一个参数）</h2>
<a href="http://localhost:8080/test?username=zhangsan">绝对路径（带一个参数）</a><br>	   <!-- 与下一行代码功能相同 -->
<a th:href="@{http://localhost:8080/test?username=zhangsan}">相对路径（带一个参数）</a>

<h2>相对路径（一个参数）</h2>
<a th:href="@{/test?username=zhangsan}">相对路径（带一个参数）</a>

<h2>相对路径（从后台获取参数）</h2>
<a th:href="@{
    '/test?username='+${name}}">相对路径（带一个参数）</a>

<h2>相对路径（从后台获取参数）</h2>
<a th:href="@{
    '/test1?id='+${id}+'&username='+${name}+'&address='+${address}}">相对路径（从后台获取参数）</a><br>	<!-- 与下一行代码功能相同 -->
<a th:href="@{/test1(id=${id},username=${name},address=${address})}">相对路径（从后台获取参数）,该方式推荐使用</a>

<h2>相对路径restful</h2>
<a th:href="@{
    '/test3/'+${id}}">相对路径restful1</a><br>		<!-- 与下一行代码功能相同 -->
<a th:href="@{
    '/test2/'+${id}+'/'+${name}}">相对路径restful2</a>

五、Thymeleaf常见属性

  1. th:each=""遍历Map、List、数组和混合型数据类型
  • 后台控制类代码 
@Controller
public class UserController {
   

    @RequestMapping(value = "/each/list")
    public String list(Model model){
   
        List<User> userList = new ArrayList<User>();		//List集合
        for (int i = 0; i < 10; i++) {
   
            User user = new User();
            user.setId("100"+i);
            user.setName("xxx"+i);
            user.setAge("2"+i);
            user.setAddress("河南"+i);
            userList.add(user);
        }
        model.addAttribute("userList",userList);
        return "eachList";
    }

    @RequestMapping(value = "/each/map")
    public String map(Model model){
   
        HashMap<Integer, Object> map = new HashMap<>();		//Map集合
        for (int i = 0; i < 10; i++) {
   
            User user = new User();
            user.setId("200"+i);
            user.setName("yyy"+i);
            user.setAge("3"+i);
            user.setAddress("湖南"+i);
            map.put(i,user);
        }
        model.addAttribute("userMap",map);
        return "eachMap";
    }

    @RequestMapping(value = "/each/array")
    public String array(Model model){
   
        User[] users = new User[10];					//数组
        for (int i = 0; i < 10; i++) {
   
            User user = new User();
            user.setId("300"+i);
            user.setName("zzz"+i);
            user.setAge("4"+i);
            user.setAddress("海南"+i);
            users[i] = user;
        }
        model.addAttribute("userArray",users);
        return "eachArray";
    }

    @RequestMapping(value = "/each/all")
    public String eachAll(Model model) {
   
        //list -> Map -> List -> User list中嵌套Map，Map中又嵌套List，List中又嵌套User对象
        List<Map<Integer, List<User>>> myList = new ArrayList<Map<Integer, List<User>>>();
        for (int i = 0; i < 2; i++) {
   
            Map<Integer,List<User>> myMap = new HashMap<Integer, List<User>>();
            for (int j = 0; j < 2; j++) {
   
                List<User> myUserList = new ArrayList<User>();
                for (int k = 0; k < 3; k++) {
   
                    User user = new User();
                    user.setId("400"+k);
                    user.setName("张三"+k);
                    user.setAge("5"+k);
                    user.setAddress("广州市"+i);
                    myUserList.add(user);
                }
                myMap.put(j,myUserList);
            }
            myList.add(myMap);
        }
        model.addAttribute("myList",myList);
        return "eachAll"; }
}
  • Thymeleaf代码 
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>th:each 循环遍历数据</title>
</head>
<body>
    <h1>th:each 循环遍历 List 集合</h1>
    <div th:each="user,userStat:${userList}">			<!-- userStat表示当前变量的状态 -->
        <span th:text="${userStat.count}"></span>		<!-- ${userStat.count}表示该List数据的个数 -->
        <span th:text="${userStat.index}"></span>		<!-- ${userStat.count}表示该List当前数据的下表 -->
        <span th:text="${user.id}"></span>
        <span th:text="${user.name}"></span>
        <span th:text="${user.age}"></span>
        <span th:text="${user.address}"></span>
    </div>

    <h1>th:each 循环遍历 Map 集合</h1>
    <div th:each="user,userStat:${userMap}">
        <span th:text="${userStat.count}"></span>
        <span th:text="${userStat.index}"></span>
        <span th:text="${user.key}"></span>
        <span th:text="${user.value}"></span>
        <span th:text="${user.value.id}"></span>
        <span th:text="${user.value.name}"></span>
        <span th:text="${user.value.age}"></span>
        <span th:text="${user.value.address}"></span>
    </div>

    <h1>使用each遍历数组</h1>
    <div th:each="user,userStat:${userArray}">
        <span th:text="${userStat.index}"></span>
        <span th:text="${userStat.count}"></span>
        <span th:text="${user.id}"></span>
        <span th:text="${user.name}"></span>
        <span th:text="${user.age}"></span>
        <span th:text="${user.address}"></span>
    </div>

    <h1>list -> Map -> List -> User</h1>
    <div th:each="userMapList:${myList}">
        <div th:each="userListMap:${userMapList}">
            Map集合的key：<span th:text="${userListMap.key}"></span>
            <div th:each="userList:${userListMap.value}">
                <span th:text="${userList.id}"></span>
                <span th:text="${userList.name}"></span>
                <span th:text="${userList.age}"></span>
                <span th:text="${userList.address}"></span>
            </div>
        </div>
    </div>
</body>
</html>
  1. 条件判断属性的使用
  • 控制层 
@Controller
public class JudgeController {
   
    @RequestMapping(value = "/judge")
    public String judge(Model model){
   
        model.addAttribute("sex",0);
        model.addAttribute("productType",1);
        model.addAttribute("flag",true);
        return "condition";
    }
}
  • Thymeleaf 
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>条件判断</title>
</head>
<body>
    <h2>th:if  条件判断</h2>
    <div th:if="${sex eq 1}">男</div>
    <div th:if="${sex eq 0}">女</div>

    <h2>th:unless  与if相反</h2>
    <div th:unless="${sex ne 0}">定一个flag</div>
    <div th:unless="${sex ne 1}">定两个flag</div>

    <h2>th:switch</h2>
    <div th:switch="${productType}">
        <span th:case="0">产品0</span>
        <span th:case="1">产品1</span>
        <span th:case="*">无此产品</span>
    </div>
</body>
</html>
  1. 内敛表达式 
@Controller
public class InlineController {
   
    @RequestMapping(value = "/inline")
    public String inline(Model model){
   
        model.addAttribute("data", "springboot data");
        return "inline";
    }
}

  在标签中加入th:inline="text"属性之后，直接可以在标签内使用[[${data}]]的方式显示后台数据。

  在script标签中加入th:inline="javascript"后，可以在脚本中使用[[${data}]]进行数据的显示。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>内敛表达式</title>
</head>
<body th:inline="text">     <!--一般直接在body标签中加入-->
    <h1> th:inline="text"  内敛文本表达式</h1>
    <div th:inline="text">
        数据：[[${data}]]
    </div>

    数据out：[[${data}]]

    <script type="text/javascript" th:inline="javascript"> function showData() {
     alert([[${
    data}]]); alert("====="); } </script>

    <h1>th:inline="javascript"  内敛脚本表达式</h1>
    <div th:inline="javascript">
        <button onclick="showData()">显示数据</button>
    </div>
</body>
</html>
  1. Thymeleaf运算符 
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>数字运算</title>
</head>
<body>
    <!-- 三元运算：表达式?”正确结果”:”错误结果” 算术运算：+ , - , * , / , % 关系比较：> , < , >= , <= ( gt , lt , ge , le ) 相等判断：== , != ( eq , ne ) -->
    <h1>三元运算</h1>
    <span th:text="${sex eq 1 ? '男' : '女'}"></span>

    <h1>算术运算</h1>
    5-2=<span th:text="5-2"></span><br/>
    5+2=<span th:text="5+2"></span><br/>
    5*2=<span th:text="5*2"></span><br/>
    5/2=<span th:text="5/2"></span><br/>
    5%2=<span th:text="5%2"></span><br/>

    <h1>关系比较</h1>
    5>2为<span th:if="${5 gt 2}">真</span><br/>
    5<2为<span th:unless="${5 lt 2}">真</span><br/>
    2>=2为<span th:if="${5 ge 2}">真</span><br/>
    2<=2为<span th:unless="${5 le 2}">真</span><br/>

    <h1>相等判断</h1>
    2==2为<span th:if="${2 eq 2}">真</span><br/>
    5!=2为<span th:if="${5 ne 2}">真</span><br/>
</body>
</html>

  运行结果：

  1. Thymeleaf基本对象 
@Controller
public class BaseController {
   

    @RequestMapping(value = "/baseObj")
    public String baseObj(HttpServletRequest request, Model model, String id){
   
        model.addAttribute("username","lisi");
        request.getSession().setAttribute("data","sessionData");
        return "index";
    }
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>基本表达式对象</title>
</head>
<body>
    <h1>从session中获取值的三种方法：</h1>
    <span th:text="${#session.getAttribute('data')}"></span><br/>
    <span th:text="${#httpSession.getAttribute('data')}"></span><br/>
    <span th:text="${session.data}"></span><br/>

    <script type="text/javascript" th:inline="javascript"> //获取协议名称 var scheme = [[${
    #request.getScheme()}]]; //http //获取服务器名称（IP地址） var serverName = [[${
    #request.getServerName()}]]; //localhost //获取服务器端口号 var serverPort = [[${
    #request.getServerPort()}]]; //8080 //获取上下文根路径 var contextPath = [[${
    #request.getContextPath()}]]; //springboot var allPath = scheme+"://"+serverName+":"+serverPort+contextPath; var requesrURL = [[${
    #httpServletRequest.requestURL}]]; var queryString = [[${
    #httpServletRequest.queryString}]]; alert(allPath); </script>
</body>
</html>
  1. Thymeleaf内置对象 
@Controller
public class UserController {
   

    @RequestMapping(value = "/user")
    public String getUser(Model model){
   
        model.addAttribute("data","hello springboot");
        model.addAttribute("time", new Date());
        return "user";
    }
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>内置对象</title>
</head>
<body>
    <h2 th:text="${time}"></h2><br/>
    <h2 th:text="${#dates.format(time,'yyyy-MM-dd HH:mm:ss')}"></h2><br/>		<!--将时间格式化-->
    <h2 th:text="${data}"></h2><br/>
    <h2 th:text="${#strings.substring(data,0,10)}"></h2><br/>		<!--获取该字符串的0~10位的子串-->
    <h2 th:text="${#lists}"></h2><br/>					<!--用于操作list数据类型-->
</body>
</html>

  运行结果：

全部评论

相关推荐

11-19 15:04
已编辑
重庆邮电大学 测试工程师
点赞 评论 收藏
分享
今天 14:10
重庆大学 前端开发其它
点赞 评论 收藏
分享
10-28 14:42
门头沟学院 Java
好执着啊，双非本这么有吸引力吗
JAVA回暖了
watermelon1124：因为嵌入式炸了
点赞 评论 收藏
分享
11-20 16:02
哈尔滨工业大学（深圳） 算法工程师
点赞 评论 收藏
分享
点赞 收藏 评论
分享

全站热榜

正在热议
# 25届秋招总结 #
293226次浏览 2573人参与
# 美团求职进展汇总 #
1324643次浏览 12429人参与
# 阿里云管培生offer #
14881次浏览 261人参与
# 地方国企笔面经互助 #
3603次浏览 8人参与
# 国央企薪资爆料 #
6433次浏览 49人参与
# 选完offer后，你后悔学本专业吗 #
18960次浏览 135人参与
# 百度开奖 #
155675次浏览 931人参与
# 学历or实习经历，哪个更重要 #
49864次浏览 384人参与
# 如果不工作真的会快乐吗 #
58414次浏览 505人参与
# 面试体验感最好的是哪家？ #
84759次浏览 841人参与
# 如何一边实习一边秋招 #
990723次浏览 12630人参与
# 正在实习的你，几点下班 #
51205次浏览 381人参与
# 得物求职进展汇总 #
65867次浏览 678人参与
# 腾讯求职进展汇总 #
195151次浏览 1636人参与
# 提前批简历挂麻了怎么办 #
146073次浏览 1942人参与
# 银行笔面经互助 #
82435次浏览 873人参与
# 0offer是寒冬太冷还是我太菜 #
896570次浏览 7999人参与
# 实习生应该准时下班吗 #
167168次浏览 1159人参与
# 数据人offer决赛圈怎么选 #
116413次浏览 1461人参与
# 海康威视求职进展汇总 #
398174次浏览 3403人参与
# 网申一定要掌握的小技巧 #
5278次浏览 52人参与
# 机械人，你在招聘流程中的企业有哪些？ #
17793次浏览 186人参与
牛客网
牛客企业服务