Μάθετε πώς να ενσωματώνετε αυτήν τη μηχανή προτύπων στις εφαρμογές σας Spring.

Το Thymeleaf είναι μια μηχανή προτύπων Java. Αναπτύσσει πρότυπα τόσο για web όσο και για αυτόνομες εφαρμογές. Αυτή η μηχανή προτύπων χρησιμοποιεί την ιδέα των Φυσικών Προτύπων για να εισάγει λογική στη διάταξή σας, χωρίς να διακυβεύεται η σχεδίασή σας. Με το Thymeleaf, θα έχετε τον έλεγχο του τρόπου με τον οποίο μια εφαρμογή θα επεξεργαστεί τα πρότυπα που δημιουργείτε.

Μπορείτε να χρησιμοποιήσετε το Thymeleaf για να επεξεργαστείτε έξι τύπους προτύπων: HTML, XML, Text, JavaScript, CSS και RAW. Το Thymeleaf αναφέρεται σε καθένα από τα πρότυπα ως λειτουργία προτύπου, με το HTML να είναι το πιο δημοφιλές πρότυπο που δημιουργήθηκε σε αυτήν τη μηχανή.

Εκκίνηση του Thymeleaf στην εφαρμογή σας

Υπάρχουν δύο τρόποι για να προσθέσετε το Thymeleaf στην εφαρμογή Spring Boot. Μπορείτε να επιλέξετε το Thymeleaf ως εξάρτηση κατά τη δημιουργία του λέβητα σας με Εργαλείο αρχικοποίησης του Spring. Έχετε επίσης την επιλογή να το προσθέσετε αργότερα στο αρχείο προδιαγραφών κατασκευής στην ενότητα εξαρτήσεων.

instagram viewer

Εάν επιλέξατε μία από τις επιλογές του έργου Gradle, το αρχείο που περιέχει τις εξαρτήσεις είναι το χτίζω.gradle αρχείο. Ωστόσο, αν επιλέξατε το Maven, τότε αυτό το αρχείο είναι pom.xml.

Τα δικα σου pom.xml Το αρχείο πρέπει να περιέχει την ακόλουθη ενότητα εξάρτησης:

<dependency>
<groupId>org.springframework.bootgroupId>


<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

Ενώ σας χτίζω.gradle Το αρχείο πρέπει να περιέχει την ακόλουθη ενότητα εξάρτησης:

dependencies {
 implementation 'org.springframework.boot: spring-boot-starter-thymeleaf'
}

Το δείγμα εφαρμογής που χρησιμοποιείται στο άρθρο είναι διαθέσιμο σε αυτό Αποθετήριο GitHub και είναι δωρεάν για χρήση βάσει της άδειας MIT.

Προσθέτοντας το Thymeleaf στην εφαρμογή Spring, θα αποκτήσετε πρόσβαση στη βασική του βιβλιοθήκη, η οποία σας επιτρέπει να χρησιμοποιήσετε την Πρότυπη Διάλεκτο του Thymeleaf. Η Spring Standard Dialect περιέχει μοναδικά χαρακτηριστικά και σύνταξη που μπορείτε να χρησιμοποιήσετε για να προσθέσετε διαφορετικές δυνατότητες στις διατάξεις σας.

Χρησιμοποιώντας το Thymeleaf στο Spring Boot

Όταν χρησιμοποιείτε το Thymeleaf στην εφαρμογή Spring, το πρώτο βήμα είναι να δημιουργήσετε το πρότυπό σας έγγραφο. Για αυτό το δείγμα εφαρμογής, το πρότυπο έγγραφο είναι HTML. Θα πρέπει πάντα να δημιουργείτε τα πρότυπά σας Thymeleaf στο Spring Boot's πρότυπα φάκελο, ο οποίος είναι διαθέσιμος στο αρχείο πόρων.

Το αρχείο home.html

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

