快速入门Thymeleaf使用

最新推荐文章于 2023-11-30 16:45:43 发布

成为大佬先秃头

最新推荐文章于 2023-11-30 16:45:43 发布

阅读量544

点赞数 1

分类专栏： Java技术知识扩展文章标签： spring boot html

本文链接：https://blog.csdn.net/qq_39940674/article/details/83339964

版权

Java技术知识扩展专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是 thymeleaf?

thymeleaf 跟 JSP 一样，就是运行之后，就得到纯 HTML了。区别在与，不运行之前， thymeleaf 也是纯 html ...
所以 thymeleaf 不需要服务端的支持，就能够被以 html 的方式打开，这样就方便前端人员独立设计与调试, jsp 就不行了，不启动服务器 jsp 都没法运行出结果来。

配置thymeleaf

1.声明当前文件是 thymeleaf, 里面可以用th开头的属性

<html xmlns:th="http://www.thymeleaf.org">

2.pom.xml, 增加了对 thymeleaf 的支持。

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

3.在application.properties配置文件中配置：

#thymeleaf 配置
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
spring.thymeleaf.cache=false
server.context-path=/thymeleaf

如何使用thymeleaf

先定义一个Product的类

package com.java.springboot.pojo;
 
public class Product {
 
    private int id;
    private String name;
    private int price;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getPrice() {
        return price;
    }
    public void setPrice(int price) {
        this.price = price;
    }
    public Product(int id, String name, int price) {
        super();
        this.id = id;
        this.name = name;
        this.price = price;
    }
     
}

在Controller层将参数填充到 Model 中

package com.how2java.springboot.web;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
 
import com.how2java.springboot.pojo.Product;
  
@Controller
public class TestController {
  
    @RequestMapping("/test")
    public String test(Model m) {
        String htmlContent = "<p style='color:red'> 红色文字</p>";
        Product currentProduct =new Product(5,"product e", 200);
        boolean testBoolean = true;
        List<Product> ps = new ArrayList<>();
        ps.add(new Product(1,"product a", 50));
        ps.add(new Product(2,"product b", 100));
        ps.add(new Product(3,"product c", 150));
        ps.add(new Product(4,"product d", 200));
        ps.add(currentProduct);
        ps.add(new Product(6,"product f", 200));
        ps.add(new Product(7,"product g", 200));       
         
        m.addAttribute("ps", ps);
        m.addAttribute("testBoolean ", testBoolean);
        m.addAttribute("htmlContent", htmlContent);
        m.addAttribute("currentProduct", currentProduct);
         
        return "test";
    }
}

如果在前台页面上显示所需要的内容可以通过以下几种方式读取：

1.可以通过这种方式读取后台的数据
<p th:text="${htmlContent}" ></p>

2.如果是存的对象就可以使用下面这几种方法，thymeleaf中可以点方法哟！
<p th:text="${currentProduct.name}" ></p>
<p th:text="${currentProduct.getName()}" ></p>

3.当然也可以进行加减乘除的算法
<p th:text="${currentProduct.price+999}" ></p>
<p th:text="${currentProduct.price-999}" ></p>
<p th:text="${currentProduct.price*999}" ></p>
<p th:text="${currentProduct.price/999}" ></p>

4.Thymeleaf 的条件判断是 通过 th:if 来做的，只有为真的时候，才会显示当前元素
<p th:if="${testBoolean}" >如果testBoolean 是 true ，本句话就会显示</p>

5.取反可以用not, 或者用th:unless.
<p th:if="${not testBoolean}" >取反 ，所以如果testBoolean 是 true ，本句话就不会显示</p>
<p th:unless="${testBoolean}" >unless 等同于上一句，所以如果testBoolean 是 true ，本句话就不会显示</p>

6.如果传过来的是集合可以使用 th:each="p, ${ps}" 方式遍历
<tr th:each="p: ${ps}">
<td th:text="${p.id}"></td>
<td th:text="${p.name}"></td>
<td th:text="${p.price}"></td>
</tr>

7.如果是一些select或者单选框的话可以使用下面这种方法存值
 <option th:each="p:${ps}" th:value="${p.id}"     th:selected="${p.id==currentProduct.id}"    th:text="${p.name}" ></option>

 <input name="product" type="radio" th:each="p:${ps}" th:value="${p.id}"  th:checked="${p.id==currentProduct.id}"     th:text="${p.name}"  />

知识补充：thymeleaf的内置工具

像 #date 这样的 thymeleaf内置工具有很多种，一共有如下16种：

Execution Info
Messages
URIs/URLs
Conversions
Dates
Calendars
Numbers
Strings
Objects
Booleans
Arrays
Lists
Sets
Maps
Aggregates
IDs

以上我就不一一给大家举例子了，根据自己的业务需求可以上网搜索！

案例分析

比如：有时候时间可能会出现乱码的情况，可以通过下面这种方式解决

<div class="showing date">
	<h2>格式化日期</h2>
	直接输出日期 ${now}:
	<p th:text="${now}"></p>
	默认格式化 ${#dates.format(now)}:
	<p th:text="${#dates.format(now)}"></p>
	自定义格式化 ${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}:
	<p th:text="${#dates.format(now,'yyyy-MM-dd HH:mm:ss')}"></p>
</div>

上面列举了比较常用的东西，欢迎评论区讨论，大家一起相互学习

感谢http://how2j.cn/非常全面的学习平台！