SpringBootスタディノート5-Thymeleafテンプレートエンジン

Thymeleaf

テンプレートエンジン

フロントエンドから渡されたページはhtmlページです。以前の開発の場合は、それらをjspページに変換する必要があります。jspの利点は、データを見つけてJSPページに転送するときに、jspを使用してデータの表示と相互作用を簡単に実現できることです。

jspは、Javaコードを記述する機能など、非常に強力な関数をサポートしていますが、現在の状況では、SpringBootプロジェクトは最初は戦争ではなくjarの形式であり、2番目のように、組み込みのTomcatを使用しているため、彼は使用していません。現在、デフォルトでjspをサポートしています。

それはjspをサポートしていません。純粋な静的ページを直接使用すると、開発に多くの問題が発生するので、どうすればよいですか？

SpringBootは、テンプレートエンジンを使用できることをお勧めします。

実際、テンプレートエンジンについてはよく耳にしますが、実際、JSPはテンプレートエンジンであり、SpringBootが推奨するThymeleafなど、より多くのフリーマーカーがあります。テンプレートエンジンはたくさんありますが、テンプレートエンジンの数に関係なく、アイデアはすべてです。同じ、どのような考え方ですか？この写真を見てみましょう：
ここに画像の説明を挿入
テンプレートエンジンの役割はページテンプレートを作成することです。たとえば、いくつかの値は動的であり、いくつかの式を作成します。これらの値はどこから来ていますか？いくつかのデータをバックグラウンドでカプセル化します。次に、このテンプレートとこのデータをテンプレートエンジンに渡します。テンプレートエンジンは、式を解析して、データに従って指定した位置に入力し、最後にこのデータから必要なコンテンツを生成して書き出すのに役立ちます。。、これは私たちのテンプレートエンジンであり、jspであろうと他のテンプレートエンジンであろうと、同じ考えです。ただ、異なるテンプレートエンジン間では、構文がわずかに異なる場合があります。その他は紹介しません。主にSpringBootが推奨するThymeleafテンプレートエンジンを紹介します。このテンプレートエンジンは高級言語のテンプレートエンジンであり、構文が単純です。さらに、機能はより強力です。

このテンプレートエンジンを見てみましょう。このテンプレートエンジンを見る必要があるので。まず、SpringBootの使い方を見てみましょう。
Thymeleafの紹介方法
？springbootの場合、すべてが出発点です。プロジェクトで紹介しましょう。皆のための3つのウェブサイト：

Thymeleaf：ر：https：//www.thymeleaf.org/

Github上のThymeleafのホームページ：https：//github.com/thymeleaf/thymeleaf

春の公式文書：対応するバージョンを見つける

https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter

対応するpomの依存関係を見つけます。ソースコードをクリックすると、元のパッケージが表示されます。


<!--thymeleaf-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Mavenは自動的にjarパッケージをダウンロードします。ダウンロードしたものを確認できます。
ここに画像の説明を挿入

Thymeleaf分析

以前、Thymeleafを紹介しましたが、これをどのように使用しますか？

まず、SpringBootの自動構成の原則に従って、Thymeleafの自動構成ルールを確認する必要があり、そのルールに従って使用します。

Thymeleafの自動構成クラスを見つけましょう：ThymeleafProperties


@ConfigurationProperties(
    prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
    
    
    private static final Charset DEFAULT_ENCODING;
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";
    private boolean checkTemplate = true;
    private boolean checkTemplateLocation = true;
    private String prefix = "classpath:/templates/";
    private String suffix = ".html";
    private String mode = "HTML";
    private Charset encoding;
}

デフォルトのプレフィックスとサフィックスが表示されます。

クラスパスの下のテンプレートの下にhtmlページを配置するだけで、thymeleafが自動的にレンダリングできます。

thymeleafを使用するために何も構成する必要はなくここに画像の説明を挿入
、指定されたフォルダーに配置するだけです。

テスト

1.TestControllerを作成します

@Controller
public class TestController {
    
    
    
    @RequestMapping("/t1")
    public String test1(){
    
    
        //classpath:/templates/test.html
        return "test";
    }
    
}

2.テストページtest.htmlを作成し、テンプレートディレクトリに配置します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>我是test</h1>

</body>
</html>

3.プロジェクトリクエストテストを開始します
ここに画像の説明を挿入

Thymeleaf文法学習

文法を学ぶには、公式ウェブサイトのドキュメントを参照するのが最も正確です。対応するバージョンを見つけて調べます。

Thymeleaf公式ウェブサイト：https：//www.thymeleaf.org/、公式ウェブサイトをご覧ください！Thymeleafの公式ドキュメントをダウンロードしましょう！

最も簡単な演習を行いましょう。いくつかのデータを見つけてページに表示する必要があります

1.テスト要求を変更し、データ送信を追加します。


@RequestMapping("/t1")
public String test1(Model model){
    
    
    //存入数据
    model.addAttribute("msg","Hello,Thymeleaf");
    //classpath:/templates/test.html
    return "test";
}

2. thymeleafを使用する場合は、プロンプトを容易にするために、htmlファイルに名前空間制約をインポートする必要があります。

公式ドキュメントの＃3に移動して、名前空間を確認できます。

 xmlns:th="http://www.thymeleaf.org"

3.フロントエンドページを書いてみましょう

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>test</h1>

<!--th:text就是将div中的内容设置为它指定的值，和之前学习的Vue一样-->
<div th:text="${msg}"></div>
</body>
</html>

4.テストを開始します！
ここに画像の説明を挿入
では、始めましょう。Thymeleafの構文を真剣に調べましょう。

1.任意のth：attrを使用して、Htmlのネイティブ属性の値を置き換えることができます。
ここに画像の説明を挿入
2.どのような表現を書くことができますか？
ドキュメントに移動して確認してください

模擬試験：

1.コントローラーを作成し、データを入力します

package com.zhou.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.Arrays;
//这个需要模板引擎的支持！ thymeleaf
@Controller
public class IndexController {
    
    
    @RequestMapping("/test")
    public String test(Model model){
    
    
        model.addAttribute("msg","<h1>msg——hello,springboot</h1>");
        model.addAttribute("users", Arrays.asList("zhouyi","joy"));
        return "test";
    }
}

2.テストページからデータを取得します

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
我是 test
<div th:utext="${msg}"></div>
<div th:text="${msg}"></div>
<hr/>
<p>写法一</p>
<h3 th:each="user:${users}" th:text="${user}"></h3>
<p>写法二</p>
<h3 th:each="user:${users}">[[${
    
    user}]]</h3>
</body>
</html>

3.プロジェクトのテストを開始します！
ここに画像の説明を挿入

文法や多くのスタイルを読んだことがありますが、今学んでも忘れてしまうので、公式文書によると、学習の過程で何を使う必要があるかが最も重要であり、公式ドキュメント！