Το παραπάνω πρότυπο Thymeleaf είναι ένα γενικό πρότυπο HTML5, με ένα ξένο χαρακτηριστικό (xmlns: ου). Ο σκοπός του xmlns: ου χαρακτηριστικό είναι να παρέχει το πεδίο εφαρμογής για όλα τα ου:* χαρακτηριστικά που θα χρησιμοποιήσετε σε αυτό το έγγραφο HTML. Τα άλλα χαρακτηριστικά και ετικέτες σε ένα πρότυπο Thymeleaf είναι παραδοσιακά Ετικέτες και χαρακτηριστικά HTML.

Δημιουργία κεφαλίδας

Μία από τις πρώτες και πιο σημαντικές πτυχές κάθε ιστότοπου ή εφαρμογής είναι η κεφαλίδα. Λέει τι είναι η εφαρμογή (μέσω του λογότυπου) και σας βοηθά να πλοηγηθείτε εύκολα στην εφαρμογή σας. Μια βασική κεφαλίδα πρέπει να έχει ένα λογότυπο, καθώς και αρκετούς συνδέσμους πλοήγησης.

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


 <body>


<divid="nav">


<h1>LOGOh1>


<ul>


<li><aid="current">Home a>li>


<li><a>Abouta>li>


<li><a>Servicesa>li>


ul>


div>


 body>


html>

Το Thymeleaf σάς επιτρέπει να προσθέσετε την παραπάνω κεφαλίδα σε οποιαδήποτε σελίδα στην εφαρμογή Ιστού σας χρησιμοποιώντας το ου: ένθετο Χαρακτηριστικό. ο ου: ένθετο και ου: αντικαθιστώ τα χαρακτηριστικά δέχονται αυτό που ο Thymeleaf ονομάζει τιμές έκφρασης θραυσμάτων. Οι εκφράσεις θραύσματος σάς επιτρέπουν να τοποθετείτε τμήματα σήμανσης σε οποιαδήποτε θέση στη διάταξή σας.

<divth: insert="~{header:: #nav}">div>

