Thymeleaf入門教程

45509 ワード

thymeleaf

Thymeleaf使用シェア

1.Thymeleaf概要

1.1 Thymeleaf使用背景

.Thymeleaf紹介

.SpringMVC+Thymeleaf統合使用

.Thymeleaf添加Maven依存

2.2 THymeleaf統合SprigMVC環境準備

.2.1 SpringMVCプロファイルから既存のプロファイルを削除し、JSPに対する解析構成

.2.2 Thymeleaf構成

を追加しました.

.2.3テンプレートフォルダを作成し、webappの下でtemplatesフォルダを作成します.htmlテンプレートファイル

.入門デモを見に行きます.

.Thymeleaf基本文法

4.1基礎表現

4.1.1変数式(...)

4.1.2選択/アスタリスク表現*{…}

.4.1.3文字の国際化表現.

4.1.4 URL表現@{…}

4.2 Thymeleaf常用ラベル

4.2.1普通ラベル

4.2.2常用ラベル

4.2.3常用工具

4.2.3サイクル、IF、Switch

.プロジェクト中のThymeleaf

5.1プロジェクトで使用されるThymeleafタグ-セグメント(th:fragment)

は、フラグメントを柔軟に運用するために、パラメータ伝達を行う

である.

文書作成by chuIllusions

1.Thymeleaf概要
1.1 Thymeleaf使用背景
JSPは長い時間を使っていますが、Java webでも広く使われています.しかし、それは自身の欠点もあります.明らかにJSPはHTMLやXMLという形で現れています.ほとんどのJSPモデルはHTML形式を使用しており、各種JSPタグライブラリを使用しています.これらのラベルライブラリはJSPで動的な解析が可能ですが、フォームの良いページがあるのは難しいです.例えば、HTMLでは以下のJSPタグが使えます.

<input type="text" value="${thing.name}"/>" />

解析されていないJSPページを読むと、読みにくくなります.JSPは本物のHTMLではないので、多くのウェブブラウザやエディタがJSPを解析するのは難しいです.
また、JSPとservlet仕様は密接に結合されており、これはservletをベースとしたウェブアプリケーションでのみ使用できることを意味する.
近年では、JSPの代わりにjavaアプリケーションとしてのビュー技術が多く出現しています.その中の有力な競争者は、Thymeleafです.Thymeleafはラベルライブラリに依存する必要がなく、編集可能であり、HTMLに解析できます.また、servlet仕様とは結合されていないので、JSPでは使用できない環境で使用できます.次に、Spring MVCでThymeleafを使う方法を見てみます.
1.2 Thymeleaf紹介

ThymeleafはXML/XHTML/HTML 5テンプレートエンジンであり、Webと非Web環境におけるアプリケーション開発に利用できる.これはソースのJavaライブラリで、Aache License 2.0に基づいて許可します.

ThymeleafはSpring MVCを統合するためのオプションモジュールを提供しています.アプリケーション開発において、JSPや他のテンプレートエンジン、例えばVelocity、FreeMarkerなどのTHymeleafを使用して完全に代替できます.

Thymeleafの主な目標は、ブラウザによって正確に表示され、フォーマットの良いテンプレート作成方式を提供することであり、したがって、静的モデリングとしても使用できる.これを使って検証されたXMLとHTMLテンプレートを作成できます.作成ロジックやコードに対して、開発者はラベルの属性をテンプレートに追加するだけでいいです.

Thymeleafは主にHTMLのタグ属性によってラベル内容をレンダリングしています.ブラウザは解析しています.

ですので、Thymeleafのテンプレートはブラウザを通じて直接に開くことができます.これは後端の分離に非常に有利です.

2.SprigMVC+Thymeleaf統合使用
SpringMVCの開発環境を構築してから、次にThymeleafテンプレートエンジンを統合することができます.
2.1 Thymeleaf添加Maven依存
pom.xmlに以下の依存を追加します.

   <dependencies>
    
    <dependency>
      <groupId>org.thymeleafgroupId>
      <artifactId>thymeleafartifactId>
      <version>3.0.2.RELEASEversion>
    dependency>
    <dependency>
      <groupId>org.thymeleafgroupId>
      <artifactId>thymeleaf-spring4artifactId>
      <version>3.0.2.RELEASEversion>
    dependency>
   dependencies>

