Thymeleafのテンプレートエンジン

何が thymeleaf フレームワークは、

説明： Thymeleafはテンプレートエンジンであります
テンプレートエンジン：技術的思想の動的ページのコンテンツを達成するために、（フロントエンド開発者は、バックエンドの開発を使用しています）
より人気：

　　　　A）Freemarkerの

　　　　b）の速度

　　　　C）Thymeleaf

最も重要な機能

　　　　A）プロトタイプ即ちインターフェイス美学

自然

　　　　JSP + JSTL の代替

thymeleaf 統合

　　依存関係を紹介

< 依存性> 
    < のgroupId > org.springframework.boot </ のgroupId > 
    < たartifactId >ばねブートスタータthymeleaf </ たartifactId > 
</ 依存>

すべてのデフォルトの設定ファイル　

　　開発段階：無効キャッシュ

thymeleaf ラベルを使用して

　　目：テキスト

　　　　テキスト置換注：文字列連結演算子+

　　目：のutext

　　　　テキスト置換、サポート HTML

　　第ます。if

　　　　条件があれば満たされた場合、現在のラベルを示し、または表示されません。

　　目：しない限り、否定ならばしない限り、

　　　　ない限り反対

　　目：各

　　　　トラバーサル

　　目：スタイル

表現

{}　　$ （ OGNL 式）

異なるスコープの値を取得します。

　　ビルトインオブジェクト

　　日付

　　カレンダー

　　数字

　　ストリング

　　オブジェクト

　　...

エッセンス：のパッケージのツールはいくつかの方法

URL 表現

## 基本属性（代替）

　　目：テキスト

　　目：のutext

　　目：スタイル

注意：式を使用して $ {}

2つの方法の文字列の連結

　　+ 演算子

　　　　内容にスプライス | のような |こんにちは$ {}の世界|

## 解析処理特性を

　　第ます。if

　　目：ない限り（そしてもし反対）

　　目：スイッチ

　　目：ケース

注意：現在のラベルが表示されます

## サイクル特性

　　目：各

## プロパティの特徴

　　目：オブジェクト

注：配合*表达式来取值，例如*{userName}

*表达式和$表达式的区别

　　作用域不同，

　　*表达式作用范围是子节点

　　$表达式是整个页面

th:inline:指定当前标签内容的类型

None: 什么都不是

Text: 指定标签内部的是文本

Javascript: 指定标签内部的是js代码

## 链接属性

　　Th:src

　　Th:href

　　Th:action

注：配合url表达式属性例如@{}

## 代码复用属性

　　th:include 把碎片节点中的内容插入当前节点

　　th:replease 把碎片节点替换掉当前节点

　　th:insert 把碎片节点插入到当前节点

　　th:fragment //碎片

测试Thymeleaf中的标签

1.controller类

package com.seecen.thymeleaf.thymeleaf.controller;


import com.seecen.thymeleaf.thymeleaf.pojo.User;
import lombok.Data;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Random;

@Controller
public class HelloController {


    @RequestMapping("hello")
    public String hello(Model model, HttpSession session){
        int age = (int) (Math.random()*3+18);
        User user = new User();
        user.setUserId(1);
        user.setUserName("林大大");
        user.setAge(age);
        user.setCreateTime(new Date());

        User user2 = new User();
        user2.setUserId(2);
        user2.setUserName("嘤嘤嘤");
        user2.setAge(19);
        user2.setCreateTime(new Date());
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user2);
        session.setAttribute("user",user);
        model.addAttribute("list",list);
        model.addAttribute("name","2333");
        model.addAttribute("msg","w(ﾟДﾟ)w");
        return "hello";
    }
}

2.html页面（

xmlns:th="http://www.thymeleaf.org"      记住加

