streamalism.org

1. Bemutatkozás

Ebben a gyors bemutatóban megtanuljuk a CSS és a JavaScript használatát a Thymeleaf sablonjainkban.

Először áttekintjük a várt mappa struktúrát, hogy tudjuk, hova tegyük a fájljainkat. Ezután meglátjuk, mit kell tennünk ahhoz, hogy hozzáférjünk ezekhez a fájlokhoz egy Thymeleaf sablonból.

Kezdjük azzal, hogy CSS-stílust adunk az oldalunkra, majd továbblépünk néhány JavaScript funkció hozzáadására.

2. Beállítás

Annak érdekében, hogy alkalmazásunkban felhasználhassuk a Thymeleaf alkalmazást, adjuk hozzá a Thymeleaf tavaszi indító indítóját a Maven konfigurációnkhoz:

 org.springframework.boot spring-boot-starter-thymeleaf 2.2.6. KÖZLEMÉNY 

3. Alap példa

3.1. Könyvtár felépítése

Emlékeztetőül: a Thymeleaf egy sablonkönyvtár, amely könnyen integrálható a Spring Boot alkalmazásokba. Alapértelmezés szerint a Thymeleaf azt várja tőlünk, hogy ezeket a sablonokat a src / main / resources / templates mappába. Almappákat hozhatunk létre, ezért egy almappát fogunk használni cssandjs erre a példára.

CSS és JavaScript fájlok esetén az alapértelmezett könyvtár a src / main / resources / static. Alkossunk static / styles / cssandjs és statikus / js / cssandjs mappák a CSS és JS fájljainkhoz.

3.2. CSS hozzáadása

Hozzunk létre egy egyszerű CSS fájlt main.css miénkben static / styles / cssandjs mappát, és adjon meg néhány alapvető stílust:

h2 {font-family: sans-serif; betűméret: 1,5em; szöveg-átalakítás: nagybetű; } erős {font-weight: 700; háttérszín: sárga; } p {font-family: sans-serif; }

Ezután hozzunk létre egy Thymeleaf sablont styledPage.html miénkben sablonok / cssandjs mappa a következő stílusok használatához:

    Adja hozzá a CSS-t és a JS-t a Thymeleaf-hez 
Óvatosan stílusú fejléc
 Ez az a szöveg, amelyre alkalmazni akarjuk nagyon különleges stílus. 

A stíluslapot a Thymeleaf különlegességével ellátott linkcímke segítségével töltjük be th: href tulajdonság. Ha a várt könyvtárstruktúrát használtuk, akkor csak az alábbi elérési utat kell megadnunk src / main / resources / static. Ebben az esetben az /styles/cssandjs/main.css. A @ {/ styles / cssandjs / main.css} a szintaxis a Thymeleaf módja az URL-linkelésnek.

Ha futtatjuk az alkalmazásunkat, látni fogjuk, hogy a stílusainkat alkalmazták:

3.3. JavaScript használatával

Ezután megtanuljuk, hogyan kell hozzáadni egy JavaScript fájlt a Thymeleaf oldalunkhoz.

Kezdjük azzal, hogy hozzáadunk egy JavaScript-et egy fájlhoz src / main / resources / static / js / cssandjs / actions.js:

function showAlert () {alert ("A gombra kattintottak!"); }

Ezután visszaugrunk a Thymeleaf sablonunkra, és hozzáadjuk a a JavaScript fájlunkra mutató címke:

Most a sablonunkból hívjuk meg a módszerünket:

Figyelmeztetés megjelenítése

Amikor futtatjuk az alkalmazásunkat, és kattintson a gombra Figyelmeztetés megjelenítése gombra, meglátjuk a riasztási ablakot.

Mielőtt összefoglalnánk a dolgokat, építsünk egy kicsit erre a példára, megtanulva, hogyan használjuk a Spring vezérlőnk adatait a JavaScript-ben.

Kezdjük azzal, hogy módosítjuk a vezérlőnket, hogy nevet adjon az oldalunknak:

@GetMapping ("/ styled-page") public String getStyledPage (Model model) {model.addAttribute ("név", "Baeldung Reader"); return "cssandjs / styledPage"; }

Ezután adjunk hozzá egy függvényt a sajátunkhoz actions.js fájl, amely ezt a nevet használja egy riasztásban:

function showName (név) {alert ("Itt van a név:" + név); }

Végül, ahhoz, hogy függvényünket meghívhassuk a vezérlőnk adataival, szkript beillesztést kell használnunk. Tehát tegyük a név érték egy helyi JavaScript változóban:

 var névJs = / * [[$ {név}]] * /; 

Ezzel létrehoztunk egy helyi JavaScript változót, amely tartalmazza a név modellérték a kontrollunktól, amelyet aztán az oldal többi részén használhatunk a JavaScript-ben.

Most, hogy ezt megtettük, meghívhatjuk a JavaScript függvényünket a névJs változó:

Név megjelenítése

4. Következtetés

Ebben a rövid bemutatóban megtanultuk, hogyan alkalmazzuk a CSS stílusát és a külső JavaScript funkciókat a Thymeleaf oldalakon. Az ajánlott könyvtárstruktúrával kezdtük, és a tavaszi vezérlő osztályunkban megadott adatokkal a JavaScript meghívására dolgoztunk.

Mint mindig, a kód elérhető a GitHubon.