streamalism.org

1. סקירה כללית

מסגרת האינטרנט של Spring בנויה סביב דפוס ה- MVC (Model-View-Controller), מה שמקל על הפרדת החששות ביישום. זה מאפשר את האפשרות להשתמש בטכנולוגיות תצוגה שונות, מטכנולוגיית JSP מבוססת ועד מגוון מנועי תבניות.

במאמר זה נבחן את מנועי התבניות העיקריים שניתן להשתמש בהם עם Spring, את תצורתם ודוגמאות השימוש.

2. Spring View Technologies

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

כדי לעבד כל סוג תצוגה, עלינו להגדיר a ViewResolver שעועית המתאימה לכל טכנולוגיה. המשמעות היא שאז נוכל להחזיר את שמות התצוגה מ @בקר שיטות מיפוי באותו האופן שבו אנו מחזירים בדרך כלל קבצי JSP.

בסעיפים הבאים נעבור על טכנולוגיות מסורתיות יותר כמו דפי שרת Javaוכן מנועי התבנית העיקריים בהם ניתן להשתמש עם אביב: טימילף, קִצבִּי, FreeMarker, ג'ייד.

עבור כל אחד מאלה נעבור על התצורה הדרושה הן ביישום Spring סטנדרטי והן ביישום שנבנה באמצעות מגף אביב.

3. דפי שרת Java

JSP היא אחת מטכנולוגיות התצוגה הפופולריות ביותר עבור יישומי Java, והיא נתמכת על ידי Spring out of the box. לעיבוד קבצי JSP, סוג נפוץ של ViewResolver שעועית היא InternalResourceViewResolver:

@EnableWebMvc @ מחלקה ציבורית תצורה ApplicationConfiguration מיישמת WebMvcConfigurer {@ שעועית ציבורית ViewResolver jspViewResolver () {שעועית InternalResourceViewResolver = חדש InternalResourceViewResolver (); bean.setPrefix ("/ WEB-INF / views /"); bean.setSuffix (". jsp"); שעועית להחזיר; }}

בשלב הבא נוכל להתחיל ליצור קבצי JSP ב- / WEB-INF / תצוגות מקום:

    דוא"ל לרישום משתמשים: סיסמא: 

אם אנו מוסיפים את הקבצים ל- a מגף אביב יישום, ואז במקום ב- הגדרת יישום בכיתה, אנו יכולים להגדיר את המאפיינים הבאים ב- application.properties קוֹבֶץ:

spring.mvc.view.prefix: / WEB-INF / views / spring.mvc.view.suffix: .jsp

בהתבסס על מאפיינים אלה, מגף אביב יגדיר אוטומטית את הצורך ViewResolver.

4. טימילף

טימילף הוא מנוע תבנית Java שיכול לעבד קבצי HTML, XML, טקסט, JavaScript או CSS. שלא כמו מנועי תבנית אחרים, טימילף מאפשר שימוש בתבניות כאבות טיפוס, כלומר ניתן לראות אותם כקבצים סטטיים.

4.1. תלות Maven

להשתלב טימילף עם אביב, עלינו להוסיף את טימילף ו קפיץ עליון 4 תלות:

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

אם יש לנו פרויקט אביב 4, אז אנחנו צריכים להוסיף קפיץ עליון 4.

4.2. תצורת האביב

לאחר מכן, עלינו להוסיף את התצורה הדורשת a SpringTemplateEngine שעועית, כמו גם א TemplateResolver שעועית המציינת את המיקום וסוג קבצי התצוגה.

ה SpringResourceTemplateResolver משולב במנגנון פתרון המשאבים של ספרינג:

@Configuration @EnableWebMvc מחלקה ציבורית ThymeleafConfiguration {@Bean הציבור SpringTemplateEngine templateEngine () {SpringTemplateEngine templateEngine = new SpringTemplateEngine (); templateEngine.setTemplateResolver (thymeleafTemplateResolver ()); תבנית החזרה מנוע; } @Bean ציבורי SpringResourceTemplateResolver thymeleafTemplateResolver () {SpringResourceTemplateResolver templateResolver = חדש SpringResourceTemplateResolver (); templateResolver.setPrefix ("/ WEB-INF / views /"); templateResolver.setSuffix (". html"); templateResolver.setTemplateMode ("HTML5"); תבנית החזרה Resolver; }}

כמו כן, אנו זקוקים ל ViewResolver שעועית מהסוג ThymeleafViewResolver:

@Bean ציבורי ThymeleafViewResolver thymeleafViewResolver () {ThymeleafViewResolver viewResolver = חדש ThymeleafViewResolver (); viewResolver.setTemplateEngine (templateEngine ()); view viewResolver; }

4.3. טימילף תבניות

כעת אנו יכולים להוסיף קובץ HTML ב- WEB-INF / תצוגות מקום:

   דוא"ל לרישום משתמשים: סיסמא: 

טימילף תבניות דומות מאוד בתחביר לתבניות HTML.

חלק מהתכונות הזמינות בשימוש טימילף ביישום אביב הם:

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

אתה יכול לקרוא עוד על השימוש טימילף תבניות במאמר שלנו Thymeleaf באביב MVC.

4.4. טימילף ב מגף אביב

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

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

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

5. FreeMarker

FreeMarker הוא מנוע תבניות מבוסס Java שנבנה על ידי קרן תוכנת אפאצ'י. בעזרתו ניתן ליצור דפי אינטרנט, אך גם קוד מקור, קבצי XML, קבצי תצורה, מיילים ופורמטים אחרים מבוססי טקסט.

הדור נעשה על בסיס קבצי תבניות שנכתבו באמצעות שפת תבנית FreeMarker.

5.1. תלות Maven

כדי להתחיל להשתמש בתבניות בפרויקט שלנו, אנו זקוקים ל סמן חופשי תלות:

 org.freemarker freemarker 2.3.23 

לצורך שילוב האביב, אנו זקוקים גם ל אביב-תמיכה בהקשר תלות:

 org.springframework spring-context-support 5.2.8.RELEASE 

5.2. תצורת האביב

שילוב FreeMarker עם אביב MVC דורש הגדרה א FreeemarkerConfigurer שעועית המציינת את מיקום קבצי התבנית:

@Configuration @EnableWebMvc מחלקה ציבורית FreemarkerConfiguration {@Bean Public FreeMarkerConfigurer freemarkerConfig () {FreeMarkerConfigurer freeMarkerConfigurer = FreeMarkerConfigurer חדש (); freeMarkerConfigurer.setTemplateLoaderPath ("/ WEB-INF / views /"); החזר freeMarkerConfigurer; }}

בשלב הבא עלינו להגדיר מתאים ViewResolver שעועית מהסוג FreeMarkerViewResolver:

@Bean ציבורי FreeMarkerViewResolver freemarkerViewResolver () {FreeMarkerViewResolver resolver = new FreeMarkerViewResolver (); resolver.setCache (נכון); resolver.setPrefix (""); resolver.setSuffix (". ftl"); פותר להחזיר; }

5.3. FreeMarker תבניות

אנו יכולים ליצור תבנית HTML באמצעות FreeMarker בתוך ה WEB-INF / תצוגות מקום:

    דוא"ל לרישום משתמשים: סיסמא: 

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

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

5.4. FreeMarker ב מגף אביב

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

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

המתנע הזה מוסיף את התצורה האוטומטית הדרושה. כל שעלינו לעשות הוא להתחיל למקם את קבצי התבניות שלנו ב- משאבים / תבניות תיקיה.

6. קִצבִּי

ניתן ליצור תצוגות MVC באביב גם באמצעות מנוע התבנית Groovy Markup Template. מנוע זה מבוסס על תחביר בונה וניתן להשתמש בו ליצירת כל פורמט טקסט.

6.1. תלות Maven

ה תבניות גרוביות צריך להוסיף תלות שלנו pom.xml:

 org.codehaus.groovy גרוב-תבניות 2.4.12 

6.2. תצורת האביב

האינטגרציה של מנוע תבנית סימון עם אביב MVC דורש הגדרה א GroovyMarkupConfigurer שעועית ו ViewResolver מהסוג GroovyMarkupViewResolver:

@Configuration @EnableWebMvc מחלקה ציבורית GroovyConfiguration {@Bean הציבור GroovyMarkupConfigurer groovyMarkupConfigurer () {GroovyMarkupConfigurer תצורה = GroovyMarkupConfigurer חדש (); configurer.setResourceLoaderPath ("/ WEB-INF / תצוגות /"); מגדיר חזרה; } @Bean הציבור GroovyMarkupViewResolver thymeleafViewResolver () {GroovyMarkupViewResolver viewResolver = חדש GroovyMarkupViewResolver (); viewResolver.setSuffix (". tpl"); view viewResolver; }}

6.3. סימון גרובי תבניות

תבניות כתובות בשפה הגרובית ויש להן כמה מאפיינים:

• • הם נאספו לקוד byte
  • הם מכילים תמיכה לשברים ולפריסות
  • הם מספקים תמיכה בינלאומית
  • העיבוד מהיר

בואו ניצור תבנית גרובי לטופס "רישום משתמשים", הכולל כריכות נתונים:

yieldUnscaped '' html (lang: 'en') {head {meta ('http-equiv': '"Type Content"' + 'content = "text / html; charset = utf-8"') title ('User רישום ')} body {form (id:' userForm ', action:' register ', method:' post ') {label (for:' email ',' Email ') input (name:' email ', type:' טקסט ', ערך: user.email ?:' ') תווית (עבור:' סיסמה ',' סיסמה ') קלט (שם:' סיסמה ', סוג:' סיסמה ', ערך: משתמש. סיסמה ?:' ') div (class: 'form-actions') {input (type: 'submit', value: 'Submit')}}}

6.4. מנוע תבנית גרובי ב מגף אביב

מגף אביב מכיל תצורה אוטומטית עבור ה- מנוע תבנית גרובי, שנוסף על ידי הכללת ה- האביב-אתחול-המתנע-גרוב-תבניות תלות:

 org.springframework.boot spring-boot-starter-groovy-templates 2.3.3.RELEASE 

מיקום ברירת המחדל של התבניות הוא / משאבים / תבניות.

7. Jade4j

Jade4j הוא יישום Java של סוֹלֵד מנוע תבנית (המכונה במקור יַרקָן) עבור Javascript. Jade4j ניתן להשתמש בתבניות ליצירת קבצי HTML.

7.1. תלות Maven

לצורך שילוב האביב, אנו זקוקים לתלות האביב-jade4j:

 de.neuland-bfi spring-jade4j 1.2.5 

7.2. תצורת האביב

להשתמש Jade4j עם אביב, עלינו להגדיר א SpringTemplateLoader שעועית המגדירה את מיקום התבניות, וכן א JadeConfiguration אפונה:

@Configuration @EnableWebMvc מחלקה ציבורית JadeTemplateConfiguration {@Bean הציבור SpringTemplateLoader templateLoader () {SpringTemplateLoader templateLoader = חדש SpringTemplateLoader (); templateLoader.setBasePath ("/ WEB-INF / תצוגות /"); templateLoader.setSuffix (". ירקן"); templateLoader להחזיר; } @Bean ציבורי JadeConfiguration jadeConfiguration () {JadeConfiguration תצורה = חדש JadeConfiguration (); configuration.setCaching (false); configuration.setTemplateLoader (templateLoader ()); תצורת החזרה; }}

לאחר מכן, אנו זקוקים למקובל ViewResolver שעועית, במקרה זה של סוג JadeViewResolver:

@Bean צפה ב- ViewResolver הציבורResolver () {JadeViewResolver viewResolver = חדש JadeViewResolver (); viewResolver.setConfiguration (jadeConfiguration ()); view viewResolver; }

7.3. Jade4j תבניות

Jade4j תבניות מאופיינות בתחביר קל לרגיש למרחב לבן:

doctype html html head title טופס גוף רישום משתמש (action = "register" method = "post") תווית (עבור = "email") דוא"ל: קלט (type = "text" name = "email") תווית (עבור = "סיסמה ") סיסמה: קלט (סוג =" סיסמה "שם =" סיסמה ") קלט (סוג =" שלח "ערך =" שלח ")

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

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

8. מנועי תבנית אחרים

מלבד מנועי התבניות שתוארו עד כה, ישנם לא מעט זמינים נוספים בהם ניתן להשתמש.

בואו נסקור כמה מהם בקצרה.

מְהִירוּת הוא מנוע תבניות ישן יותר, שהוא מורכב מאוד אך יש לו את החיסרון שקפיץ ביטל את השימוש בו מאז גרסה 4.3 והוסר לחלוטין באביב 5.0.1.

JMustache הוא מנוע תבנית שניתן לשלב בקלות ביישום Spring Boot באמצעות ה- אביב-אתחול-התחלה-שפם תלות.

צַדֶפֶת מכיל תמיכה באביב ו מגף אביב בספריות שלה.

ספריות תבניות אחרות כגון כידון אוֹ לְהָגִיב, רץ על גבי א JSR-223 מנוע סקריפטים כגון נאשורן, יכול לשמש גם.

9. מסקנה

במאמר זה עברנו על כמה ממנועי התבניות הפופולאריים ביותר ליישומי רשת אביב.

וכמו תמיד, ניתן למצוא את קוד המקור המלא של הדוגמאות ב- GitHub.