在Themeleaf中如何进行条件判断及循环操作

忧郁的大喷菇
75 阅读3分钟

1.首先这里我定义了一个实体类

public class User {
	Integer id;
	String name;
	String age;
	
	
	public User() {
		super();
	}


	public User(Integer id, String name, String age) {
		super();
		this.id = id;
		this.name = name;
		this.age = age;
	}


	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;
	}


	public String getAge() {
		return age;
	}


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


	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", age=" + age + "]";
	}
	
	

}

2.在pom.xml添加依赖

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.lexed</groupId>
  <artifactId>springboot004</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <!-- 引入springboot的坐标依赖 -->
  <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>2.1.0.RELEASE</version>
  </parent>
  
  <dependencies>
      <dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-web</artifactId>
      </dependency>
      
      <!-- 添加热部署依赖 -->
      <dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-devtools</artifactId>
      </dependency>
      
      <!-- 添加Thymeleaf依赖 -->
      <dependency>
          <groupId>org.springframework.boot</groupId>
          <artifactId>spring-boot-starter-thymeleaf</artifactId>
      </dependency>
  </dependencies>
</project>

3.在配置文件中配置一下Thymeleaf

spring.thymeleaf.prefix=classpath:/templates/ 
spring.thymeleaf.suffix=.html 
spring.thymeleaf.encoding=utf-8
spring.thymeleaf.mode=HTML5 
spring.thymeleaf.cache=false

4 .创建 Thymeleaf 模板：在你的项目中创建 Thymeleaf 模板文件，通常存放在 src/main/resources/templates/ 目录下。Thymeleaf 模板使用 .html 扩展名，并且可以包含 Thymeleaf 的标签和表达式。

5 . 在控制器中使用 Thymeleaf：在你的 Spring MVC 控制器中，通过返回视图名称的方式来使用 Thymeleaf。例如，你可以使用 Model 对象返回视图名称，并将需要在模板中使用的数据添加到模型中。

@Controller
@RequestMapping("/thy1")
public class thycontroller1 {

		
		@RequestMapping("/eachlist")
		public String eachlist(Model model){
			List<User> userlist=new ArrayList<>();
			for(int i=0;i<10;i++){
				User user=new User(i,"张三","20");
				userlist.add(user);
			}
			model.addAttribute("userlist", userlist);
			return "eachlist";
			
		}
		
		@RequestMapping("/eachmap")
		public String eachmap(Model model){
			Map<Integer, Object> usermaps=new HashMap<>();
			for(int i=0;i<10;i++){
				User user=new User(i,"张三","20");
				usermaps.put(i,user);
			}
			model.addAttribute("usermaps", usermaps);
			return "eachmap";
			
		}
		
		@RequestMapping("/if")
		public String iff(Model model){
			
			model.addAttribute("sex", 0);
			return "ifunless";
			
		}

}

6.编译springboot的入口类

typescript
复制代码
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		SpringApplication.run(App.class, args);

	}

}

7.在 Thymeleaf 模板中使用数据：在 Thymeleaf 模板中，可以使用 Thymeleaf 的表达式语言来访问和展示后端传递的数据

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div th:each="user,userMapStat:${userlist}">
        <span th:text="${userMapStat.count}"></span><br>
        <span th:text="${user.id}"></span>
        <span th:text="${user.name}"></span>
        <span th:text="${user.age}"></span><br>
    </div>

</body>
</html>
  • <html xmlns:th="http://www.thymeleaf.org">：这是HTML标签，通过xmlns:th属性声明了Thymeleaf的命名空间，以便在模板中使用Thymeleaf的指令。
  • div th:each="user,userMapStat:${userlist}">：这是一个div标签，使用th:each指令对${userlist}进行循环迭代。user是循环变量，表示当前迭代的用户对象，userMapStat用于获取循环状态信息。
  • <span th:text="${userMapStat.count}"></span>：这是一个span标签，使用th:text指令将${userMapStat.count}的值显示在标签中。${userMapStat.count}表示当前迭代的次数。
  • <span th:text="${user.id}"></span>：这是一个span标签，使用th:text指令将${user.id}的值显示在标签中。${user.id}表示当前迭代的用户对象的id属性值。
  • <span th:text="${user.name}"></span>：这是一个span标签，使用th:text指令将${user.name}的值显示在标签中。${user.name}表示当前迭代的用户对象的name属性值。
  • <span th:text="${user.age}"></span>：这是一个span标签，使用th:text指令将${user.age}的值显示在标签中。${user.age}表示当前迭代的用户对象的age属性值。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <div th:each="user:${usermaps}">
     <span th:text="${user.key}"></span>
     <span th:text="${user.value}"></span>
     <span th:text="${user.value.id}"></span>
     <span th:text="${user.value.name}"></span>
     <span th:text="${user.value.age}"></span>
 </div>
</body>
</html>
  • <div th:each="user:${usermaps}">：这是一个div标签，使用了Thymeleaf的th:each指令。该指令用于对usermaps进行循环迭代，并将每次迭代的键值对赋值给user变量。
  • <span th:text="${user.key}"></span>：这是一个span标签，使用了Thymeleaf的th:text指令。该指令将user.key的值作为文本内容显示在页面上，表示当前迭代的键。
  • <span th:text="${user.value}"></span>：这是一个span标签，使用了Thymeleaf的th:text指令。该指令将user.value的值作为文本内容显示在页面上，表示当前迭代的值。
  • <span th:text="${user.value.id}"></span>：这是一个span标签，使用了Thymeleaf的th:text指令。该指令将user.value.id的值作为文本内容显示在页面上，表示当前迭代的值对象的id属性值。
  • <span th:text="${user.value.name}"></span>：这是一个span标签，使用了Thymeleaf的th:text指令。该指令将user.value.name的值作为文本内容显示在页面上，表示当前迭代的值对象的name属性值。
  • <span th:text="${user.value.age}"></span>：这是一个span标签，使用了Thymeleaf的th:text指令。该指令将user.value.age的值作为文本内容显示在页面上，表示当前迭代的值对象的age属性值。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h1>满足条件显示，否则相反</h1>
    <div th:if="${sex eq 1}">
        男：<input type="radio" name="sex" th:value="1">
    </div>
    <div th:if="${sex eq 0}">
        女：<input type="radio" name="sex" th:value="0">
    </div>
</body>
</html>

  • <div th:if="${sex eq 1}">：这是一个div标签，使用了Thymeleaf的th:if指令。该指令用于判断sex是否等于1，如果条件满足，则显示div标签内的内容。

  • 男：<input type="radio" name="sex" th:value="1">：这是一个文本内容和单选按钮的组合。如果sex等于1，即条件满足，将显示"男："文本和一个值为1的单选按钮。

  • <div th:if="${sex eq 0}">：这是另一个div标签，使用了Thymeleaf的th:if指令。该指令用于判断sex是否等于0，如果条件满足，则显示div标签内的内容。

  • 女：<input type="radio" name="sex" th:value="0">：这是一个文本内容和单选按钮的组合。如果sex等于0，即条件满足，将显示"女："文本和一个值为0的单选按钮。

除了if判断之外，还有unless，unless可以理解为和if反着来

<h1>满足条件显示，否则相反</h1> 
<div th:if="${sex eq 1}"> 
    男：<input type="radio" name="sex" th:value="1"> 
</div> 
<div th:unless="${sex eq 1}"> 
    女：<input type="radio" name="sex" th:value="0"> 
</div>

与th:if相反，th:unless指令会在条件不满足时执行。当条件满足时，与th:unless关联的div标签将不会显示。

avatar
文章
阅读
粉丝