למד כיצד לשלב מנוע תבנית זה ביישומי האביב שלך.

Thymeleaf הוא מנוע תבנית Java. הוא מפתח תבניות הן עבור אינטרנט והן עבור יישומים עצמאיים. מנוע תבניות זה משתמש במושג Natural Templates כדי להחדיר היגיון לפריסה שלך, מבלי להתפשר על העיצוב שלך. עם Thymeleaf, תהיה לך שליטה על האופן שבו יישום יעבד את התבניות שאתה יוצר.

אתה יכול להשתמש ב-Thymeleaf כדי לעבד שישה סוגים של תבניות: HTML, XML, טקסט, JavaScript, CSS ו-RAW. Thymeleaf מתייחס לכל אחת מהתבניות כמצב תבנית, כאשר HTML היא התבנית הפופולרית ביותר שנוצרה במנוע זה.

אתחול Thymeleaf באפליקציה שלך

ישנן שתי דרכים להוסיף את Thymeleaf ליישום Spring Boot שלך. אתה יכול לבחור Thymeleaf כתלות בעת יצירת ה-boilerplate שלך ​​עם הכלי initializr של Spring. יש לך גם אפשרות להוסיף אותו מאוחר יותר לקובץ מפרט ה-build שלך בקטע התלות.

אם בחרת באחת מאפשרויות פרויקט Gradle, הקובץ המכיל את התלות הוא ה- build.gradle קוֹבֶץ. עם זאת, אם בחרת ב-Maven, אז הקובץ הזה הוא pom.xml.

שֶׁלְךָ pom.xml הקובץ צריך להכיל את קטע התלות הבא:

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


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

בזמן שלך build.gradle הקובץ צריך להכיל את קטע התלות הבא:

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

היישום לדוגמה המשמש במאמר זמין כאן מאגר GitHub והוא בחינם עבורך לשימוש תחת רישיון MIT.

על ידי הוספת Thymeleaf לאפליקציית Spring שלך תקבל גישה לספריית הליבה שלו, המאפשרת לך להשתמש בניב ה-Spring Standard של Thymeleaf. הדיאלקט הסטנדרטי של האביב מכיל תכונות ותחביר ייחודיים שבהם אתה יכול להשתמש כדי להוסיף תכונות שונות לפריסות שלך.

שימוש ב-Tymeleaf במגף אביב

בעת שימוש ב-Thymeleaf ביישום האביב שלך, הצעד הראשון הוא ליצור את מסמך התבנית שלך. עבור יישום לדוגמה זה, מסמך התבנית הוא 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 מכנה ערכי ביטוי של fragment. ביטויי קטעים מאפשרים לך למקם שברי סימון בכל מיקום בפריסה שלך.

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

