Make a simple CRUD with SpringBoot + JPA + Thymeleaf ⑤ ~ Template standardization ~

-Continued from Last time --Create a simple CRUD app with Spring Boot --This time, we will refactor the common parts of Thymeleaf.

Check the current situation

--So far, the following 4 html files have been created.

src/main/resources/templates
└── players
    ├── edit.html
    ├── index.html
    ├── new.html
    └── show.html

--The contents of the head tag are almost the same in all four files as shown below. --The only difference is the title

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>XXXX - baseball</title>
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
  </head>
  <body>
    <!--This depends on the page-->
  </body>
</html>

--If you add new CSS or JavaScript loading or add meta tags, you need to make the same modifications to all files, which is not easy to maintain. --So I'll pull out the common part and modify it so that it's used from all files

procedure

Add dependencies (only for Spring Boot 2 series)

--Add library dependencies to pom.xml for maven and build.gradle for gradle --It works even if it is not Spring Boot 1 series

`pom.xml`


<dependency>
  <groupId>nz.net.ultraq.thymeleaf</groupId>
  <artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

`build.gradle`


compile('nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect')

Creating a common file

--Create a file called layout.html in src / main / resources / templates and describe the following contents

<!DOCTYPE html>
<!-- ① -->
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
  <head>
    <meta charset="utf-8" />
    <!-- ② -->
    <title layout:title-pattern="$DECORATOR_TITLE - $CONTENT_TITLE">baseball</title>
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
  </head>
  <body>
    <!-- ③ -->
    <div layout:fragment="content"></div>
  </body>
</html>

-①: The difference from the previous files is that the following description has been added. - xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" --By adding this description, it will be possible to handle it as a common file. ――②: title describes the correspondence because you want to change it for each page. --The title defined on each page is assigned to $ DECORATOR_TITLE --The title defined in the common file (this file) is assigned to $ CONTENT_TITLE. --In the case of this example, the title will be set in the following format. --Title of each page --baseball -③: By adding the mark <div layout: fragment =" content "> </ div>, you can replace the content of each page with this part.

Use of common files

--First, modify src / main / resources / templates / players / index.html

<!DOCTYPE html>
<!-- ① -->
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
  <head>
    <!-- ② -->
    <title>Listing Players</title>
  </head>
  <body>
    <!-- ③ -->
    <div class="container" layout:fragment="content">
      <h1>Listing Players</h1>
      <!--Omitted because it is long-->
    </div>
  </body>
</html>

--①: The following two descriptions have been added. - A: xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" - B: layout:decorator="layout" --A is the same as the common file, and by writing this, you can use the common file. --B specifies the common file to use -The right side of = matches the file name excluding the extension of the common file --For example, if the common file is in template / sample / common.html, the description of B is as follows. - layout:decorator="sample/common" --SpringBoot2 people can work as it is, but according to Official sample, write as follows. - layout:decorate="~{sample/common}" -②: The content of the head tag is only title --Since reading css etc. is done with a common file, all are deleted --Title is passed here because it also sets the content unique to each page. --In this example, the title is as follows when combined with the title of the common file. - Listing Players - baseball --If there is content you want to describe in the head tag only on this page, you can define it by adding it to the content of the common file by describing it here. --③: By setting layout: fragment =" content ", you can replace the html below this description with the part described as layout: fragment =" content " in the common file.

Make similar modifications to other files

src/main/resources/templates/players/new.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
  <head>
    <title>New Player</title>
  </head>
  <body>
    <div class="container" layout:fragment="content">
      <!--Omitted because it is long-->
    </div>
  </body>
</html>

src/main/resources/templates/players/edit.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
  <head>
    <title>Editing Player</title>
  </head>
  <body>
    <div class="container" layout:fragment="content">
      <!--Omitted because it is long-->
    </div>
  </body>
</html>

src/main/resources/templates/players/show.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout">
  <head>
    <title>Show Player</title>
  </head>
  <body>
    <div class="container" layout:fragment="content">
      <!--Omitted because it is long-->
    </div>
  </body>
</html>

Operation check

--OK if you do the same operation as before