2.2 Thymeleaf統合SprigMVC環境準備
SpringでThymeleafを使用するためには、3つのbean:1.ThymeleafViewResolaverを配置する必要があります.論理ビューからThymeleafテンプレートを解析するために使用します.2.Spring TemplateEntine:モジュールを処理し、結果を与える;3.TemplateResolover:Thymeleafモデルをロードするために使用します.
2.2.1 SprigMVCプロファイルから既存のプロファイルを削除し、JSPに対する解析配置

<bean class="org.springframework.web.servlet.view.UrlBasedViewResolver">　　
    <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
　　<property name="prefix" value="/WEB-INF/view/"/>
　　<property name="suffix" value=".jsp"/>
bean>

2.2.2 Thymeleaf配置の追加


<bean id="templateResolver" class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">
    
    <property name="prefix" value="/templates/" />
    
    <property name="suffix" value=".html" />
    <property name="templateMode" value="HTML" />
    
    
    <property name="cacheable" value="false" />
    
    <property name="characterEncoding" value="UTF-8"/>
bean>

<bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
    <property name="templateResolver" ref="templateResolver" />
    <property name="enableSpringELCompiler" value="true" />
bean>

    
    <bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">
        <property name="templateEngine" ref="templateEngine" />
        <property name="characterEncoding" value="UTF-8"/>
    bean>

2.2.3テンプレートフォルダを作成し、webappの下でtemplatesフォルダを作成して配置します.htmlテンプレートファイル
3.入門のデモを見てみてください.
3.1 templatesディレクトリの下でthymeleafを新規作成します.内容は以下の通りです.


<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>   ThymeLeaf     title>
head>
<body>
    <h1 th:text="${model}">Hello Worldh1>
body>
html>

3.2 Controllerにデータが入る

/**
 *       ，    ，  thymeleaf    
 *        ，        JSP EL       
 * @param request
 * @param model
 * @return
 */
@RequestMapping("myThymeleaf")
public String myThymeleaf(HttpServletRequest request, Model model){
    model.addAttribute("model","   Thymeleaf    ");
    return "thymeleaf";
}

3.3使用感1.テンプレートは非常に簡単で、既存のhtmlタグの中で、th:プレフィクスはEL式またはJSPラベル庫とバックグラウンドデータのように動的に相互作用することができる.2.Thymeleaf模式はJSPと違って、編集できるし、自然な解析もできるので、他の処理過程を準備する必要がありません.3.先端開発者は直接にhtmlを修正し、修正後の効果を直接観察できます.修正時はThymeleafのコードに影響しないので、前後の共同開発に便利です.
4.Thymeleaf基本文法
ファイルにThymeleadタグを使うには、ヘッダファイルに追加する必要があります.そうでないと、そのラベルは使えません.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

4.1基礎表現
4.1.1変数式(...)

  ：<input type="text" name="userName" value="James Carrot" th:value="${person.name}" /><br/>

以上はhtml内容で、以下はjavaバックグラウンドでデータをフロントに転送します.

/**
 *   -thymeleaf    ：             
 *   ：${conten}
 * @param model
 * @return
 */
@RequestMapping("basicExpression")
public String basicExpression(Model model){
    model.addAttribute("person",this.getPerson());
    return "basic_expression";
}

4.1.2選択/アスタリスク表現*{…}

<div th:object="${person}">
    <p>Name:
    <span th:text="*{name}">Saturnspan>.
    p>
    <p>Age:
        <span th:text="*{age}">30span>.
    p>
    <p>Phone:
        <span th:text="*{phone}">1350992····span>.
    p>
    <p>Address:
        <span th:text="*{address}">  **  span>.
    p>
div>

以上はhtml内容で、以下はjavaバックグラウンドでデータをフロントに転送します.

/**
 *   -thymeleaf    ：          /     
 *   :  *{content}
 *    ：     th:object    
 * @param model
 * @return
 */
@RequestMapping("selectExpression")
public String selectExpression(Model model){
    model.addAttribute("person",this.getPerson());
    return "basic_expression_selection";
}

4.1.3文字の国際化表現
Thymeleaf文字の国際化にはsprigmvcのサポートが必要です.リソースディレクトリreourceでフォルダspring-188 nを国際化ファイルのルートディレクトリとして作成し、各種言語を作成します.propertiesファイルは必要な内容を格納します.springプロファイルにリソースを追加します.


