Thymeleaf常用标签

Thymeleaf常用标签

th:each

Handler:

@GetMapping("/each")
public ModelAndView each(){
    List<User> list = Arrays.asList(
            new User(1,"张三"),
            new User(2,"李四")
    );
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("testeach");
    modelAndView.addObject("list",list);
    return modelAndView;
}

实体类：

package com.southwind.entity;
​
import lombok.AllArgsConstructor;
import lombok.Data;
@Data
@AllArgsConstructor
public class User {
​
    private  Integer id;
    private  String name;
​
​
}

html

<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org"></html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
    </tr>
    <tr th:each="user:${list}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
    </tr>
</table>
</body>
</html>

  • th:value

handler

@GetMapping("/value")
public ModelAndView value(){
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("testvalue");
    modelAndView.addObject("value","Spring Boot测试");
    return modelAndView;
}

html

<input type="text" th:value="${value}">

  • th:src

    用来引入静态资源，相当于HTML原生标签里的img，script里的src属性。

Spring Boot默认不会扫描 Resources 里 templates里面的html，但是会扫描 Resources 里 templates里static的html。所以通过浏览器直接访问对应的html文件会报错，必须经过handler层才能访问。static里面静态资源则相反，可以直接通过浏览器直接访问对应的html。

图片，css，js,静态加载的html都需要放置在resources/static文件中

 

 

handler

@GetMapping("/src")
public ModelAndView src(){
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("testsrc");
    modelAndView.addObject("src","/1.png");
    return modelAndView;
}

html

//<img th:src="${src}">

如果src的值，直接写在HTML中

//<img th:src="@{/1.png}">

如果只是经过前台把png，导入到html里面.(此时html和png都在static文件夹下)

//<img src="1.png">

  • th:href

    用作设置超链接的href.

handler

@GetMapping("/href")
public ModelAndView href(){
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("testhref");
    modelAndView.addObject("href","https://www.baidu.com");
    return modelAndView;
}

html

<a th:href="${href}">百度</a>

  • th:selected

    用作给HTML元素设置选中，条件成立则选中，否则不选中。

@GetMapping("/select")
public ModelAndView select(){
    List<User> list = Arrays.asList(
            new User(1,"张三"),
            new User(2,"李四"),
            new User(3,"王五")
    );
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("testselect");
    modelAndView.addObject("list",list);
    modelAndView.addObject("name","李四");
    return modelAndView;

}

html

<select>
<!--做一个下拉框，下拉框打开后，张三李四王五，默认是李四-->
          <option th:each="user:${list}"
                  th:value="${user.id}"
                  th:text="${user.name}"
                  th:selected="${user.name==name}"
          ></option>
      </select>

select标签结合th:each来使用，首先遍历list集合动态创建option元素，根据每次遍历出的user.name与业务数据中的name是否相等来决定是否要做选择。

  • th:attr

给HTML标签的任意属性赋值。

@GetMapping("/attr")
public ModelAndView attr(){
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("testattr");
    modelAndView.addObject("attr","Spring Boot 测试");
    return  modelAndView;
}

html

<input th:attr="value=${attr}">
<input th:value="${attr}">;

posted on 2023-02-22 17:37  张铁蛋666  阅读(133)  评论(0)    收藏  举报

导航