Fügen Sie Thymeleaf CSS und JS hinzu

1. Einleitung

In diesem kurzen Tutorial lernen wir, wie Sie CSS und JavaScript in unseren Thymeleaf-Vorlagen verwenden.

Zuerst gehen wir die erwartete Ordnerstruktur durch, damit wir wissen, wo wir unsere Dateien ablegen müssen. Danach werden wir sehen, was wir tun müssen, um über eine Thymeleaf-Vorlage auf diese Dateien zuzugreifen.

Wir beginnen mit dem Hinzufügen von CSS-Stilen zu unserer Seite und fahren dann mit dem Hinzufügen einiger JavaScript-Funktionen fort.

2. Setup

Um Thymeleaf in unserer Anwendung zu verwenden, fügen wir unserer Maven-Konfiguration den Spring Boot Starter für Thymeleaf hinzu:

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

3. Grundlegendes Beispiel

3.1. Verzeichnisaufbau

Zur Erinnerung: Thymeleaf ist eine Vorlagenbibliothek, die problemlos in Spring Boot-Anwendungen integriert werden kann. Standardmäßig erwartet Thymeleaf, dass wir diese Vorlagen im Ordner src / main / resources / templates ablegen. Wir können Unterordner erstellen, daher verwenden wir für dieses Beispiel einen Unterordner namens cssandjs .

Für CSS- und JavaScript-Dateien lautet das Standardverzeichnis src / main / resources / static . Erstellen wir statische Ordner / styles / cssandjs und static / js / cssandjs für unsere CSS- bzw. JS-Dateien.

3.2. CSS hinzufügen

Lassen Sie uns eine einfache CSS-Datei mit dem Namen main.css in unserem Ordner static / styles / cssandjs erstellen und einige grundlegende Stile definieren:

h2 { font-family: sans-serif; font-size: 1.5em; text-transform: uppercase; } strong { font-weight: 700; background-color: yellow; } p { font-family: sans-serif; }

Als Nächstes erstellen wir eine Thymeleaf-Vorlage mit dem Namen styledPage.html in unserem Ordner templates / cssandjs , um diese Stile zu verwenden:

    Add CSS and JS to Thymeleaf    

Carefully Styled Heading

This is text on which we want to apply very special styling.

Wir laden das Stylesheet mithilfe des Link-Tags mit dem speziellen th: href- Attribut von Thymeleaf . Wenn wir die erwartete Verzeichnisstruktur verwendet haben, müssen wir nur den Pfad unter src / main / resources / static angeben . In diesem Fall ist das /styles/cssandjs/main.css . Die Syntax @ {/ styles / cssandjs / main.css} ist Thymeleafs Methode zur URL-Verknüpfung.

Wenn wir unsere Anwendung ausführen, werden wir feststellen, dass unsere Stile angewendet wurden:

3.3. Verwenden von JavaScript

Als Nächstes lernen wir, wie Sie unserer Thymeleaf-Seite eine JavaScript-Datei hinzufügen.

Beginnen wir mit dem Hinzufügen von JavaScript zu einer Datei in src / main / resources / static / js / cssandjs / action.js :

function showAlert() { alert("The button was clicked!"); }

Dann kehren wir zu unserer Thymeleaf-Vorlage zurück und fügen eine hinzu Tag, das auf unsere JavaScript-Datei verweist:

Jetzt rufen wir unsere Methode aus unserer Vorlage auf:

Show Alert

Wenn wir unsere Anwendung ausführen und die Klicken anzeigen Alarm - Taste, werden wir das Alarmfenster sehen.

Bevor wir zum Abschluss kommen, bauen wir ein wenig auf diesem Beispiel auf, indem wir lernen, wie Daten von unserem Spring-Controller in unserem JavaScript verwendet werden.

Beginnen wir damit, unseren Controller so zu ändern, dass er unserer Seite einen Namen gibt:

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

Als Nächstes fügen wir unserer Datei action.js eine Funktion hinzu , um diesen Namen in einer Warnung zu verwenden:

function showName(name) { alert("Here's the name: " + name); }

Um unsere Funktion mit den Daten von unserem Controller aufzurufen, müssen wir schließlich Skript-Inlining verwenden. Platzieren wir also den Namenswert in einer lokalen JavaScript-Variablen:

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

Auf diese Weise haben wir eine lokale JavaScript - Variablen erstellt, die das enthält Namen Modellwert aus unserer Kontrolle , dass wir dann in unserem JavaScript auf dem Rest der Seite verwenden können.

Nachdem wir das getan haben, können wir unsere JavaScript-Funktion mit der Variablen nameJs aufrufen :

Show Name

4. Fazit

In diesem kurzen Tutorial haben wir gelernt, wie Sie CSS-Stil und externe JavaScript-Funktionen auf unsere Thymeleaf-Seiten anwenden. Wir haben mit der empfohlenen Verzeichnisstruktur begonnen und uns bis zum Aufruf von JavaScript mit Daten aus unserer Spring-Controller-Klasse hochgearbeitet.

Wie immer ist der Code auf GitHub verfügbar.