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

Contents

-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

<!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>
<!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>
<!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

Recommended Posts

Make a simple CRUD with SpringBoot + JPA + Thymeleaf ⑤ ~ Template standardization ~
Make a simple CRUD with SpringBoot + JPA + Thymeleaf ① ~ Hello World ~
Create a simple CRUD with SpringBoot + JPA + Thymeleaf ④ ~ Customize error messages ~
Create a simple CRUD with SpringBoot + JPA + Thymeleaf ② ~ Screen and function creation ~
Create a simple DRUD application with Java + SpringBoot + Gradle + thymeleaf (1)
[docker] [nginx] Make a simple ALB with nginx
Make a site template easily with Rails
04. I made a front end with SpringBoot + Thymeleaf
Show a simple Hello World with SpringBoot + IntelliJ
A simple CRUD app made with Nuxt / Laravel (Docker)
[Beginner] Try to make a simple RPG game with Java ①
Let's make a simple API with EC2 + RDS + Spring boot ①
Draw screen with Thymeleaf in SpringBoot
Make a digging maze with Ruby2D
Try to make a simple callback
Implement text link with Springboot + Thymeleaf
Make a slideshow tool with JavaFX
Make a Christmas tree with swift
Make a list map with LazyMap
Make a language! (Making a simple calculator ①)
Make a typing game with ruby
Let's make a Christmas card with Processing!
Make a family todo list with Sinatra
Create a simple web application with Dropwizard
Hello world with Java template engine Thymeleaf
[Rails withdrawal] Create a simple withdrawal function with rails
Let's make a smart home with Ruby!
Make a login function with Rails anyway
Implement CRUD with Spring Boot + Thymeleaf + MySQL
Implement simple CRUD with Go + MySQL + Docker
I tried to make a simple game with Javafx ① "Let's find happiness game" (unfinished)