）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--<head th:include="component::head('欢迎页面')">-->
<!--</head>-->
<body>

    <h2>thymeleaf</h2>
    <p th:text="'hello,'+ ${session.user.userName} + '!!'">嘤嘤嘤</p>  <!--文本替换-->

    <p th:text="|hello,${session.user.userName}, 另一种拼接方法 |">嘤嘤嘤</p>

    <p th:utext="|<a href='#'>hello, ${session.user.userName}</a>|"></p>


    <div>
        <span th:text="|欢迎 [${session.user.userName}] 使用xxx系统|"
        th:if="${session.user!=null}"
        >欢迎，[嘤嘤嘤] 使用xxx系统</span>
<!--        if的反转-->
        <a th:unless="${session.user==null}">退出</a>
    </div>

    <div>
        <table border="1">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
            <tr th:each="user, S : ${list}"
                th:style="'background-color:'+${S.even?'blue':'aqua'}"
                style="background-color: aqua">
                <td th:text="${S.count}">编号</td>
                <td th:text="${user.userName}">姓名</td>
                <td th:text="${user.age}">年龄</td>
                <td>
                    <a href="#" th:href="@{'/update/'+${user.userId}}">修改</a>
                    <a href="#" th:href="@{|/update/${user.userId}}">修改</a>
                    <a href="#" th:href="@{/update/(id=${user.userId},age=${user.age})}">修改</a>
                    <a href="#">删除</a>
            </tr>
        </table>
    </div>

<div>
    <h2>thymeleaf内置对象</h2>
    <div th:text="${#dates.format(session.user.createTime,'yyyy-MM-dd')}">2000-1-1</div>
    <div th:text="${#dates.createNow()}"></div>
    <div th:text="${#dates.createToday()}"></div>
    <div th:text="${#dates.format(#dates.createNow(),'yyyy-MM-dd HH:mm:ss')}"></div>

<!--    字符串相关的-->
    <div th:text="'name属性的长度'+${#strings.length(name)}"></div>
    <div th:text="'world=WORLD?:'+${#strings.equalsIgnoreCase(name,'WORLD')}"></div>
    <div th:text="${#strings.randomAlphanumeric(6)}"></div>

<!--    数字相关-->
    <div th:text="${#numbers.formatDecimal(6666.666,1,2)}">0.99</div>

<!--    集合相关-->
    <div th:text="'#lists.size'+${#lists.size(list)}"></div>

<!--    url表达式-->
    <a href="#" th:href="@{/user/list}">用户列表页面</a>

<!--    流程判断-->
    <ul th:switch="${session.user.age}">
        <li th:case="${18}">18岁</li>
        <li th:case="${19}">19岁</li>
        <li th:case="20">20岁</li>
    </ul>

<!--    修改页面-->
    <div th:object="${session.user}">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" th:value="*{userName}"></td>  <!--临时变量-->
                <td><input type="text" th:value="${session.user.userName}"></td>
            </tr>
            <tr>
                <td>编号</td>
                <td><input type="password" th:value="*{userId}"></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input type="text" th:value="*{age}"></td>
            </tr>
        </table>
    </div>

    <div>
        <p>hello [[${name}]]</p>
        <p th:inline="none">hello [[${name}]]</p>
        <script th:inline="text">  //<!--指定标签类型 text javascrpit-->
            // var msg = [[${msg}]];
            // var msg = '[[${msg}]]';
            alert(msg);
        </script>
    </div>


    <div th:include="component/commons::copy"></div>  <!--引入-->
    <div th:replace="component/commons::copy"></div>  <!--替换-->
    <div th:insert="component/commons::copy"></div>  <!--插入-->
</div>
</body>
</html>

还一些标签不好展示如（

 <div th:include="component/commons::copy"></div>  <!--引入-->
    <div th:replace="component/commons::copy"></div>  <!--替换-->
    <div th:insert="component/commons::copy"></div>  <!--插入-->

这几个

）

3.效果

还有很多标签

Thymeleafのテンプレートエンジン

おすすめ