Εισαγωγή της σήμανσης παραπάνω στο επάνω μέρος του home.html Η ετικέτα θα εισαγάγει τη σήμανση κεφαλίδας στο επάνω μέρος της αρχικής σας σελίδας. Μια έκφραση θραύσματος έχει πολλά στοιχεία, δύο είναι προαιρετικά και δύο απαιτούνται:

  • Ένα tilde (~), το οποίο είναι προαιρετικό.
  • Ένα ζευγάρι σγουρά τιράντες ({}), το οποίο είναι προαιρετικό.
  • Το όνομα του προτύπου που περιέχει τη σήμανση που θέλετε να εισαγάγετε (header.html).
  • Ο επιλογέας CSS της σήμανσης που θέλετε να εισαγάγετε (#nav).

Έτσι, η ακόλουθη σήμανση παράγει το ίδιο αποτέλεσμα με το παραπάνω.

"header:: #nav">

Συμπλήρωση του σώματος του προτύπου σας

Το Thymeleaf σάς επιτρέπει να χρησιμοποιείτε πέντε τύπους εκφράσεων στα πρότυπά σας:

  • Έκφραση θραύσματος (~{…})
  • Έκφραση μηνύματος (#{…})
  • Έκφραση URL συνδέσμου (@{…})
  • Έκφραση μεταβλητής (${…})
  • Έκφραση μεταβλητής επιλογής (*{…})

Μια έκφραση μηνύματος σάς επιτρέπει να προσθέσετε εξωτερικευμένα τμήματα κειμένου στη διάταξή σας. Με τις εκφράσεις μηνυμάτων, μπορείτε εύκολα να αντικαταστήσετε ή να επαναχρησιμοποιήσετε το κείμενο στη διάταξή σας. Όταν χρησιμοποιείτε μια έκφραση μηνύματος, θα πρέπει πάντα να τοποθετείτε τα εξωτερικά τμήματα κειμένου σε a .ιδιότητες αρχείο κάτω από το πόροι ντοσιέ.

Για αυτό το δείγμα εφαρμογής, αυτό το αρχείο είναι μηνύματα.ιδιότητες, το οποίο περιέχει το ακόλουθο τμήμα κειμένου:

placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.

Θα πρέπει να σημειώσετε ότι το τμήμα κειμένου (ή το μήνυμα) παραπάνω έχει ένα μοναδικό κλειδί (placeholder.text). Αυτό συμβαίνει επειδή κάθε αρχείο μηνυμάτων μπορεί να περιέχει μια συλλογή διαφορετικών μηνυμάτων. Έτσι, θα χρειαστείτε ένα κλειδί για να εισαγάγετε ένα συγκεκριμένο μήνυμα στη διάταξή σας.

<pth: text="#{placeholder.text}">p>

Η εισαγωγή της παραπάνω σήμανσης στο σώμα του αρχείου HTML θα εμφανίσει αποτελεσματικά το κείμενο κράτησης θέσης ως παράγραφο στην προβολή σας. Σε αντίθεση με την έκφραση θραύσματος, κάθε πτυχή της έκφρασης του μηνύματος είναι υποχρεωτική. Μια έκφραση μηνύματος απαιτεί:

  • Αριθμητικό σύμβολο (#).
  • Ένα ζευγάρι σγουρά τιράντες ({}).
  • Το κλειδί που περιέχει το μήνυμα που θέλετε να εισαγάγετε (placeholder.text).

Διαμόρφωση του προτύπου σας

Ένα άλλο σημαντικό αρχείο στο πόροι φάκελος είναι το στατικό αρχείο. Αυτό το αρχείο αποθηκεύει τα αρχεία CSS και τυχόν εικόνες που σκοπεύετε να χρησιμοποιήσετε στην εφαρμογή σας. Για να συνδέσετε το εξωτερικό σας αρχείο CSS με το πρότυπο HTML Thymeleaf, θα χρειαστεί να χρησιμοποιήσετε την έκφραση URL συνδέσμου. Οι διαδικασίες έκφρασης διεύθυνσης URL συνδέσμου τόσο σχετικές όσο και απόλυτες διευθύνσεις URL.

<linkrel="stylesheet"th: href="@{/css/style.css}" />

Εισαγωγή της σήμανσης παραπάνω στο του αρχείου HTML σας θα σας επιτρέψει να διαμορφώσετε το στυλ του προτύπου σας χρησιμοποιώντας α στυλ.css αρχείο. Αυτό το αρχείο είναι διαθέσιμο σε α css φάκελο κάτω από το στατικός τμήμα του πόροι αρχείο του δείγματος αίτησης. Θα πρέπει πάντα να εκχωρείτε την έκφραση διεύθυνσης URL συνδέσμου στο th: href Χαρακτηριστικό.

Το Thymeleaf παρέχει πολλά άλλα χαρακτηριστικά που μπορείτε να χρησιμοποιήσετε για να βελτιώσετε τη σχεδίαση της διάταξής σας. Ένα τέτοιο χαρακτηριστικό είναι το ου: στυλ χαρακτηριστικό, το οποίο μπορείτε να χρησιμοποιήσετε για να προσθέσετε εικόνες στη διάταξή σας.

<divid="showcase"th: style="'background: url(/images/background.jpg) no-repeat center center fixed;'">

Η παραπάνω σήμανση χρησιμοποιεί το ου: στυλ χαρακτηριστικό για να προσθέσετε μια εικόνα φόντου σε μια συγκεκριμένη ενότητα της διάταξής σας. Το Thymeleaf έχει πάνω από εκατό διαφορετικά χαρακτηριστικά που μπορείτε να χρησιμοποιήσετε για να προσθέσετε στυλ και λειτουργικότητα στις διατάξεις σας.

Η μεταβλητή έκφραση

Οι μεταβλητές εκφράσεις είναι οι πιο δημοφιλείς και αναμφισβήτητα οι πιο σύνθετες εκφράσεις που χρησιμοποιεί το Thymeleaf. Οι εκφράσεις μεταβλητής Thymeleaf σάς επιτρέπουν να συλλέγετε δεδομένα είτε από το περιβάλλον εφαρμογής είτε από ένα αντικείμενο στην εφαρμογή και να εισάγετε αυτά τα δεδομένα στο πρότυπο. Ανάλογα με την πηγή των δεδομένων που θέλετε να αποδώσετε στην προβολή σας, υπάρχουν δύο τύποι παραστάσεων μεταβλητών που μπορείτε να χρησιμοποιήσετε.

Η έκφραση της κύριας μεταβλητής χρησιμοποιεί το σύμβολο του δολαρίου και σας επιτρέπει να συλλέγετε δεδομένα από το περιβάλλον εφαρμογής (το οποίο είναι δεδομένα που σχετίζονται με τις διαφορετικές εργασίες που εκτελούνται στο εφαρμογή). Για παράδειγμα, εάν θέλετε να συλλάβετε τα δεδομένα ενός χρήστη από ένα modal, τότε η έκφραση μεταβλητής σύμβολο του δολαρίου είναι η πιο πρακτική επιλογή. Εάν εκτελέσετε το δείγμα έργου και μεταβείτε σε http://localhost: 8080/ στο πρόγραμμα περιήγησής σας, θα δείτε το ακόλουθο modal:

Αφού κλείσετε το modal ή υποβάλετε ένα όνομα, η εφαρμογή θα μεταβεί στην αρχική σελίδα. Στην αρχική σελίδα, θα δείτε έναν γενικό ιστότοπο που εμφανίζει τη λέξη "Welcome", ακολουθούμενη από τη συμβολοσειρά που μόλις υποβάλατε στο modal.

Το δείγμα εφαρμογής χρησιμοποιεί την έκφραση μεταβλητής για να ολοκληρώσει αυτήν τη διαδικασία. Η απλή μορφή στο modal.html το αρχείο έχει την ακόλουθη σήμανση:

<formid="form"th: action="@{/home}"method="post">
<inputtype="text"name="userName"class="form-control"placeholder="Your Name" />


<buttontype="submit"class="btn">Submitbutton>


form>

Όταν ένας χρήστης υποβάλλει τη φόρμα, ενεργοποιεί το ου: δράση χαρακτηριστικό που έχει την αξία μιας διεύθυνσης URL ανάρτησης, την οποία μπορείτε να βρείτε στο WebController τάξη.

@PostMapping("/home")
public String processName(String userName, Model model){


 model.addAttribute("userName", userName);


return"home";
 }

ο processName() Η μέθοδος αποδέχεται τη συμβολοσειρά που παρέχει ο χρήστης στο modal και στη συνέχεια εκχωρεί αυτή τη συμβολοσειρά σε μια μεταβλητή που ονομάζεται όνομα χρήστη. Χρησιμοποιώντας την έκφραση μεταβλητής, ο ελεγκτής εισάγει στη συνέχεια τη μεταβλητή ονόματος χρήστη στη διάταξη.

<h1>Welcome <spanth: text="${userName}">span>!h1>

Η έκφραση της μεταβλητής επιλογής χρησιμοποιεί έναν αστερίσκο και είναι πιο χρήσιμος όταν έχετε να κάνετε με πιο σύνθετες εφαρμογές. Για παράδειγμα, μια εφαρμογή που απαιτεί από τους χρήστες να συνδεθούν μπορεί να χρησιμοποιήσει την έκφραση της μεταβλητής επιλογής. Μπορείτε να συλλέξετε το όνομα χρήστη από το αντικείμενο χρήστη και να το εισαγάγετε στη διάταξη.

Εναλλακτικές επιλογές προτύπου και στυλ

Αν και το Thymeleaf είναι η πιο δημοφιλής επιλογή προτύπου για εφαρμογές Spring Boot, υπάρχουν πολλές άλλες εξίσου βιώσιμες επιλογές. Αυτά περιλαμβάνουν Σελίδες JavaServer (JSP), πρότυπα που βασίζονται σε Groovy, πρότυπα FreeMarker και πρότυπα Mustache. Εκτός από τη δημιουργία προσαρμοσμένου στυλ CSS, μπορείτε επίσης να επιλέξετε να χρησιμοποιήσετε ένα πλαίσιο CSS για το στυλ της διάταξής σας.