はじめに
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以上がSpringBoot+Thymeleaf は HTML5 の最新のテンプレート エンジン方式に基づいていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。