streamalism.org

1. הקדמה

Thymeleaf הוא מנוע תבנית Java לעיבוד וליצירת HTML, XML, JavaScript, CSS וטקסט.

במאמר זה נדון כיצד להשתמש ב- Thymeleaf עם Spring יחד עם כמה מקרי שימוש בסיסיים בשכבת התצוגה של יישום MVC של Spring.

הספרייה ניתנת להרחבה ויכולת התבנית הטבעית שלה מבטיחה שניתן יהיה ליצור אב טיפוס לתבניות ללא אחורי - מה שהופך את הפיתוח למהיר מאוד בהשוואה למנועי תבניות פופולריים אחרים כמו JSP.

2. שילוב Thymeleaf עם Spring

ראשית הבה נראה את התצורות הנדרשות לשילוב עם אביב. ה קפיץ עליון נדרשת ספרייה לצורך השילוב.

הוסף את התלות הבאות לקובץ Maven POM שלך:

 org.thymeleaf thymeleaf 3.0.11. RELEASE org.thymeleaf thymeleaf-spring5 3.0.11. RELEASE 

שים לב שעבור פרויקט אביב 4, קפיץ עליון 4 יש להשתמש בספריה במקום 5. אביב קפיץ.

ה SpringTemplateEngine class מבצע את כל שלבי התצורה. באפשרותך להגדיר מחלקה זו כשעועית בקובץ התצורה של Java:

@Bean @Description ("Resolver Template Leaf") ציבור ServletContextTemplateResolver תבנית Resolver () {ServletContextTemplateResolver templateResolver = חדש ServletContextTemplateResolver (); templateResolver.setPrefix ("/ WEB-INF / views /"); templateResolver.setSuffix (". html"); templateResolver.setTemplateMode ("HTML5"); תבנית החזרה Resolver; } @Bean @Description ("מנוע תבנית Thymeleaf") ציבורי SpringTemplateEngine templateEngine () {SpringTemplateEngine templateEngine = חדש SpringTemplateEngine (); templateEngine.setTemplateResolver (templateResolver ()); templateEngine.setTemplateEngineMessageSource (messageSource ()); תבנית החזרה מנוע; }

ה templateResolver נכסי שעועית קידומת ו סִיוֹמֶת ציין את המיקום של דפי התצוגה בתוך webapp ספריה ותוסף שם הקובץ שלהם, בהתאמה.

ה ViewResolver ממשק ב- Spring MVC ממפה את שמות התצוגה שהוחזר על ידי בקר לאובייקטים של תצוגה בפועל. ThymeleafViewResolver מיישם את ViewResolver ממשק ומשמש לקביעת אילו תצוגות של Thymeleaf להציג, בהתחשב בשם תצוגה.

השלב האחרון בשילוב הוא להוסיף את ה- ThymeleafViewResolver כשעועית:

@Bean @Description ("רזולוציה של Thymeleaf View") ציבורי ThymeleafViewResolver viewResolver () {ThymeleafViewResolver viewResolver = חדש ThymeleafViewResolver (); viewResolver.setTemplateEngine (templateEngine ()); viewResolver.setOrder (1); view viewResolver; }

3. טימילף באביב המגף

מגף אביב מספק תצורה אוטומטית עבור טימילף על ידי הוספת ה- אביב-אתחול-התחלה-טימילית תלות:

 org.springframework.boot spring-boot-starter-thymeleaf 2.3.3.RELEASE 

אין צורך בתצורה מפורשת. כברירת מחדל, יש למקם קבצי HTML ב משאבים / תבניות מקום.

4. הצגת ערכים ממקור ההודעה (קבצי נכסים)

ה th: text = ”# {key}” ניתן להשתמש בתכונה תג להצגת ערכים מקבצי נכסים. כדי שזה יעבוד יש להגדיר את קובץ המאפיין כ- messageSource אפונה:

@Bean @Description ("Resolver Message Message") ציבורי ResourceBundleMessageSource messageSource () {ResourceBundleMessageSource messageSource = חדש ResourceBundleMessageSource (); messageSource.setBasename ("הודעות"); return messageSource; }

הנה קוד ה- HTML של Thymeleaf להצגת הערך המשויך למפתח ברוך הבא. הודעה:

5. הצגת תכונות מודל

5.1. תכונות פשוטות

ה th: text = ”$ {attributename}” ניתן להשתמש במאפיין תג להצגת הערך של מאפייני המודל. בואו נוסיף תכונת מודל עם השם זמן שרת בכיתת הבקר:

model.addAttribute ("serverTime", dateFormat.format (תאריך חדש ()));

קוד ה- HTML להצגת הערך של זמן שרת תְכוּנָה:

השעה הנוכחית היא 

5.2. מאפייני אוסף

אם תכונת המודל היא אוסף של אובייקטים, ה- ה: כל אחד ניתן להשתמש במאפיין תג כדי לחזור עליו. בואו נגדיר א סטוּדֶנט כיתת מודל עם שני שדות, תְעוּדַת זֶהוּת, ו שֵׁם:

מחלקה ציבורית מיישמת סטודנטים ניתן להתאמה אישית {מזהה שלם פרטי; שם מחרוזת פרטי; // סטרים וקובעים סטנדרטיים}

כעת נוסיף רשימת תלמידים כתכונת מודל בכיתת הבקר:

רשימת תלמידים = ArrayList חדש (); // לוגיקה לבניית מודל נתוני התלמידים.addAttribute ("סטודנטים", סטודנטים);

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

6. הערכה מותנית

6.1. אם ו אֶלָא אִם

ה th: if = ”$ {condition}” התכונה משמשת להצגת קטע מהתצוגה אם התנאי מתקיים. ה th: אלא אם כן = "$ {תנאי}" התכונה משמשת להצגת קטע מהתצוגה אם התנאי אינו מתקיים.

הוסף מִין שדה ל סטוּדֶנט דֶגֶם:

מחלקה ציבורית מיישמת סטודנטים באמצעות Serializable {private Integer id; שם מחרוזת פרטי; מין אופי פרטי; // סטרים וקובעים סטנדרטיים}

נניח שלשדה זה שני ערכים אפשריים (M או F) לציון מינו של התלמיד. אם ברצוננו להציג את המילים "זכר" או "נקבה" במקום התו היחיד, נוכל להשיג זאת באמצעות קוד Thymeleaf הבא:

6.2. החלף ו מקרה

ה th: מתג ו th: מקרה תכונות משמשות להצגת תוכן באופן מותנה באמצעות מבנה הצהרת המתג.

ניתן לשכתב את הקוד הקודם באמצעות th: מתג ו th: מקרה תכונות:

7. טיפול בקלט המשתמש

ניתן לטפל בקלט טופס באמצעות th: action = ”@ {url}” ו th: object = ”$ {object}” תכונות. ה th: פעולה משמש כדי לספק את כתובת האתר של פעולת הטופס ו- th: אובייקט משמש לציון אובייקט אליו נתחייב נתוני הטופס שהוגשו. שדות בודדים ממופים באמצעות th: field = ”* {name}” תכונה, שם שֵׁם הוא המאפיין התואם של האובייקט.

בשביל ה סטוּדֶנט בכיתה, אנו יכולים ליצור טופס קלט:

בקוד לעיל, / saveStudent הוא כתובת האתר של פעולת הטופס ו- סטוּדֶנט הוא האובייקט המחזיק בנתוני הטופס שהוגשו.

ה StudentController הכיתה מטפלת בהגשת הטופס:

מחלקה ציבורית @Controller StudentController {@RequestMapping (value = "/ saveStudent", method = RequestMethod.POST) ציבורי מחרוזת saveStudent (@ModelAttribute סטודנט סטודנט, שגיאות BindingResult, מודל מודל) {// לוגיקה לעיבוד נתוני קלט}}

בקוד לעיל, @ בקשת מיפוי ביאור ממפה את שיטת הבקר עם כתובת האתר המסופקת בטופס. השיטה המבוארת saveStudent () מבצע את העיבוד הנדרש עבור הטופס שהוגש. ה @ModelAttribute ביאור קושר את שדות הטופס ל- סטוּדֶנט לְהִתְנַגֵד.

8. הצגת שגיאות אימות

ה # fields.hasErrors () ניתן להשתמש בפונקציה כדי לבדוק אם בשדה יש ​​שגיאות אימות. ה # fields.errors () ניתן להשתמש בפונקציה להצגת שגיאות עבור שדה מסוים. שם השדה הוא פרמטר הקלט עבור שתי הפונקציות הללו.

קוד HTML כדי לאתר ולהציג את השגיאות עבור כל אחד מהשדות בצורה:

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

קוד ה- HTML הקודם נכתב מחדש באמצעות התו הכללי *:

או באמצעות הקבוע את כל:

באופן דומה, ניתן להציג שגיאות גלובליות באביב באמצעות גלוֹבָּלִי קָבוּעַ.

קוד ה- HTML להצגת שגיאות גלובליות:

ה th: שגיאות התכונה יכולה לשמש גם להצגת הודעות שגיאה. את הקוד הקודם להצגת שגיאות בטופס ניתן לכתוב מחדש באמצעות th: שגיאות תְכוּנָה:

9. שימוש בהמרות

התחביר בסוגריים הכפולים {{}} משמש לעיצוב נתונים לתצוגה. זה עושה שימוש ב- מעצבים מוגדר עבור סוג זה של שדה ב conversionService שעועית של קובץ ההקשר.

שדה השם ב סטוּדֶנט הכיתה מעוצבת:

הקוד לעיל משתמש ב- שם פורמט מחלקה, מוגדרת על ידי דריסת ה- addFormatters () שיטה מה- WebMvcConfigurer מִמְשָׁק. למטרה זו, שלנו @תְצוּרָה הכיתה עוקפת את WebMvcConfigurerAdapter מעמד:

@Configuration מחלקה ציבורית WebMVCConfig מרחיב את WebMvcConfigurerAdapter {// ... @Override @Description ("שירות המרות מותאם אישית") ריק ריק addFormatters (הרישום FormatterRegistry) {registry.addFormatter (NameFormatter חדש ()); }}

ה שם פורמט הכיתה מיישמת את האביב מעצב מִמְשָׁק.

ה # המרות כלי השירות יכול לשמש גם להמרת אובייקטים לתצוגה. התחביר עבור פונקציית השירות הוא # conversions.convert (אובייקט, מחלקה) איפה לְהִתְנַגֵד מומר ל מעמד סוּג.

להציג סטוּדֶנט לְהִתְנַגֵד אֲחוּזִים שדה עם החלק השבר הוסר:

10. מסקנה

במדריך זה ראינו כיצד לשלב ולהשתמש ב- Thymeleaf ביישום MVC של Spring.

ראינו גם דוגמאות כיצד להציג שדות, לקבל קלט, להציג שגיאות אימות ולהמיר נתונים לתצוגה. גרסת עבודה של הקוד המוצג במאמר זה זמינה במאגר GitHub.