编程知识 cdmana.com

[️ springboot Template Engine] - thymeleaf

Table des matières

Introduction au moteur de modèle

IntroductionThymeleafMoteur de modèle

AnalyseThymeleafMoteur de modèle

TestsThymeleafMoteur de modèle

ThymeleafIntroduction:

 thymeleafApprentissage de la grammaire

  Test de pratique

 Résumé:


Introduction au moteur de modèle

jsp Avec des fonctions puissantes , Je peux trouver des données et les transmettre à JSP Après la page ,Nous pouvons utiliserjsp Affichage et interaction faciles des données, etc , Y compris la capacité d'écrire JavaCode.Mais,SpringBootD'abord,jarDe la façon dont,Non, pas du tout.war; Deuxièmement, notre tomcat C'est intégré , Donc maintenant par défaut ne supporte pas jsp.

Si nous utilisons directement la page statique pure , Ça va sûrement causer beaucoup de problèmes de développement ,Alors...springboot Moteur de modèle recommandé ,En fait...jspC'est un moteur de Template, Et plus utile freemarker,Y compris:SpringBoot Pour nous recommander Thymeleaf! L'essence du moteur Template est illustrée ci - dessous :

IntroductionThymeleafMoteur de modèle

 Thymeleaf Site officiel:Thymeleaf

SpringDocuments officiels:

https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter

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

 MavenTéléchargement automatiquejarSac, Essai ci - dessous maven Télécharger quelque chose ;

AnalyseThymeleafMoteur de modèle

Commencez parSpringBoot Le principe de la configuration automatique de Thymeleaf Règles de configuration automatique pour , En suivant cette règle , Nous utilisons .On peut y aller.ThymeleafClasse de configuration automatique pour:ThymeleafProperties

Nous pouvons voir le préfixe et le suffixe par défaut dans le fichier de configuration !

On doit juste mettre notre htmlPage placée sous le chemin de classetemplatesEn bas.,thymeleaf Pour nous aider à rendre automatiquement .

TestsThymeleafMoteur de modèle

1、Écrivez unTestController

 2、 Écrivez une page de test  test.html Mettez - le sur templates Sous la table des matières

 3、 Démarrer le test de demande de projet

4.Conclusions: Si nécessaire thymeleaf, Il suffit d'importer les dépendances correspondantes ,Et ensuite,htmlMettez - le surtemplates Dans le Répertoire de

ThymeleafIntroduction:

On peut voir Thymeleaf Site officiel:https://www.thymeleaf.org/
Exercices simples: Trouvez des données ,Afficher sur la page

1、 Modifier la demande de test , Augmentation du transfert de données

@Controller
public class TestController {

    @RequestMapping("/t1")
    public String test1(Model model){
        //Données stockées
        model.addAttribute("msg","Hello,Thymeleaf");
        //classpath:/templates/test.html
        return "test";
    }
}

 2、Nous allons utiliserthymeleaf,Besoin dehtmlContraintes pour importer des espaces de noms dans un fichier, Conseils pratiques .


 xmlns:th="http://www.thymeleaf.org"

3、 On va écrire la page avant inférieure

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Jiuyang Zhenjing---Frère long.</title>
</head>
<body>
<h1>Page de test</h1>
<!--th:textOui.div Le contenu est défini à la valeur qu'il spécifie -->
<div th:text="${msg}"></div>
</body>
</html>

4、Test de démarrage!

 thymeleafApprentissage de la grammaire

1、 Utilisez n'importe quel th:attr Pour remplacerHtml Valeur de l'attribut natif central !

2.Syntaxe d'expression:

  Test de pratique

@Controller
public class TestController {
    @RequestMapping("/t2")
    public String test2(Map<String,Object> map){
        //Données stockées
        map.put("msg","<h1>Hello,SpringBoot</h1>");
        map.put("users", Arrays.asList("dragon","longdi"));
        //classpath:/templates/test.html
        return "test";
    }
}

2、 Page d'essai extraire les données

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Jiuyang Zhenjing---Frère long.</title>
</head>
<body>
<h1>Page de test</h1>

<div th:text="${msg}"></div>
<!--Ne pas fuir-->
<div th:utext="${msg}"></div>
<!--Traverser les données-->
<!--th:each Cette étiquette est générée chaque fois que vous traversez -->
<h4 th:each="user :${users}" th:text="${user}"></h4>
<hr>
    <!--écriture en ligne-->
    <h4 th:each="user:${users}">[[${user}]]</h4>
</body>
</html>

3、Démarrer le test du projet!

 Résumé:

Parce quethymeleaf Beaucoup de styles de syntaxe , Maintenant que nous apprenons, nous oublierons ,Donc,,Dans le processus d'apprentissage, Ce qu'il faut utiliser , Consulter les documents officiels , Alors soyez habile avec les documents officiels !

版权声明
本文为[LongDi - IDEA]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/10/20211013211842767T.html

Scroll to Top