SpringBoot+Thymeleaf basiert auf der modernen HTML5-Template-Engine-Methode
- PHPznach vorne
- 2023-05-12 15:13:15866Durchsuche
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>
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 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/ #添加路径前缀
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>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 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>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>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!