ホームページ >Java >＆＃＆チュートリアル >HTML5最新テンプレートエンジンをベースにしたSpringBoot+Thymeleafの使い方
HTML5最新テンプレートエンジンをベースにしたSpringBoot+Thymeleafの使い方
- WBOY転載
- 2023-05-15 20:28:04742ブラウズ
はじめに
1.依存関係の導入
SpringBoot はデフォルトで Thymeleaf の Starter を提供しますが、単に依存関係を導入するだけです。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
現在のデフォルト バージョンは 2.1 です。バージョンを 3.0 にアップグレードしたい場合は、次のように変更できます。
<properties> <thymeleaf.version>3.0.7.RELEASE</thymeleaf.version> <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version> </properties>
開発を容易にするために、プロジェクト ケースではホット デプロイメント ツール dev-tools を使用しています。これにより、ページを変更した後、IDEA が自動的に読み込まれ、ホット アップデートの効果が得られます。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> </dependency>
注: IDEA はデフォルトでホット デプロイメントを無効にするため、有効にするためにいくつかの設定を行う必要があります。解決策: まず Ctrl Shift Alt を押したままレジストリに入り、compiler.automake.allow.when.app.running を確認します。さらに、[ビルド] -> [コンパイラ] も自動的に [プロジェクトのビルド] をチェックする必要があります。
2. 関連する構成を追加します
Thymeleaf では、デフォルトでページ キャッシュが有効になっています。開発中はキャッシュをオフにする必要があります。さらに、通常はページの保存パスも指定します。 (デフォルトは classpath:/templates/ です)
application.yml 配置如下： spring: thymeleaf: cache: false #关闭缓存 prefix: classpath:/views/ #添加路径前缀
3. HTML の記述
Thymeleaf の記述は、HTML5 ページの記述と何ら変わりません。最大の変更点は、拡張属性 (th:xx) を使用してサーバーとデータをやり取りし、元のページ スタイルを保持します。これは、Thymeleaf が推奨するスタイルでもあります。たとえば、次の単純なケースでは、プロジェクトを開始した後、ページが Jianshu のリンクにジャンプすることがわかり、ネイティブ ページ データをカバーする Thymeleaf の優れた能力も検証されました。
ページ コード:
<!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>
バックエンド コード:
@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";
}
}
次に、単一のユーザー情報を表示するためにフォームをバックフィルしてみます。
<!-- 使用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>
次に、ユーザー リスト情報の表示など、より複雑なケースに入ります。ユーザーのバッチの走査は、新しいタグを記述せずに完了できます。
rree以上がHTML5最新テンプレートエンジンをベースにしたSpringBoot+Thymeleafの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。