Heim Java javaLernprogramm SpringBoot+Thymeleaf basiert auf der modernen HTML5-Template-Engine-Methode

SpringBoot+Thymeleaf basiert auf der modernen HTML5-Template-Engine-Methode

May 12, 2023 pm 03:13 PM
html5 springboot thymeleaf

Erste Schritte

1. Abhängigkeiten einführen

SpringBoot stellt standardmäßig den Starter von Thymeleaf bereit. Führen Sie einfach Abhängigkeiten ein.

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
Nach dem Login kopieren

Die aktuelle Standardversion ist 2.1. Wenn Sie die Version auf 3.0 aktualisieren möchten, können Sie sie wie folgt ändern.

  <properties>
    <thymeleaf.version>3.0.7.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
  </properties>
Nach dem Login kopieren

Um die Entwicklung zu erleichtern, verwendet der Projektfall das Hot-Deployment-Tool Dev-Tools, sodass IDEA automatisch geladen wird, nachdem wir die Seite geändert haben, wodurch der Effekt eines Hot-Updates erzielt wird.

   <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <scope>runtime</scope>
    </dependency>
Nach dem Login kopieren

Hinweis: Da IDEA die Hot-Bereitstellung standardmäßig deaktiviert, müssen einige Einstellungen vorgenommen werden, damit es wirksam wird. Lösung: Halten Sie zunächst Strg+Umschalt+Alt+/ gedrückt, rufen Sie dann die Registrierung auf und überprüfen Sie dann „compiler.automake.allow.when.app.running“. Darüber hinaus sollte Build->Compiler das Build-Projekt auch automatisch überprüfen. Darüber hinaus geben wir in der Regel auch den Speicherpfad der Seite an. (Der Standardwert ist classpath:/templates/)

application.yml 配置如下:
spring:
 thymeleaf:
  cache: false #关闭缓存
  prefix: classpath:/views/ #添加路径前缀
Nach dem Login kopieren

3. Das Schreiben von Thymeleaf unterscheidet sich nicht vom Schreiben von HTML5-Seiten Die Beibehaltung des ursprünglichen Seitenstils ist auch der von Thymeleaf empfohlene Stil. Im folgenden einfachen Fall stellten wir beispielsweise nach dem Start des Projekts fest, dass die Seite zum Link von Jianshu gesprungen war, was auch die hervorragende Fähigkeit von Thymeleaf bestätigte, native Seitendaten abzudecken. Seitencode:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Thymeleaf</title>
</head>
<body>
  <h3>欢迎使用Thymeleaf!!</h3>
  <a href="http://www.baidu.com" rel="external nofollow" th:href="${info}" rel="external nofollow" >戳我有惊喜</a>
</body>
</html>
Nach dem Login kopieren
Backend-Code:

@Controller
public class UserController {

  @GetMapping("/")
  public String index(Model model) {
    model.addAttribute("info", "user/list");
    return "index";
  }

  @GetMapping("/user")
  public String hehe(Model model) {
    model.addAttribute("user", new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
    return "user";
  }

  @GetMapping("/user/list")
  public String userlist(Model model) {
    List<User> userList = new ArrayList<>();
    userList.add(new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
    userList.add(new User(UUID.randomUUID().toString(), "kumamon", "123456"));
    userList.add(new User(UUID.randomUUID().toString(), "admin", "admin"));
    model.addAttribute("userList", userList);
    return "userList";
  }

}
Nach dem Login kopieren
Jetzt versuchen wir, ein Formular auszufüllen, um Einzelbenutzerinformationen anzuzeigen.
<!-- 使用th:object 搭配*{} 可以省略对象名 -->
<form action="/" th:object="${user}" >
  <input type="hidden" name="userId" th:value="*{userId}" />
  <input type="text" name="username" th:value="*{username}" />
  <input type="text" name="password" th:value="*{password}" />
</form>
Nach dem Login kopieren
Als nächstes geben wir einen komplexeren Fall ein, z. B. die Anzeige von Benutzerlisteninformationen, und das Durchlaufen von Benutzerstapeln kann ohne das Schreiben neuer Tags abgeschlossen werden.

<h3>用户列表</h3>
<!--说明: th:each="obj,stat:${objects}" 分别代表单个实例,状态(可省略),待遍历对象-->
<div th:each="user:${userList}">
  <input type="hidden" name="userId" th:value="${user.userId}"/>
  用户姓名:<input type="text" name="password" th:value="${user.username}"/>
  登录密码:<input type="text" name="username" th:value="${user.password}"/>
</div>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSpringBoot+Thymeleaf basiert auf der modernen HTML5-Template-Engine-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles