ThymeleafクイックスタートでSpringBoot

Thymeleafは、JSPやFreeMarkerのとは異なり、Thymeleafは近いHTMLの構文、近代的なサーバーサイドJavaのテンプレートエンジンであり、また優れた拡張性と互換性を持っています。

1、Mavenは導入しました

pom.xmlファイルの導入への依存

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

2、コントローラ

package com.huven.springboot.comtroller;

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

/**
 * Created by v20 Luna on 2019/11/26 14:54
 */
@Controller
public class UserController {

    @GetMapping("/user")
    public String Hello(Model m){
        m.addAttribute("msg","Hello Thymeleaf");
        return "user";
    }
}

3、HTML

htmlファイルは、以下のリソース/テンプレートで作成されます

注： HTMLタグが導入されなければなりませんxmlns:th="http://www.thymeleaf.org"

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Hello User</h1>
    <p th:text="${msg}"></p>
</body>
</html>

二、Thymeleaf文法

1つのテキスト値の文字列操作

私のコントローラ

@GetMapping("/test")
public String test(Model m){
    m.addAttribute("msg","Hello");
    return "test";
}

私のHTML

<h1>text文字显示</h1>
<p th:text="${msg}"></p>

<h1>value给值</h1>
<input type="text" th:value="${msg}" disabled/>

<h1>string操作</h1>
是否为空:<span th:text="${#strings.isEmpty(msg)}" ></span><br>
是否包含指定的字符串:<span th:text="${#strings.contains(msg,'he')}" ></span><br>
是否以'h'字符串开头:<span th:text="${#strings.startsWith(msg,'h')}" ></span><br>
是否以'o'字符串结尾:<span th:text="${#strings.endsWith(msg,'o')}" ></span><br>
返回字符串的长度:<span th:text="${#strings.length(msg)}" ></span><br>
查找字符串的位置,获取'h'下标:<span th:text="${#strings.indexOf(msg,'h')}" ></span><br>
截取字符串:<span th:text="${#strings.substring(msg,2)}" ></span><br>
截取字符串:<span th:text="${#strings.substring(msg,1,3)}" ></span><br>
字符串转大写:<span th:text="${#strings.toUpperCase(msg)}" ></span><br>
字符串转小写:<span th:text="${#strings.toLowerCase(msg)}" ></span><br>

ブラウザの出力を開きます。

text文字显示
Hello

value给值
string操作

是否为空:false
是否包含指定的字符串:false
是否以'h'字符串开头:false
是否以'o'字符串结尾:true
返回字符串的长度:5
查找字符串的位置,获取'h'下标:-1
截取字符串:llo
截取字符串:el
字符串转大写:HELLO
字符串转小写:hello

2日付操作

コントローラ

@GetMapping("/date")
public String date(Model m){
    m.addAttribute("date",new Date());
    return "date";
}

HTML

<h1>Date处理</h1>
格式化日期(浏览器的标准): <span th:text="${#dates.format(date)}" ></span><br>
格式化日期(自定义): <span th:text="${#dates.format(date,'yyyy年MM月dd日 HH时mm分ss秒')}" ></span><br>
日期获取年份: <span th:text="${#dates.year(date)}" ></span><br>
日期获取月份: <span th:text="${#dates.month(date)}" ></span><br>
日期获取日: <span th:text="${#dates.day(date)}" ></span><br>
日期获取小时: <span th:text="${#dates.hour(date)}" ></span><br>
日期获取分钟: <span th:text="${#dates.minute(date)}" ></span><br>
日期获取秒数: <span th:text="${#dates.second(date)}" ></span><br>
日期获取毫秒值: <span th:text="${#dates.millisecond(date)}" ></span><br>

ページ出力

Date处理

格式化日期(浏览器的标准): 2019年11月26日 下午04时41分27秒
格式化日期(自定义): 2019年11月26日 16时41分27秒
日期获取年份: 2019
日期获取月份: 11
日期获取日: 26
日期获取小时: 16
日期获取分钟: 41
日期获取秒数: 27
日期获取毫秒值: 890

3スイッチ使用の場合

コントローラ

