streamalism.org

1. הקדמה

במדריך מהיר זה, נלמד כיצד להשתמש ב- CSS וב- JavaScript בתבניות Thymeleaf שלנו.

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

נתחיל בהוספת סטיילינג CSS לדף שלנו ונמשיך להוסיף פונקציונליות של JavaScript.

2. התקנה

כדי להשתמש ב- Thymeleaf ביישום שלנו, בואו נוסיף את Starter Spring Boot עבור Thymeleaf לתצורת Maven שלנו:

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

3. דוגמה בסיסית

3.1. מבנה מדריך

כעת, כזכור, Thymeleaf היא ספריית תבניות הניתנת לשילוב בקלות ביישומי Spring Boot. כברירת מחדל, Thymeleaf מצפה מאיתנו למקם תבניות אלה ב- src / main / resources / templates תיקיה. אנו יכולים ליצור תיקיות משנה, לכן נשתמש בתיקיית משנה בשם cssandjs לדוגמא זו.

עבור קבצי CSS ו- JavaScript, ספריית ברירת המחדל היא src / main / resources / static. בואו ניצור סטטי / סגנונות / cssandjs ו סטטי / js / cssandjs תיקיות עבור קבצי CSS ו- JS שלנו, בהתאמה.

3.2. הוספת CSS

בואו ניצור קובץ CSS פשוט בשם main.css בשלנו סטטי / סגנונות / cssandjs תיקיה והגדר כמה סטיילינג בסיסי:

h2 {font-family: sans-serif; גודל גופן: 1.5em; שינוי טקסט: אותיות רישיות; } חזק {משקל פונט: 700; צבע רקע: צהוב; } p {font-family: sans-serif; }

לאחר מכן, בואו ניצור תבנית Thymeleaf בשם styledPage.html בשלנו תבניות / cssandjs תיקייה לשימוש בסגנונות אלה:

    הוסף CSS ו- JS ל- Thymeleaf 
כותרת מעוצבת בקפידה
 זהו טקסט שעליו אנו רוצים להחיל מאוד מיוחד סִגנוּן. 

אנו טוענים את גיליון הסגנונות באמצעות תג הקישור עם המיוחד של Thymeleaf th: href תְכוּנָה. אם השתמשנו במבנה הספריה הצפוי, עלינו רק לציין את הנתיב למטה src / main / resources / static. במקרה זה, זהו /style/cssandjs/main.css. ה @ {/ styles / cssandjs / main.css} תחביר הוא הדרך של Thymeleaf לבצע קישור בין כתובות אתרים.

אם נפעיל את היישום שלנו, נראה שהסגנונות שלנו יושמו:

3.3. שימוש ב- JavaScript

בשלב הבא נלמד כיצד להוסיף קובץ JavaScript לדף Thymeleaf שלנו.

נתחיל בהוספת קצת JavaScript לקובץ ב- src / main / resources / static / js / cssandjs / actions.js:

function showAlert () {alert ("לחצו על הכפתור!"); }

ואז אנו קופצים חזרה לתבנית Thymeleaf שלנו ומוסיפים א תג שמצביע על קובץ ה- JavaScript שלנו:

כעת אנו קוראים לשיטה שלנו מהתבנית שלנו:

הצג התראה

כאשר אנו מריצים את היישום שלנו ולוחצים על הצג התראה כפתור, נראה את חלון ההתראה.

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

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

@GetMapping ("/ page-page") מחרוזת ציבורית getStyledPage (Model model) {model.addAttribute ("name", "Reader Baeldung"); להחזיר "cssandjs / styledPage"; }

לאחר מכן, בואו נוסיף פונקציה לפונקציה שלנו actions.js קובץ כדי להשתמש בשם זה בהתראה:

function showName (name) {alert ("הנה השם:" + name); }

לבסוף, על מנת להתקשר לפונקציה שלנו עם הנתונים מהבקר שלנו, עלינו להשתמש בהטמעת סקריפט. אז בואו למקם את שֵׁם ערך במשתנה JavaScript מקומי:

 var nameJs = / * [[$ {name}]] * /; 

על ידי כך יצרנו משתנה JavaScript מקומי המכיל את ה- שֵׁם ערך מודל משליטתנו שאנו נוכל להשתמש בו ב- JavaScript בשאר הדף.

כעת לאחר שעשינו זאת, אנו יכולים להתקשר לפונקציית JavaScript באמצעות ה- שם ג'יי מִשְׁתַנֶה:

הצג שם

4. מסקנה

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

כמו תמיד, הקוד זמין ב- GitHub.