Spring MVC - Thymeleaf(2) Fragment,Layout

20542 ワード
Spring Thymeleaf MVC テキストリンク

使用理由


Webページの画面を整理するとき、共通のエリアがたくさんあります.
では、ここで考えてみましょう.
共通点で修正が必要なら??複数のHTMLファイルを修正する必要があるストーリー
何百ものHTMLファイルがあれば?考えてみれば恐ろしい!
したがって、Thymmeleafはテンプレートフラグメント(fragment)とレイアウト機能をサポートし、共通領域を処理する

テンプレートセグメント→分割


th:fragment、th:insert、th:replaceの使用
共通領域部分-th:fragment
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
	<footer th:fragment="first-footer">
    		<p>Hello Fragment!</p>
	</footer>
  </body>
共通領域ページの使用-th:insert,th:replace
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
 		<title>Title</title>
	</head>
  
	<body>
		<h1>Sungjin's Velog</h1>
		<h2>insert</h2>
		<div th:insert="~{template/fragment/footer :: first-footer}"></div>
		<h2>replace</h2>
		<div th:replace="~{template/fragment/footer :: first-footer}"></div>
  	</body>
</html>
実行結果

アップロードされたページソース

ここで、th:insertは既存の<div>タグに挿入され、th:replaceは既存の<div>タグを直接置き換えていることがわかります.
パラメータも使用できます!
共通領域部分-th:fragment
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
	<footer th:fragment="paramFooter (param1, param2)">
    		<p th:text="${param1}"></p>
    		<p th:text="${param2}"></p>
	</footer>
  </body>
共通領域ページの使用-th:replace
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
 		<title>Title</title>
	</head>
  
	<body>
		<h1>Sungjin's Velog</h1>
		<h2>insert</h2>
		<div th:replace="~{template/fragment/footer :: paramFooter ('Computer', 'Science')}">
    </div>
  	</body>
</html>
実行結果

アップロードされたページソース

パラメータを渡すことで、ダイナミックレンダリングも可能!

レイアウト


レイアウトはテンプレートの破片のより大きなバージョンと見なすことができます.
テンプレートフラグメントは、共通領域のフラグメントにロードされ、書き込むことができます.
レイアウトはそれを拡大することができて、htmlタグ単位で、使用方式はいっそレイアウトページを基礎にします.
各ページに必要なコンテンツ、ラベルなどがあれば、レイアウトページに転送し、転送したコンテンツを置き換えて画面に送信します.考えてみればいい
恐らく言葉では説明しにくいので、コードを見てください.
layout File
<!DOCTYPE html>
<html th:fragment="layout (content1, content2)" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title >Layout Title</title>
    </head>
    
    <body>
        <h1>Sungjin's Velog!</h1>
        <div th:replace="${content1}">
            <p>Content1</p>
        </div>
        <div th:replace="${content2}">
            <p>Content2</p>
        </div>
        
        <footer>
            Layout footer
        </footer>
    </body>
</html>
レイアウトを使用したページ
<!DOCTYPE html>
<html th:replace="~{template/layoutExtend/layoutFile :: layout(~{::h3},~{::h4})}"
      xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h3>Hello</h3>
        <h4>I want to be a developer</h4>
    </body>
</html>
実行結果

アップロードされたページソース

実行結果から、レイアウトファイルのデフォルトの部分が置き換えられていることがわかります!!
このような一般的な領域を処理するには、タイムラインを使用します.

以上が私たちのヒントですありがとうございます


この記事では、インフラストラクチャの金ヨンハン氏の「Spring MVC 2編−バックエンドWeb開発のキーテクノロジー」を学び、執筆する.
ソース:https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-2/dashboard
Macpathの追加(環境変数)
[Swift] Memory Safety