Préparez un fichier HTML pour les parties communes telles que common.html.
demo\src\main\resources\templates\common.html
<html xmlns:th="http://www.thymeleaf.org">
<header th:fragment="header()">
entête
</header>
</html>
Spécifie de charger le HTML défini dans common.html en tant que HTML spécifique à l'écran.
demo\src\main\resources\templates\templateTest\index.html
<html xmlns:th="http://www.thymeleaf.org">
<header th:replace="common :: header()"></header>
</body>
index.html
<header th:replace="common :: header()"></header>
A été défini dans common.html
fragment="header()">
Il a été remplacé par.
text="${Nom de variable}"
Ou
```[[${Nom de variable}]]```
- Déclaration IF
#### **`if="${Expression conditionnelle}"`**
```th
--Définition variable
#### **`with="Nom de variable= 'Valeur à définir'"`**
```th
- switch
<th:block th:switch="${Valeur à inspecter}"> <th:block th:case=Valeur 1> Valeur à inspecter=Que faire si la valeur est 1 </th:block> <th:block th:case=Valeur 2> Valeur à inspecter=Que faire si la valeur est 2 </th:block> </th:block>
- Traitement itératif des listes
#### **`th:each="{Nom de variable répété} , ${Nom de la variable d'état lors du traitement itératif} : ${Nom de variable à répéter}"`**
Vous pouvez obtenir les informations suivantes sur "Nom de la variable d'état pendant le traitement répétitif".
| Propriété | La description |
|---|---|
| index | Numéro d'index dans la boucle (valeur de 0) |
| count | Compte en boucle (valeur de 1) |
| size | Taille de la liste à boucler |
| current | Éléments dans la boucle |
| even | Que ce soit ou non une ligne paire (booléenne) |
| odd | Que ce soit ou non une ligne impaire (booléenne) |
| first | S'il s'agit de la première ligne (booléen) |
| last | S'il s'agit de la dernière ligne (booléen) |
demo\src\main\resources\templates\templateTest\index.html
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: head('Test de modèle',~{::link},~{::script})">
<!--CSS spécifique à l'écran, JS-->
<link rel="stylesheet" th:href="@{/css/index.css}" />
<script type="text/javascript" th:src="@{/js/index.js}"></script>
<script>
console.log("JS spécifique à l'écran");
</script>
</head>
<body>
<header th:replace="common :: header()"></header>
<section>
<h1>Sortie de la valeur de controllerValue</h1>
th:utilisation du texte:<span th:text="${controllerValue}"></span>
<br>
th:texte non utilisé:[[${controllerValue}]]
</section>
<br>
<section>
<h1>ＩＦ</h1>
<th:block th:if="${conditionVal == 1}">
true
</th:block>
</section>
<br>
<section>
<h1>variable</h1>
<th:block th:with="hensu = 'valeur de hensu'">
hensu = [[${hensu}]]
</th:block>
</section>
<br>
<section>
<th:block th:switch="${conditionVal}">
<th:block th:case=1>
conditionVal=Sortie si 1
</th:block>
<th:block th:case=2>
conditionVal=Sortie en cas de 2
</th:block>
</th:block>
</section>
<br>
<section>
<h1>Liste itérative</h1>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>Informations sur la boucle</th>
</tr>
</thead>
<tbody>
<tr th:each="company , status : ${companyList}">
<td th:text="${company.id}"></td>
<td th:text="${company.name}"></td>
<td>
index：[[${status.index}]]<br>
count：[[${status.count}]]<br>
size：[[${status.size}]]<br>
current：[[${status.current}]]<br>
even：[[${status.even}]]<br>
odd：[[${status.odd}]]<br>
first：[[${status.first}]]<br>
last：[[${status.last}]]<br>
</td>
</tr>
</tbody>
</table>
</section>
<footer th:replace="common :: footer()"></footer>
</body>
</html>
demo\src\main\resources\templates\common.html
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title , links , scripts)">
<meta charset="utf-8">
<!--Définir un titre spécifique à l'écran-->
<title th:text="${title}"></title>
<!--CSS et JS communs à tous les écrans-->
<link rel="stylesheet" th:href="@{/css/common.css}" />
<script type="text/javascript" th:src="@{/js/common.js}"></script>
<!--Pour remplacement avec CSS et JS spécifiques à l'écran-->
<th:block th:replace="${links} ?: _" />
<th:block th:replace="${scripts} ?: _" />
</head>
<header th:fragment="header()">
entête
</header>
<footer th:fragment="footer()">
bas de page
</footer>
</html>
demo\src\main\java\com\example\demo\TemplateTestConttoller.java
package com.example.demo;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
@RequestMapping("templateTest")
public class TemplateTestConttoller {
@RequestMapping(value = "/index", method = RequestMethod.GET)
public Model index(Model model) throws Exception {
//Pour le traitement itératif
List<Company> companyList = new ArrayList<>();
companyList.add(new Company(1, "Société A"));
companyList.add(new Company(2, "Société B"));
model.addAttribute("companyList", companyList);
model.addAttribute("controllerValue", "Chaîne transmise par le contrôleur");
model.addAttribute("conditionVal", 1);
return model;
}
public class Company{
public Integer id;
public String name;
public Company(Integer id, String name) {
this.id = id;
this.name = name;
}
}
}