<bean id="messageSource"
     class="org.springframework.context.support.ResourceBundleMessageSource">
   
   <property name="basename" value="spring-i18n/messages">property>
   <property name="defaultEncoding" value="UTF-8"/>
bean>

3.propertiesファイルの内容

message.title=\u8fd9\u662f\u4e00\u4e2a\u6807\u9898

4.htmlコードを入れる

<h1 th:utext="#{message.title}">Hello Worldh1>

5.javaコードを入れる

/**
 *   -thymeleaf    ：              i18n Internationalization
 *   :  #{content}
 *    ：  springmvc       ，        
 * @return
 */
@RequestMapping("i18nExpression")
public String i18nExpression(){
    return "i18n_expression";
}

バックグラウンドコードでは、国際的なリソースファイルを処理していません.Thymeleafは自動的にブラウザ言語に基づいて、spring管理の国際的なリソースファイルから適切なものを選んで表示します.
4.1.4 URL表現@{…}
@{…}パスと相対パスの決定をサポートします.相対パスはまた、コンテキストを越えてurlおよびプロトコルを呼び出す参照をサポートする.1.コード

URL   ：<a href="details.html" th:href="@{myThymeleaf(orderId=${id})}">viewa>br>
    ：<img th:width="100px" th:src="@{../images/{imageUrl}(imageUrl=${image})}">br>
    ：<img th:width="100px" th:src="@{/images/{imageUrl}(imageUrl=${image})}">br>

    ：<img th:width="100px" th:src="@{images/{imageUrl}(imageUrl=${image})}">

2.javaコード

/**
 *   -thymeleaf    ：        url
 *   :  @{content}
 *   ：        ，      
 * @param model
 * @return
 */
@RequestMapping("urlExpression")
public String urlExpression(Model model){
    model.addAttribute("id",10);
    model.addAttribute("image","001.jpg");
    return "url_expression";
}

3.注意:私達がページの中でサーバの資源にアクセスする時は、ブロックされます.springに資源処理を配置する必要があります.静的な資源にアクセスすることができます.


<mvc:resources mapping="/images/**" location="/images/" cache-period="31556926"/>
<mvc:resources mapping="/js/**" location="/js/"/>

4.2 Thymeleaf常用ラベル
4.2.1普通ラベル
Thymeleafのほとんどのタグは、既存の属性に対応しています.例えば、htmlのscriptタグのsrc属性は、Thymeleafではth:srcタグに対応しています.このように静的な解析を行うと、ブラウザはsrc属性に対応するjsを読み取り、動的な解析でアクセスすると、ブラウザが取得したsrcはth:srcの内容です.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>      -ThymeLeaf     title>
head>
<body>

    
    <input type="text" name="name" th:value="ThymeleafValue" value="HtmlValue">
    
    <img src="../images/001.jpg" width="200px" th:width="100px" th:src="@{../images/001.jpg}">br>
    
    <script type="text/javascript" src="../js/myThymeleaf.js" th:src="@{/js/myThymeleaf.js}">script>
body>
html>

4.2.2常用ラベル


<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>      -ThymeLeaf     title>
head>
<body>

    <p>      ：p>
    <dt>  dt>

    <dd th:text="${#numbers.formatDecimal(person.age, 1, 2)}">25dd>
    <dt>  dt>
    <dd th:text="${#dates.format(person.birthday, 'yyyy-MM-dd')}">2014-12-01dd>
    <p>     p>
    <dt>  dt>
    <dd th:text="${'   '+person.address}">   dd>
    <p>  p>
    <form th:action="@{/vic/person}" th:object="${person}" method="post" th:method="post">
        
        <dt>  ：<input type="text"  th:field="*{name}"/>dt>
        <dt>  ：<input type="text" th:field="*{age}"/>dt>
        <dt>  ：<input type="text" th:field="*{phone}"/>dt>
        <dt>  ：<input type="text" th:field="*{address}"/>dt>
        <dt>  ：<input type="text" th:field="*{birthday}"/>dt>
        <dt><input type="submit"/>
    form>
body>
html>