הכנסת הסימון למעלה בחלק העליון של ה- home.html תג יכניס את סימון הכותרת בראש דף הבית שלך. לביטוי קטע יש כמה רכיבים, שניים הם אופציונליים ושניים נדרשים:

  • טילדה (~), שהיא אופציונלית.
  • זוג פלטה מתולתלת ({}), שהוא אופציונלי.
  • שם התבנית המכילה את הסימון שברצונך להוסיף (header.html).
  • בורר ה-CSS של הסימון שברצונך להוסיף (#nav).

אז, הסימון הבא מייצר את אותה תוצאה כמו זו שלמעלה.

"header:: #nav">

אכלוס גוף התבנית שלך

Thymeleaf מאפשר לך להשתמש בחמישה סוגי ביטויים בתבניות שלך:

  • ביטוי קטע (~{…})
  • ביטוי הודעה (#{…})
  • ביטוי כתובת אתר קישור (@{...})
  • ביטוי משתנה (${…})
  • בחירה ביטוי משתנה (*{…})

ביטוי הודעה מאפשר לך להוסיף קטעי טקסט חיצוניים לפריסה שלך. עם ביטויי הודעה, אתה יכול בקלות להחליף או לעשות שימוש חוזר בטקסט בפריסה שלך. בעת שימוש בביטוי הודעה, עליך תמיד למקם את קטעי הטקסט החיצוניים ב-a .נכסים קובץ תחת ה אֶמְצָעִי תיקייה.

עבור יישום לדוגמה זה, הקובץ הוא messages.properties, המכיל את קטע הטקסט הבא:

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

כדאי לשים לב שלקטע הטקסט (או ההודעה) למעלה יש מפתח ייחודי (מציין מיקום.טקסט). הסיבה לכך היא שכל קובץ הודעה יכול להכיל אוסף של הודעות שונות. אז תצטרך מפתח כדי להכניס הודעה ספציפית לפריסה שלך.

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

הוספת הסימון למעלה לגוף קובץ ה-HTML שלך תציג למעשה את טקסט מציין המיקום כפסקה בתצוגה שלך. בניגוד לביטוי הפרגמנט, כל היבט של ביטוי המסר הוא חובה. ביטוי הודעה דורש:

  • סימן מספר (#).
  • זוג פלטה מתולתלת ({}).
  • המפתח שמכיל את ההודעה שברצונך להוסיף (מציין מיקום.טקסט).

עיצוב התבנית שלך

קובץ חשוב נוסף ב- אֶמְצָעִי התיקיה היא הקובץ הסטטי. קובץ זה מאחסן את קובצי ה-CSS שלך ואת כל התמונות שאתה מתכנן להשתמש באפליקציה שלך. כדי לקשר את קובץ ה-CSS החיצוני שלך לתבנית HTML של Thymeleaf, תצטרך להשתמש בביטוי כתובת האתר של הקישור. תהליכי הביטוי של כתובת האתר של הקישור גם כתובות URL יחסיות וגם מוחלטות.

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

הכנסת הסימון למעלה לתוך של קובץ ה-HTML שלך יאפשר לך לסגנן את התבנית שלך באמצעות a style.css קוֹבֶץ. קובץ זה זמין ב-a css תיקייה מתחת ל- סטָטִי סעיף של אֶמְצָעִי קובץ הבקשה לדוגמה. עליך תמיד להקצות את ביטוי כתובת האתר של הקישור ל- ה': href תְכוּנָה.

Thymeleaf מספק מספר תכונות אחרות שבהן אתה יכול להשתמש כדי לשפר את העיצוב של הפריסה שלך. תכונה אחת כזו היא ה ה: סגנון תכונה, שבה תוכל להשתמש כדי להוסיף תמונות לפריסה שלך.

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

הסימון למעלה משתמש ב- ה: סגנון תכונה כדי להוסיף תמונת רקע לקטע מסוים בפריסה שלך. ל-Tymeleaf יש יותר ממאה תכונות שונות שבהן אתה יכול להשתמש כדי להוסיף סגנון ופונקציונליות לפריסות שלך.

הביטוי המשתנה

הביטויים המשתנים הם הביטויים הפופולריים ביותר וללא ספק המורכבים ביותר שבהם משתמשת Thymeleaf. ביטויי משתנים Thymeleaf מאפשרים לך לאסוף נתונים מהקשר היישום או מאובייקט ביישום ולהחדיר נתונים אלה לתבנית. בהתאם למקור הנתונים שברצונך להציג לתצוגה שלך, ישנם שני סוגים של ביטויים משתנים שבהם תוכל להשתמש.

הביטוי המשתנה הראשי משתמש בסימן הדולר ומאפשר לך לאסוף נתונים מה- הקשר יישום (שהוא נתונים המשויכים למשימות השונות הפועלות ב- יישום). לדוגמה, אם רצית ללכוד נתונים של משתמש ממודאל, אז הביטוי של משתנה סימן דולר הוא הבחירה המעשית יותר. אם תבצע את הפרויקט לדוגמה ונווט אל http://localhost: 8080/ בדפדפן שלך, תראה את המודל הבא:

לאחר שתסגור את המודאל או תשלח שם, האפליקציה תנווט לדף הבית. בדף הבית, תראה אתר גנרי המציג את המילה "ברוך הבא", ואחריו המחרוזת ששלחת זה עתה במודאל.

היישום לדוגמה משתמש בביטוי המשתנה כדי להשלים תהליך זה. הצורה הפשוטה ב 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";
 }

ה שם התהליך() השיטה מקבלת את המחרוזת שהמשתמש מספק למודאל, ואז מקצה את המחרוזת הזו למשתנה שנקרא שם משתמש. באמצעות ביטוי המשתנה, הבקר מזריק את משתנה שם המשתמש לפריסה.

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

ביטוי משתנה הבחירה משתמש בכוכבית, והוא שימושי ביותר כאשר אתה מתמודד עם יישומים מורכבים יותר. לדוגמה, יישום שדורש ממשתמשים להיכנס יכול להשתמש בביטוי משתנה הבחירה. אתה יכול לאסוף את שם המשתמש מאובייקט המשתמש ולהכניס אותו לפריסה.

אפשרויות חלופיות של תבנית וסטיילינג

למרות ש-Thymeleaf היא אפשרות התבנית הפופולרית יותר עבור יישומי Spring Boot, ישנן מספר אפשרויות אחרות ברות קיימא באותה מידה. אלה כוללים דפי JavaServer (JSP), תבניות מבוססות Groovy, תבניות FreeMarker ותבניות שפם. בנוסף ליצירת סגנון CSS מותאם אישית, אתה יכול גם לבחור להשתמש במסגרת CSS לסגנון הפריסה שלך.