עבודה עם שברים בטימילף
1. סקירה כללית
במדריך זה נראה כיצד השתמש בשברים של Thymeleaf כדי לעשות שימוש חוזר בחלקים הנפוצים באתר. לאחר הקמת פרויקט MVC אביב פשוט מאוד, נתמקד בתצוגות.
אם אתה חדש ב- Thymeleaf, אתה יכול לבדוק מאמרים אחרים באתר זה כמו מבוא זה, כמו גם את זה בנושא גרסת 3.0 של המנוע.
2. תלות Maven
נצטרך כמה תלות כדי לאפשר את Thymeleaf:
org.thymeleaf thymeleaf 3.0.11. RELEASE org.thymeleaf thymeleaf-spring5 3.0.11. RELEASE הגרסה האחרונה של thymeleaf ו- thymeleaf-spring5 נמצאת במייבן סנטרל.
3. פרויקט אביב
3.1. תצורת MVC באביב
כדי לאפשר את Thymeleaf ולהגדיר את סיומת התבנית, עלינו הגדר את תצורת MVC עם פותר תצוגה ומפתר תבניות.
נגדיר את הספרייה לכמה משאבים סטטיים:
@Bean Public ViewResolver htmlViewResolver () {ThymeleafViewResolver resolver = new ThymeleafViewResolver (); resolver.setTemplateEngine (templateEngine (htmlTemplateResolver ())); resolver.setContentType ("text / html"); resolver.setCharacterEncoding ("UTF-8"); resolver.setViewNames (ArrayUtil.array ("*. html")); פותר להחזיר; } פרטי ITemplateResolver htmlTemplateResolver () {SpringResourceTemplateResolver resolver = SpringResourceTemplateResolver חדש (); resolver.setApplicationContext (applicationContext); resolver.setPrefix ("/ WEB-INF / views /"); resolver.setCacheable (false); resolver.setTemplateMode (TemplateMode.HTML); פותר להחזיר; } @Override public void addResourceHandlers (ResourceHandlerRegistry registry) {registry.addResourceHandler ("/ resources / **", "/ css / **") .addResourceLocations ("/ WEB-INF / resources /", "/ WEB-INF / css / "); }שים לב שאם אנו משתמשים באביב אתחול, ייתכן שתצורה זו אינה נחוצה אלא אם כן נצטרך להחיל את ההתאמות האישיות שלנו.
3.2. הבקר
במקרה זה, הבקר הוא רק כלי רכב לתצוגות. כל תצוגה מציגה תרחיש אחר לשימוש בשברים.
האחרון טוען כמה נתונים שמועברים דרך המודל שיוצגו בתצוגה:
@Controller מחלקה ציבורית FragmentsController {@GetMapping ("/ fragments") ציבורי מחרוזת getHome () {return "fragments.html"; } @GetMapping ("/ markup") markupPage מחרוזת ציבורי () {return "markup.html"; } @ GetMapping ("/ params") ציבורי מחרוזת paramsPage () {להחזיר "params.html"; } @GetMapping ("/ other") ציבורי מחרוזת otherPage (מודל מודל) {model.addAttribute ("data", StudentUtils.buildStudents ()); להחזיר "other.html"; }}שים לב ששמות התצוגה חייבים להכיל את ".Html" סיומת בגלל האופן שבו הגדרנו את הרזולבר שלנו. נציין גם את הסיומת כאשר אנו מתייחסים לשמות קטעים.
4. הנופים
4.1. הכללת שבר פשוטה
ראשית, נשתמש בחלקים נפוצים חוזרים בדפים שלנו.
אנו יכולים להגדיר חלקים אלה כשברים, בקבצים מבודדים או בעמוד משותף. בפרויקט זה, חלקים לשימוש חוזר אלה מוגדרים בתיקיה בשם שברים.
ישנן שלוש דרכים בסיסיות לכלול תוכן מקטע:
- הכנס - מכניס תוכן בתוך התג
- החלף - מחליף את התג הנוכחי בתג המגדיר את השבר
- כולל - זה הוצא משימוש אך הוא עדיין עשוי להופיע בקוד מדור קודם
הדוגמה הבאה, fragments.html, מראה את השימוש בכל שלוש הדרכים. תבנית Thymeleaf זו מוסיפה שברים בראש ובגוף המסמך:
שברי תימול: בית עבור לדף הבא כדי לראות שברים בפעולה
עכשיו, בואו נסתכל על דף המכיל כמה שברים. זה נקרא כללי.html, וזה כמו עמוד שלם עם כמה חלקים המוגדרים כשברים מוכנים לשימוש:
עבור לדף הבא כדי לראות שברים בפעולה
זהו סרגל צד זה עוד מדד שברים בסרגל הצד | תוספת סימון | פרגמנטים של שברים | אַחֵר ה החלק מכיל רק גיליון סגנונות, אך אנו יכולים ליישם כלים אחרים כגון Bootstrap, jQuery או Foundation, ישירות או באמצעות Webjars.
שים לב שלכל התגים הרב פעמיים של תבנית זו יש את התכונה th: שבר, אך לאחר מכן נראה כיצד לכלול כל חלק אחר בדף.
לאחר העיבוד והכללת השברים, התוכן שהוחזר הוא:
שברי טימילף: בית עבור לדף הבא כדי לראות שברים בפעולה
מדד השברים | תוספת סימון | פרגמנטים של שברים | אַחֵר 4.2. בוחרי סימון לשברים
אחד הדברים הנהדרים בשברים של תימלף הוא זה אנו יכולים גם לתפוס כל חלק בתבנית רק באמצעות הסלקטורים הפשוטים, דרך שיעורים, מזהים, או פשוט על ידי תגים.
דף זה, למשל, כולל כמה רכיבים מ- כללי.html קובץ: an בַּצַד לחסום את div.another לַחסוֹם:
4.3. שברי פרמטרים
אנחנו יכולים להעביר פרמטרים ל- aשבר בכדי לשנות חלק מסוים ממנו. לשם כך, יש להגדיר את השבר כקריאת פונקציה, שם עלינו להכריז על רשימת פרמטרים.
בדוגמה זו אנו מגדירים שבר לשדה טופס כללי:
שדה והנה שימוש פשוט באותו קטע בו אנו מעבירים אליו פרמטרים:
וכך ייראה השדה המוחזר:
שֵׁם 4.4. ביטויי הכללת שבר
שברי Thymeleaf מציעים אפשרויות מעניינות אחרות כגון תמיכה ב ביטויים מותנים כדי לקבוע אם לכלול קטע.
משתמש ב אלביס עם כל אחד מהביטויים שמספקים Thymeleaf (אבטחה, מחרוזות ואוספים למשל), אנו מסוגלים לטעון שברים שונים.
לדוגמה, אנו יכולים להגדיר קטע זה עם תוכן כלשהו שנציג בהתאם לתנאי נתון. זה יכול להיות קובץ המכיל סוגים שונים של בלוקים:
נתונים שהתקבלו אין נתונים וכך יכולנו להעמיס עליהם ביטוי:
0}? ~ {פרגמנטים / תפריטים.html :: dataPresent}: ~ {פרגמנטים / תפריטים.html :: noData} ">למידע נוסף על ביטויים של Thymeleaf, עיין במאמר שלנו כאן.
4.5. פריסות גמישות
הדוגמה הבאה מציגה גם שני שימושים מעניינים אחרים של שברים ל- לעבד טבלה עם נתונים. זהו קטע הטבלה הרב פעמי, עם שני חלקים חשובים: כותרת טבלה הניתנת לשינוי, והגוף שבו נתונים ניתנים:
0 שֵׁם
כאשר אנו רוצים להשתמש בטבלה זו, נוכל להעביר את כותרת הטבלה שלנו באמצעות ה- שדות פוּנקצִיָה. הכותרת מופנית עם הכיתה myFields. גוף הטבלה נטען על ידי העברת נתונים כפרמטר ל- tableBody פוּנקצִיָה:
תְעוּדַת זֶהוּת שֵׁם
וכך ייראה העמוד האחרון:
המידע התקבל תְעוּדַת זֶהוּת שֵׁם 1001 ג'ון סמית 1002 ג'יין וויליאמס
מדד השברים | תוספת סימון | פרגמנטים של שברים | אַחֵר 5. מסקנה
במאמר זה הראינו כיצד ניתן לעשות שימוש חוזר ברכיבי תצוגה באמצעות פרגמנטים של Thymeleaf, כלי רב עוצמה שיכול להקל על ניהול התבניות.
הצגנו גם כמה תכונות מעניינות אחרות החורגות מהיסודות. עלינו לקחת אותם בחשבון כאשר אנו בוחרים ב- Thymeleaf כמנוע העיבוד שלנו.
אם אתה רוצה ללמוד על תכונות אחרות של Thymeleaf, אתה בהחלט צריך להסתכל במאמר שלנו על דיאלקטים של פריסה.
כמו תמיד, קוד היישום השלם של הדוגמה זמין ב- GitHub.