th:fieldフォームフィールドのバインディングはよく使用されます.便利な開発
4.2.3常用工具
ツールオブジェクト式.日付、セット、配列オブジェクトへのアクセスが一般的です.これらのツールオブジェクトは、Javaオブジェクトのように、javaオブジェクトに対応する方法にアクセスして、様々な動作を行うことができます.芫maps、33751;dates、33751;canumbers、菗numbers、33611;listsなどがあります.


<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>    -ThymeLeaf     title>
head>
<body>
    <p>       。     、  、       。
                 java  ，      java            。p>
    <p>#maps、#dates、#calendars、#numbers、#lists p>
    <p>      ：p>
    <dt>#numbers：  dt><dd th:text="${#numbers.formatDecimal(person.age, 1, 2)}">25dd>
    <dt>#dates：  dt><dd th:text="${#dates.format(person.birthday, 'yyyy-MM-dd')}">2014-12-01dd>
    <dt>#calendars：  dt><dd th:text="${#calendars.format(person.birthday, 'dd MMMM yyyy')}">2014-12-01dd>
    <div th:if="${#maps.isEmpty(persons)}">
        <p>#maps:        p>
    div>
    <div>
        #lists:<span th:text="${#lists.size(personList)}">span>
    div>
    
    <div th:with="sizes=${#lists.size(personList)}">
        <h3>      ：<span th:text="${sizes}">span>h3>
    div>
    <div>
        
        #httpServletRequest: <span th:text="${#httpServletRequest.getParameter('ids')}">span>
    div>
body>
html>

4.2.3サイクル、IF、スイッチ


<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>IF/EACH/SWITCH-ThymeLeaf     title>
head>
<body>
    <div>
        <span th:if="${switch > 8}">     8   span>
        <span th:if="${switch > 32}">     32    span>
    div>
--------------------------------------------------
    <div>
        <span th:unless="${switch > 8}">     8   span>
        <span th:unless="${switch > 32}">     32    span>
    div>
    <div th:switch="${switch}">
        <p th:case="'admin'">User is an administratorp>
        <p th:case="30">User is a managerp>
        <p th:case="20">User is a managerp>
        
        <p th:case="*">User is some other thingp>
    div>
    --    --
    <div th:if="${personList!=null}">
        <table>
            <tr th:each="person : ${personList}">
                <td th:text="${person.name}">td>
                <td th:text="${person.age}">td>
                <td th:text="${person.address}">td>
            tr>
        table>
    div>
body>
html>

5.プロジェクト中のThymeleaf
以前はずっとJSPを使っていましたが、初めて会社に来たので、ページは全部htmlです.プロジェクト開発に参加したばかりの時、多くのデータはJavaScriptを使って初期化されています.それは正常ですが、ページを読み込む時に読み込むデータがあります.何を使いますか?この時はテンプレートエンジンの鬼だった.上記で示したラベルがプロジェクトに使われる以外にも、上記では言及されていないものが以下で説明されます.
5.1プロジェクトで使用されるThymeleafタグ-セグメント(th:fragment)
これは私がクラックツールで見たよく知っているコードです.jsp:includeのようなものです.1.editUser.定義のセグメントです.


<div th:fragment="editUserFragment">
….  
div>

2.user Center.はセグメントを引用する.

<div th:replace="userManager/editUser::editUserFragment">div>

そうです.上は私がプロジェクトでよく見たものです.含まれているラベルに似ています.私たちはしばしばテンプレートに含まれるセグメントを他のテンプレートから望んでいます.一般的な用途はフッター、タイトル、メニューなどです.このようにするために、Thymeleafは利用可能なセグメントを定義する必要があります.私たちはth:framentタグuserManager/editUserを使うことによって、ページを導入する方向であり、後尾を除いた名前であるeditUserFragmentはdomセレクタです.つまり、th:fragmentの値はth:include or th:replace or th:replace:replace or th:replace:replace:replactのいずれもセグメント属性を使用できます.
セグメントの柔軟な運用については、パラメータを伝えることです.
セッションを定義

<meta charset="utf-8" pageEncoding="utf-8"/>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<div th:fragment="params(one,two)">
    <p th:text="${one}">p>
    <p th:text="${two}">p>
div>

セッションを参照


<div th:replace="param::params(${dataOne},${dataTwo})">div>

ドキュメント作成by chuIllusions

nodejs生産環境の配置と最適化

requested Memory=-1