SpringBoot2.2.x(六)thymeleafの統合
50790 ワード
このシリーズの記事はSpringBoot 2に基づいています.2.5.RELEASE
デフォルトの構成プロパティ
デフォルトの構成プロパティ
Thymeleaの自動構成クラスはThymeleafAutoConfiguration、構成属性クラスはThymeleafProperties@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
// UTF_8
private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
// HTML
// HTML classpath:/templates/, thymeleaf
// maven resources classpath ,
// HTML resources/templates
public static final String DEFAULT_PREFIX = "classpath:/templates/";
// .html
public static final String DEFAULT_SUFFIX = ".html";
......
}
一般的なプロパティの構成は次のとおりです.# true, false
spring.thymeleaf.cache=true
# UTF-8
spring.thymeleaf.encoding=UTF-8
# HTML classpath:/templates/
spring.thymeleaf.prefix=classpath:/templates/
# HTML .html
spring.thymeleaf.suffix=.html
# HTML
spring.thymeleaf.mode=HTML
に頼る <dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
コードの作成 @Controller
public class UserController {
@GetMapping("/user")
public String user(Model model) {
List<Map<String, Object>> userList = new ArrayList<>();
for (int i = 1; i <= 10; i++) {
Map<String, Object> map = new HashMap<>();
map.put("id",i);
map.put("username", "name_" + i);
userList.add(map);
}
model.addAttribute("userList",userList);
return "user";
}
}
resources/templatesディレクトリの下にuserを新規作成します.html
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Spring MVC title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js">script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js">script>
head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered">
<thead>
<tr>
<th>IDth>
<th> th>
tr>
thead>
<tbody>
<tr th:each="user : ${userList}">
<td th:text="${user.id}">td>
<td th:text="${user.username}">td>
tr>
tbody>
table>
div>
div>
div>
body>
html>
user.htmlヘッダにはthymeleafの名前空間をインポートする必要があります<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
アプリケーションでpropertiesでthymeleafキャッシュを閉じる設定spring.thymeleaf.cache=false
構文
公式ドキュメント:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
一般変数の取得
<h1 th:text="${username}">h1>
<h1>[[${username}]]h1>
<script th:inline="javascript">
var username = [[${username}]];
script>
ループ
<tr th:each="user : ${userList}">
<td th:text="${user.id}">td>
<td th:text="${user.username}">td>
tr>
じょうけんステートメント
<tr th:each="user : ${userList}">
<td th:text="${user.id}">td>
<td th:text="${user.username}">td>
<td th:if="${user.gender} == 1" th:text=" ">td>
<td th:if="${user.gender} == 0" th:text=" ">td>
tr>
<tr th:each="user : ${userList}">
<td th:text="${user.id}">td>
<td th:text="${user.username}">td>
<td th:switch="${user.gender}">
<span th:case="0"> span>
<span th:case="1"> span>
td>
tr>
URL
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">viewa>
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">viewa>
かたわく
resources/templates/layout.html
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>layouttitle>
head>
<body>
<div th:fragment="header">
<h1> h1>
div>
<div th:fragment="footer">
<h1> h1>
div>
body>
html>
他のページはlayout.を多重化できます.htmlの中のコード、使い方は以下の通りです:replaceは置換を代表して、insertは挿入を代表します<div th:replace="~{layout :: header}">div>
<div> div>
<div th:insert="~{layout :: footer}">div>
request/sessionプロパティ
<h1 th:text="${#request.getAttribute('key')}">h1>
<h1 th:text="${#session.getAttribute('key')}">h1>
時間
/*
* Java8 LocalDateTime， temporals，
* ${#temporals.format(date, 'yyyy-MM-dd HH:mm:ss')}
* ======================================================================
* See javadoc API for class org.thymeleaf.expression.Dates
* ======================================================================
*/
/*
* Format date with the standard locale format
* Also works with arrays, lists or sets
*/
${#dates.format(date)}
${#dates.arrayFormat(datesArray)}
${#dates.listFormat(datesList)}
${#dates.setFormat(datesSet)}
/*
* Format date with the ISO8601 format
* Also works with arrays, lists or sets
*/
${#dates.formatISO(date)}
${#dates.arrayFormatISO(datesArray)}
${#dates.listFormatISO(datesList)}
${#dates.setFormatISO(datesSet)}
/*
* Format date with the specified pattern
* Also works with arrays, lists or sets
*/
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
/*
* Obtain date properties
* Also works with arrays, lists or sets
*/
${#dates.day(date)} // also arrayDay(...), listDay(...), etc.
${#dates.month(date)} // also arrayMonth(...), listMonth(...), etc.
${#dates.monthName(date)} // also arrayMonthName(...), listMonthName(...), etc.
${#dates.monthNameShort(date)} // also arrayMonthNameShort(...), listMonthNameShort(...), etc.
${#dates.year(date)} // also arrayYear(...), listYear(...), etc.
${#dates.dayOfWeek(date)} // also arrayDayOfWeek(...), listDayOfWeek(...), etc.
${#dates.dayOfWeekName(date)} // also arrayDayOfWeekName(...), listDayOfWeekName(...), etc.
${#dates.dayOfWeekNameShort(date)} // also arrayDayOfWeekNameShort(...), listDayOfWeekNameShort(...), etc.
${#dates.hour(date)} // also arrayHour(...), listHour(...), etc.
${#dates.minute(date)} // also arrayMinute(...), listMinute(...), etc.
${#dates.second(date)} // also arraySecond(...), listSecond(...), etc.
${#dates.millisecond(date)} // also arrayMillisecond(...), listMillisecond(...), etc.
/*
* Create date (java.util.Date) objects from its components
*/
${#dates.create(year,month,day)}
${#dates.create(year,month,day,hour,minute)}
${#dates.create(year,month,day,hour,minute,second)}
${#dates.create(year,month,day,hour,minute,second,millisecond)}
/*
* Create a date (java.util.Date) object for the current date and time
*/
${#dates.createNow()}
${#dates.createNowForTimeZone()}
/*
* Create a date (java.util.Date) object for the current date (time set to 00:00)
*/
${#dates.createToday()}
${#dates.createTodayForTimeZone()}
@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
// UTF_8
private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
// HTML
// HTML classpath:/templates/, thymeleaf
// maven resources classpath ,
// HTML resources/templates
public static final String DEFAULT_PREFIX = "classpath:/templates/";
// .html
public static final String DEFAULT_SUFFIX = ".html";
......
}
# true, false
spring.thymeleaf.cache=true
# UTF-8
spring.thymeleaf.encoding=UTF-8
# HTML classpath:/templates/
spring.thymeleaf.prefix=classpath:/templates/
# HTML .html
spring.thymeleaf.suffix=.html
# HTML
spring.thymeleaf.mode=HTML
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
コードの作成 @Controller
public class UserController {
@GetMapping("/user")
public String user(Model model) {
List<Map<String, Object>> userList = new ArrayList<>();
for (int i = 1; i <= 10; i++) {
Map<String, Object> map = new HashMap<>();
map.put("id",i);
map.put("username", "name_" + i);
userList.add(map);
}
model.addAttribute("userList",userList);
return "user";
}
}
resources/templatesディレクトリの下にuserを新規作成します.html
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Spring MVC title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js">script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js">script>
head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered">
<thead>
<tr>
<th>IDth>
<th> th>
tr>
thead>
<tbody>
<tr th:each="user : ${userList}">
<td th:text="${user.id}">td>
<td th:text="${user.username}">td>
tr>
tbody>
table>
div>
div>
div>
body>
html>
user.htmlヘッダにはthymeleafの名前空間をインポートする必要があります<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
アプリケーションでpropertiesでthymeleafキャッシュを閉じる設定spring.thymeleaf.cache=false
構文
公式ドキュメント:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
一般変数の取得
<h1 th:text="${username}">h1>
<h1>[[${username}]]h1>
<script th:inline="javascript">
var username = [[${username}]];
script>
ループ
<tr th:each="user : ${userList}">
<td th:text="${user.id}">td>
<td th:text="${user.username}">td>
tr>
じょうけんステートメント
<tr th:each="user : ${userList}">
<td th:text="${user.id}">td>
<td th:text="${user.username}">td>
<td th:if="${user.gender} == 1" th:text=" ">td>
<td th:if="${user.gender} == 0" th:text=" ">td>
tr>
<tr th:each="user : ${userList}">
<td th:text="${user.id}">td>
<td th:text="${user.username}">td>
<td th:switch="${user.gender}">
<span th:case="0"> span>
<span th:case="1"> span>
td>
tr>
URL
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">viewa>
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">viewa>
かたわく
resources/templates/layout.html
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>layouttitle>
head>
<body>
<div th:fragment="header">
<h1> h1>
div>
<div th:fragment="footer">
<h1> h1>
div>
body>
html>
他のページはlayout.を多重化できます.htmlの中のコード、使い方は以下の通りです:replaceは置換を代表して、insertは挿入を代表します<div th:replace="~{layout :: header}">div>
<div> div>
<div th:insert="~{layout :: footer}">div>
request/sessionプロパティ
<h1 th:text="${#request.getAttribute('key')}">h1>
<h1 th:text="${#session.getAttribute('key')}">h1>
時間
/*
* Java8 LocalDateTime， temporals，
* ${#temporals.format(date, 'yyyy-MM-dd HH:mm:ss')}
* ======================================================================
* See javadoc API for class org.thymeleaf.expression.Dates
* ======================================================================
*/
/*
* Format date with the standard locale format
* Also works with arrays, lists or sets
*/
${#dates.format(date)}
${#dates.arrayFormat(datesArray)}
${#dates.listFormat(datesList)}
${#dates.setFormat(datesSet)}
/*
* Format date with the ISO8601 format
* Also works with arrays, lists or sets
*/
${#dates.formatISO(date)}
${#dates.arrayFormatISO(datesArray)}
${#dates.listFormatISO(datesList)}
${#dates.setFormatISO(datesSet)}
/*
* Format date with the specified pattern
* Also works with arrays, lists or sets
*/
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
/*
* Obtain date properties
* Also works with arrays, lists or sets
*/
${#dates.day(date)} // also arrayDay(...), listDay(...), etc.
${#dates.month(date)} // also arrayMonth(...), listMonth(...), etc.
${#dates.monthName(date)} // also arrayMonthName(...), listMonthName(...), etc.
${#dates.monthNameShort(date)} // also arrayMonthNameShort(...), listMonthNameShort(...), etc.
${#dates.year(date)} // also arrayYear(...), listYear(...), etc.
${#dates.dayOfWeek(date)} // also arrayDayOfWeek(...), listDayOfWeek(...), etc.
${#dates.dayOfWeekName(date)} // also arrayDayOfWeekName(...), listDayOfWeekName(...), etc.
${#dates.dayOfWeekNameShort(date)} // also arrayDayOfWeekNameShort(...), listDayOfWeekNameShort(...), etc.
${#dates.hour(date)} // also arrayHour(...), listHour(...), etc.
${#dates.minute(date)} // also arrayMinute(...), listMinute(...), etc.
${#dates.second(date)} // also arraySecond(...), listSecond(...), etc.
${#dates.millisecond(date)} // also arrayMillisecond(...), listMillisecond(...), etc.
/*
* Create date (java.util.Date) objects from its components
*/
${#dates.create(year,month,day)}
${#dates.create(year,month,day,hour,minute)}
${#dates.create(year,month,day,hour,minute,second)}
${#dates.create(year,month,day,hour,minute,second,millisecond)}
/*
* Create a date (java.util.Date) object for the current date and time
*/
${#dates.createNow()}
${#dates.createNowForTimeZone()}
/*
* Create a date (java.util.Date) object for the current date (time set to 00:00)
*/
${#dates.createToday()}
${#dates.createTodayForTimeZone()}
@Controller
public class UserController {
@GetMapping("/user")
public String user(Model model) {
List<Map<String, Object>> userList = new ArrayList<>();
for (int i = 1; i <= 10; i++) {
Map<String, Object> map = new HashMap<>();
map.put("id",i);
map.put("username", "name_" + i);
userList.add(map);
}
model.addAttribute("userList",userList);
return "user";
}
}
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Spring MVC title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js">script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js">script>
head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered">
<thead>
<tr>
<th>IDth>
<th> th>
tr>
thead>
<tbody>
<tr th:each="user : ${userList}">
<td th:text="${user.id}">td>
<td th:text="${user.username}">td>
tr>
tbody>
table>
div>
div>
div>
body>
html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
spring.thymeleaf.cache=false
公式ドキュメント:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
一般変数の取得
<h1 th:text="${username}">h1>
<h1>[[${username}]]h1>
<script th:inline="javascript">
var username = [[${username}]];
script>
ループ
<tr th:each="user : ${userList}">
<td th:text="${user.id}">td>
<td th:text="${user.username}">td>
tr>
じょうけんステートメント
<tr th:each="user : ${userList}">
<td th:text="${user.id}">td>
<td th:text="${user.username}">td>
<td th:if="${user.gender} == 1" th:text=" ">td>
<td th:if="${user.gender} == 0" th:text=" ">td>
tr>
<tr th:each="user : ${userList}">
<td th:text="${user.id}">td>
<td th:text="${user.username}">td>
<td th:switch="${user.gender}">
<span th:case="0"> span>
<span th:case="1"> span>
td>
tr>
URL
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">viewa>
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">viewa>
かたわく
resources/templates/layout.html
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>layouttitle>
head>
<body>
<div th:fragment="header">
<h1> h1>
div>
<div th:fragment="footer">
<h1> h1>
div>
body>
html>
他のページはlayout.を多重化できます.htmlの中のコード、使い方は以下の通りです:replaceは置換を代表して、insertは挿入を代表します
<div th:replace="~{layout :: header}">div>
<div> div>
<div th:insert="~{layout :: footer}">div>
request/sessionプロパティ
<h1 th:text="${#request.getAttribute('key')}">h1>
<h1 th:text="${#session.getAttribute('key')}">h1>
時間
/*
* Java8 LocalDateTime， temporals，
* ${#temporals.format(date, 'yyyy-MM-dd HH:mm:ss')}
* ======================================================================
* See javadoc API for class org.thymeleaf.expression.Dates
* ======================================================================
*/
/*
* Format date with the standard locale format
* Also works with arrays, lists or sets
*/
${#dates.format(date)}
${#dates.arrayFormat(datesArray)}
${#dates.listFormat(datesList)}
${#dates.setFormat(datesSet)}
/*
* Format date with the ISO8601 format
* Also works with arrays, lists or sets
*/
${#dates.formatISO(date)}
${#dates.arrayFormatISO(datesArray)}
${#dates.listFormatISO(datesList)}
${#dates.setFormatISO(datesSet)}
/*
* Format date with the specified pattern
* Also works with arrays, lists or sets
*/
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
/*
* Obtain date properties
* Also works with arrays, lists or sets
*/
${#dates.day(date)} // also arrayDay(...), listDay(...), etc.
${#dates.month(date)} // also arrayMonth(...), listMonth(...), etc.
${#dates.monthName(date)} // also arrayMonthName(...), listMonthName(...), etc.
${#dates.monthNameShort(date)} // also arrayMonthNameShort(...), listMonthNameShort(...), etc.
${#dates.year(date)} // also arrayYear(...), listYear(...), etc.
${#dates.dayOfWeek(date)} // also arrayDayOfWeek(...), listDayOfWeek(...), etc.
${#dates.dayOfWeekName(date)} // also arrayDayOfWeekName(...), listDayOfWeekName(...), etc.
${#dates.dayOfWeekNameShort(date)} // also arrayDayOfWeekNameShort(...), listDayOfWeekNameShort(...), etc.
${#dates.hour(date)} // also arrayHour(...), listHour(...), etc.
${#dates.minute(date)} // also arrayMinute(...), listMinute(...), etc.
${#dates.second(date)} // also arraySecond(...), listSecond(...), etc.
${#dates.millisecond(date)} // also arrayMillisecond(...), listMillisecond(...), etc.
/*
* Create date (java.util.Date) objects from its components
*/
${#dates.create(year,month,day)}
${#dates.create(year,month,day,hour,minute)}
${#dates.create(year,month,day,hour,minute,second)}
${#dates.create(year,month,day,hour,minute,second,millisecond)}
/*
* Create a date (java.util.Date) object for the current date and time
*/
${#dates.createNow()}
${#dates.createNowForTimeZone()}
/*
* Create a date (java.util.Date) object for the current date (time set to 00:00)
*/
${#dates.createToday()}
${#dates.createTodayForTimeZone()}