HTML5最新テンプレートエンジンをベースにしたSpringBoot+Thymeleafの使い方-＆＃＆チュートリアル-php.cn

HTML5最新テンプレートエンジンをベースにしたSpringBoot+Thymeleafの使い方

WBOY

リリース： 2023-05-15 20:28:04

転載

739 人が閲覧しました

はじめに

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