Thymeleaf th标签

最新推荐文章于 2023-04-16 20:54:34 发布

保持1

最新推荐文章于 2023-04-16 20:54:34 发布

阅读量277

点赞数

分类专栏： thymeleft 文章标签：前端

原文链接：https://www.cnblogs.com/gdjlc/p/11701381.html

版权

thymeleft 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

（一）Thymeleaf 是个什么？

简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

1.Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

2.Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

3. Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

1、pom.xml
加入Thymeleaf依赖

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

2、src/main/java/com/example/demo/User.java

复制代码

package com.example.demo;

public class User {
    Integer id;
    String name;

    public User(Integer id, String name) {
        this.id = id;
        this.name = name;
    }
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

复制代码

3、src/main/java/com/example/demo/TestController.java

复制代码

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class TestController {
    @RequestMapping("/")
    public String test(Model model){
        List<User> users = queryUsers();
        model.addAttribute("user", users.get(0));
        model.addAttribute("users", users);
        return "test";
    }

    private List<User> queryUsers(){
        List<User> users = new ArrayList<User>();
        users.add(new User(1,"张三"));
        users.add(new User(2,"李四"));
        users.add(new User(3,"王五"));
        return users;
    }
}

复制代码

4、src/main/resources/templates/test.html

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table { border-collapse:collapse;}
        td { border: 1px solid #C1DAD7;}
    </style>
</head>
<body>
    <div>使用变量表达式</div>
    <table>
        <tr>
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
        </tr>
    </table>

    <div>使用星号表达式：使用星号</div>
    <table>
        <tr th:object="${user}">
            <td th:text="*{id}"></td>
            <td th:text="*{name}"></td>
        </tr>
    </table>

    <div>使用星号表达式：使用#object对象</div>
    <table>
        <tr th:object="${user}">
            <td th:text="${#object.id}"></td>
            <td th:text="${#object.name}"></td>
        </tr>
    </table>

    <div>在循环体中使用星号表达式</div>
    <table>
        <tr th:each="u : ${users}" th:object="${u}">
            <td th:text="*{id}"></td>
            <td th:text="*{name}"></td>
        </tr>
    </table>


</body>
</html>

复制代码

浏览器访问：http://localhost:8080
显示如下截图所示：