So verwenden Sie SpringBoot+Thymeleaf basierend auf der modernen HTML5-Vorlagen-Engine-javaLernprogramm-php.cn

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

WBOY

Freigeben： 2023-05-15 20:28:04

nach vorne

727 Leute haben es durchsucht

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>

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 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/ #添加路径前缀

Nach dem Login kopieren

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>

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 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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!