ホームページ  >  記事  >  Java  >  SpringBoot+Thymeleaf は HTML5 の最新のテンプレート エンジン方式に基づいています

SpringBoot+Thymeleaf は HTML5 の最新のテンプレート エンジン方式に基づいています

PHPz
PHPz転載
2023-05-12 15:13:15897ブラウズ

はじめに

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 サイトの他の関連記事を参照してください。

声明:
この記事はyisu.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。