@GetMapping("/testIf")
public String testIf(Model m){
    m.addAttribute("age",18);
    m.addAttribute("sex","男");
    return "testIf";
}

HTML

<h1>If测试</h1>
<span th:if="${age} lt 16">你已经不是青少年了</span><br/>
<span th:if="${age} ge 18">你已经成年了</span><br/>

<h1>switch测试</h1>
<span th:switch="${age}">
    <span th:case="16">16岁</span>
    <span th:case="17">17岁</span>
    <span th:case="18">18岁</span>
    <span th:case="19">19岁</span>
    <span th:case="20">20岁</span>
</span>

Thymeleaf比較的一般的なシンボル

シンボルの比較	説明
LT	未満<
GT	>より大きい
EQ	イコール==
インクルード	未満または<=等しいです
与えます	より大きい又は> =等しいです

ページ出力

If测试

你已经成年了

switch测试
18岁

4オブジェクトリストの各トラバース

そして、セットが同じであるマップ

コントローラ

@GetMapping("/each")
public String each(Model m){
    ArrayList<User> list = new ArrayList<User>();
    list.add(new User(1,"小明","男",18));
    list.add(new User(2,"小红","女",17));
    list.add(new User(3,"小花","女",18));
    m.addAttribute("list",list);
    return "each";
}

HTML

<h1>each遍历</h1>
<p>写法一</p>
<table border="1">
    <tr th:each="user : ${list}">
        <td th:text="${user.getId()}"></td>
        <td th:text="${user.getName()}"></td>
        <td th:text="${user.getSex()}"></td>
        <td th:text="${user.getAge()}"></td>
    </tr>
</table>

<p>写法二</p>
<table border="1">
    <tr th:each="user : ${list}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.sex}"></td>
        <td th:text="${user.age}"></td>
    </tr>
</table>

ページ出力：

each遍历

写法一
1   小明  男   18
2   小红  女   17
3   小花  女   18

写法二
1   小明  男   18
2   小红  女   17
3   小花  女   18

5試験スコープ

1、要求

2、セッション

3、属性

コントローラ：

@GetMapping("/area")
public String area(HttpServletRequest request){
    request.setAttribute("req","我是request");
    request.getSession().setAttribute("ses","我是session");
    request.getServletContext().setAttribute("att","我是attribute");
    return "area";
}

HTML：

<h1> area 测试,三大作用域</h1>
<h2>request</h2>
1<p th:text="${req}"></p>
2<p th:text="${#request.getAttribute('req')}"></p>
3<p th:text="${#httpServletRequest.getAttribute('req')}"></p>

<h2>session</h2>
1<p th:text="${ses}"></p>
2<p th:text="${#httpSession.getAttribute('ses')}"></p>
3<p th:text="${#session.getAttribute('ses')}"></p>

<h2>attribute</h2>
1<p th:text="${att}"></p>
2<p th:text="${#servletContext.getAttribute('att')}"></p>

出力：

エリアテスト、3つのスコープ

リクエスト
1
私が要求する
2
私が要求する
3
I要求を

セッション
1

2
私は、セッション午前
3
Iの午前セッション

属性
1
2
I属性

注：この発見は、<p th:text="${ses}"></p>適格なセッションと属性のオブジェクトではありません

6 URLの使用

HTML：

<h1> URL 的表示</h1>
<a href="http://www.baidu.com">百度-普通html写法</a><br/>
<a th:href="@{http://www.baidu.com}">百度-绝对路径</a><br/>
<p>-------------相对路径----------------</p>
<a th:href="@{/user}">相对路径</a>
<a th:href="@{~/user}">相对服务器的根目录</a>
<a th:href="@{/user(id=6,name=wang)}">相对路径+传参数</a>

測定された缶アクセス！

Thymeleaf共通の文法入門します

ThymeleafクイックスタートでSpringBoot

1、Mavenは導入しました

2、コントローラ

3、HTML

二、Thymeleaf文法

1つのテキスト値の文字列操作

2日付操作

3スイッチ使用の場合

Thymeleaf比較的一般的なシンボル

4オブジェクトリストの各トラバース

5試験スコープ

6 URLの使用

おすすめ