Thymeleaf介绍

前言

  thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非Web环境中的应用开发。它是一个开源的Java库,基于Apache License 2.0许可,由Daniel Fernández创建,该作者还是Java加密库Jasypt的作者。

  Thymeleaf提供了一个用于整合Spring MVC的可选模块,在应用开发中,你可以使用Thymeleaf来完全代替JSP或其他模板引擎,如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。接下来,这些标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。

  它的特点便是:开箱即用,Thymeleaf允许您处理六种模板,每种模板称为模板模式:
  1.XML
  2.有效的XML
  3.XHTML
  4.有效的XHTML
  5.HTML5
  6.旧版HTML5

  所有这些模式都指的是格式良好的XML文件,但Legacy HTML5模式除外,它允许您处理HTML5文件,其中包含独立(非关闭)标记,没有值的标记属性或不在引号之间写入的标记属性。为了在这种特定模式下处理文件,Thymeleaf将首先执行转换,将您的文件转换为格式良好的XML文件,这些文件仍然是完全有效的HTML5(实际上是创建HTML5代码的推荐方法)

另请注意,验证仅适用于XML和XHTML模板。

  然而,这些并不是Thymeleaf可以处理的唯一模板类型,并且用户始终能够通过指定在此模式下解析模板的方法和编写结果的方式来定义他/她自己的模式。这样,任何可以建模为DOM树(无论是否为XML)的东西都可以被Thymeleaf有效地作为模板处理。

Springboot整合thymeleaf

pom.xml:

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

application.yml:

  thymeleaf:
    cache: false  # 不加载缓存

controller:

@Controller
@RequestMapping("/demo")
public class DemoController {

    @GetMapping("/test")
    public String test(Model model,String id){
        System.out.println(id);

        List<User> userList = new ArrayList<>();
        userList.add(new User(1,"zs","bj"));
        userList.add(new User(2,"ls","hlj"));
        userList.add(new User(3,"ww","haerbin"));
        model.addAttribute("userList",userList);

        Map<String,Object> dataMap = new HashMap<>();
        dataMap.put("No","123");
        dataMap.put("address","bj");
        model.addAttribute("dataMap",dataMap);

        String[] names = {"张三","李四","王五"};
        model.addAttribute("names",names);

        model.addAttribute("now",new Date());

        model.addAttribute("age",25);

        model.addAttribute("hello","hello world");
        return "demo";
    }
}

在resources中创建templates目录,在templates目录创建 demo.html,代码如下:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf的入门</title>
</head>
<body>
<!--输出hello数据-->
<p th:text="${hello}"></p>
</body>
</html>

解释:
<html xmlns:th="http://www.thymeleaf.org"> :这句声明使用thymeleaf标签
<p th:text="${hello}"></p> :这句使用 th:text="${变量名}" 
                            表示 使用thymeleaf获取文本数据,类似于EL表达式。

Thymeleaf基本语法

开胃小菜过后,现在来具体介绍基本语法

(1)th:action

定义后台控制器路径,类似 <form> 标签的action属性。
例如:

<form th:action="@{/test/hello}" >
    <input th:type="text" th:name="id">
    <button>提交</button>
</form>

(2)th:each

对象遍历,功能类似jstl中的 <c:forEach> 标签。

<table>
    <tr>
        <td>下标</td>
        <td>编号</td>
        <td>姓名</td>
        <td>住址</td>
    </tr>
    <tr th:each="user,userStat:${userList}">
        <td>
            <span th:text="${userStat.index}"></span>
        </td>
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.address}"></td>
    </tr>
</table>

(3)Map输出

<div th:each="map,mapStat:${dataMap}">
    <div th:text="${map}"></div>
    key:<span th:text="${mapStat.current.key}"></span><br/>
    value:<span th:text="${mapStat.current.value}"></span><br/>
</div>

(4)数组输出

<div th:each="nm,nmStat:${names}">
    <span th:text="${nmStat.count}"></span>
    <span th:text="${nm}"></span>
</div>

(5)Date输出

<div>
    <span th:text="${#dates.format(now,'yyyy-MM-dd hh:mm:ss')}"></span>
</div>

(6)th:if条件

<div>
    <span th:if="${(age>=18)}">终于成年了</span>
</div>

(7)th:fragment 定义一个模块

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>fragment</title>
</head>
<body>
<div id="C" th:fragment="copy">
    关于我们<br/>
</div>
</body>
</html>

(8)th:include

可以直接引入 th:fragment

<div id="W" th:include="footer::copy"></div>

在这献上几张小图图,一键三连哦


94.jpg
40.jpg
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。