SpringBoot+Thymeleaf basiert auf der modernen HTML5-Template-Engine-Methode-javaLernprogramm-php.cn

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

PHPz

Freigeben： 2023-05-12 15:13:15

nach vorne

950 Leute haben es durchsucht

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!