Heim > Artikel > Java > So verwenden Sie SpringBoot+Thymeleaf basierend auf der modernen HTML5-Vorlagen-Engine

So verwenden Sie SpringBoot+Thymeleaf basierend auf der modernen HTML5-Vorlagen-Engine

WBOYnach vorne: 2023-05-15 20:28:04720Durchsuche

Erste Schritte

1. Abhängigkeiten einführen

SpringBoot stellt es bereit Standardmäßig muss der Starter von Thymeleaf lediglich Abhängigkeiten einführen.

<dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

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>

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>

Hinweis: Da IDEA die Hot-Bereitstellung standardmäßig deaktiviert, müssen einige Einstellungen vorgenommen werden, damit sie 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 auch automatisch prüfen, ob das Seiten-Caching aktiviert ist. Während der Entwicklung sollte das Caching deaktiviert sein. 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/ #添加路径前缀

3. Das Schreiben von HTML

Das Schreiben von Thymeleaf unterscheidet sich nicht vom Schreiben von HTML5-Seiten Die größte Transformation besteht darin, erweiterte Attribute (th:xx) zu verwenden, um mit dem Server für Daten zu interagieren und dabei den ursprünglichen Seitenstil beizubehalten, der auch der von Thymeleaf empfohlene Stil ist. 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>

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";
  }

}

Jetzt versuchen wir, ein Formular nachzufüllen, um individuelle Benutzerinformationen 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>

Als nächstes geben wir einen komplexeren Fall ein, z. B. das Anzeigen 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>

Das obige ist der detaillierte Inhalt vonSo verwenden Sie SpringBoot+Thymeleaf basierend auf der modernen HTML5-Vorlagen-Engine. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 html th idea

Stellungnahme：

Dieser Artikel ist reproduziert unter:yisu.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So implementieren Sie die Bearbeitungsfunktion für die Testdefinition der Springboot-Vue-SchnittstelleNächster Artikel：So implementieren Sie die Bearbeitungsfunktion für die Testdefinition der Springboot-Vue-Schnittstelle

In Verbindung stehende Artikel

Mehr sehen