thymeleaf案列

最新推荐文章于 2024-04-17 02:51:57 发布

mytimelife

最新推荐文章于 2024-04-17 02:51:57 发布

阅读量196

点赞数

本文链接：https://blog.csdn.net/mytimelife/article/details/104872216

版权

点击上方 Java老铁，并选择设为星标

优质文章和资料会及时送达

1.介绍

Thymeleaf是一个流行的模板引擎，该模板引擎采用Java语言开发，模板引擎是一个技术名词，是跨领域跨平台的概念，在Java语言体系下有模板引擎，在C#、PHP语言体系下也有模板引擎。除了thymeleaf之外还有Velocity、FreeMarker等模板引擎，功能类似。

Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式，因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。使用thymeleaf创建的html模板可以在浏览器里面直接打开（展示静态数据），这有利于前后端分离。需要注意的是thymeleaf不是spring旗下的。

2.案列

2.1 pom文件

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>


    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>


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


        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>


    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

2.2 controller

@Controller
@RequestMapping("/www")
public class Democontroller {


    @GetMapping("/show")
    public String show(Model model){
        model.addAttribute("msg","你好，我是小明");
        return "index";
    }
}

2.3 application.yml

添加配置

server:
  port: 9001
spring:
  thymeleaf:
    cache: false

第二个配置是关闭Thymeleaf的缓存

2.4 HTML模板

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<h1 th:text="${msg}">大家好</h1>
</body>
</html>

Springboot使用thymeleaf作为视图展示的时候，我们将模板文件放置在resource/templates目录下，静态资源放置在resource/static目录下。

结构图:

2.5 启动运行

上面这个小案列是对thymeleaf的一个简单介绍

3.Thymeleaf语法

3.1 变量

实体类

public class User implements Serializable {


    private String id;
    private String userName;
    private Integer age;
    private Date birthday;


    public String getId() {
        return id;
    }


    public void setId(String id) {
        this.id = id;
    }


    public String getUserName() {
        return userName;
    }


    public void setUserName(String userName) {
        this.userName = userName;
    }


    public Integer getAge() {
        return age;
    }


    public void setAge(Integer age) {
        this.age = age;
    }


    public Date getBirthday() {
        return birthday;
    }


    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }


    @Override
    public String toString() {
        return "User{" +
                "id='" + id + '\'' +
                ", userName='" + userName + '\'' +
                ", age=" + age +
                ", birthday=" + birthday +
                '}';
    }

给实体中添加数据

@GetMapping("/show2")
    public String getUser(Model model){
        User user = new User();
        user.setId(UUID.randomUUID().toString());
        user.setUserName("蒙着");
        user.setAge(20);
        user.setBirthday(new Date());
        model.addAttribute("user",user);
        return "user";
    }

html模板

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>User</title>
</head>
<body>
<table>
    <thead>
        <th>ID</th>
        <th>用户名</th>
        <th>年龄</th>
        <th>生日</th>
    </thead>
    <tbody>
        <td th:text="${user.id}">62365</td>
        <td th:text="${user.userName}">蒙着</td>
        <td th:text="${user.age}">12</td>
        <td th:text="${#dates.format(user.birthday,'yyyy-MM-dd')}">2013.6.3</td>
    </tbody>
</table>
</body>
</html>

我们可以看到上述代码，Thymeleaf通过${}来获取model中的变量，注意这不是el表达式，而是ognl表达式，但是语法非常像。表达式嵌在th:text的标签属性中，这个也叫作属性。

运行：

对于上述取值的方式，我们还可以改造

<tr th:object="${user}">
        <td th:text="*{id}">62365</td>
        <td th:text="*{userName}">蒙着2</td>
        <td th:text="*{age}">12</td>
        <td th:text="*{#dates.format(birthday,'yyyy-MM-dd')}">2013.6.3</td>
    </tr>

使用 th:object="${user}"获取user的值，并且保存，然后使用*{}来获取属性的值.

2.方法

<h3 th:object="${user}">
        <p><span th:text="*{userName.split('')[1]}">23</span></p>
    </h3>

3.字面值

使用一对单引号括起来的值，不认为是变量，而是字面量。

<h3>
        你真的<span th:text="'666'"></span>啊
    </h3>

运行截图：

但是对于数字，写什么就是什么，而且还可以进行运算

 <h3>
        <span th:text="2018">0000</span><br>
        <span th:text="2018+2">11111</span>
    </h3>

运行：

布尔值

<div th:if="true">
        来了老弟
    </div>

运行：

4.字符串拼接

<span th:text="'hello,我是'+${user.userName}+'我'+${user.age}+'岁'"></span>

运行：

我们发现这样拼接非常的麻烦，我们可以使用||进行替换

<span th:text="|hello,我是${user.userName}我${user.age}岁|"></span>

5.循环

使用th：each指令

<tr th:each="user : ${users}">
            <td th:text="${user.id}">dd</td>
            <td th:text="${user.userName}">cc</td>
            <td th:text="${user.age}">vv</td>
            <td th:text="${user.birthday}">vvv</td>
        </tr>

我们还可以获取遍历对象的状态

state对象包含以下属性：

index，从0开始的角标
count，元素的个数，从1开始
size，总元素个数
current，当前遍历到的元素
even/odd，返回是否为奇偶，boolean值
first/last，返回是否为第一或最后，boolean值

<tr th:each="user,state : ${users}">
            <td th:text="${state.index}"></td>
            <td th:text="${state.count}"></td>
            <td th:text="${user.id}">dd</td>
            <td th:text="${user.userName}">cc</td>
            <td th:text="${user.age}">vv</td>
            <td th:text="${user.birthday}">vvv</td>
        </tr>

map的遍历

<tr th:each="useEntry,state:${users}">
            <td th:text="${state.index + 1}"/>
            <td th:text="${useEntry.key}"/>
            <td th:text="${useEntry.value.id}"/>
            <td th:text="${useEntry.value.userName}"/>
            <td th:text="${useEntry.value.age}"/>
            <td th:text="${useEntry.birthday}"/>
        </tr>

6.if与else

<p>
        <span th:if="${user.age}<30">30</span>
    </p>

7.switch

<div th:switch="${user.role}">
  <p th:case="'admin'">用户是管理员</p>
  <p th:case="'manager'">用户是经理</p>
  <p th:case="*">普通用户</p>
</div>

需要注意的是，一旦有一个th:case成立，其它的则不再判断。与java中的switch是一样的。

另外th:case="*"表示默认，放最后。

8.三元运算

<span th:text="${user.sex} ? '男':'女'"></span>

关注我

获取更多
Java干货

原创文章

视频资料

技术交流群

mytimelife

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