Install the following extensions. Since Java is used, Java extension functions are collected Java Extension Pack and Spring Boot extensions are collected. Include the Spring Boot Extension Pack (https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack). Disable unnecessary extensions as needed.
By installing Spring Boot Tools, you can use Spring Boot commands in VS Code.
--Execute Spring Initializr: Generate a Maven Project in the command palette (create the project interactively)
--Select Java
--Enter the package name (eg com.example)
--Enter the project name
--Select Spring Boot version
--Select a dependency
- web
- thymeleaf
--Select the save destination of the project
--Directory structure
Directory structure
src/
└ main/
│ ├ java/
│ │ └ com/
│ │ └ example/
│ │ └ {Application name}/
│ │ └ DemoApplication.java
│ └ resource/
│ ├ static/
│ └ templates/
└ test/
target/
.gitignore
mvnw
mvnw.cmd
pom.xml
--Create IndexController.java in the src / main / java / com / example / {application name} / controller directory
IndexController.java
package com.example.{Application name}.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class IndexController {
@RequestMapping("/")
public String index(Model model) {
model.addAttribute("msg", "Hello");
return "index";
}
}
--Create index.html in the src / main / resources / templates directory
index.html
<!DOCTYPE html>
<html>
<head>
<title>home</title>
</head>
<body>
<div>
<p>content</p>
</div>
</body>
</html>
--Select `Debug> Start Debug``
--Select java in the environment selection (first time only)
--launch.json is generated (first time only)
--Again, select Debug> Start Debugging (first time only)
--Access http: // localhost: 8080 /
Add thymeleaf-layout-dialect to the dependency to use the Layout Dialect function of thymeleaf, which is the template engine of Spring Boot. Also add bootstrap and jquery.
--Added the following contents to pom.xml
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>1.12.4</version>
</dependency>
--Create src / main / resources / template / layouts / layout.html.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title layout:title-pattern="$CONTENT_TITLE | $LAYOUT_TITLE">Thymeleaf de layout</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" media="all" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
<link rel="stylesheet" media="all" th:href="@{/css/style.css}" />
</head>
<body>
<div layout:replace="~{layouts/header::header}"></div>
<div id="content" class="clearfix">
<div class="container">
<div layout:fragment="content" th:remove="tag"></div>
</div>
</div>
<div layout:replace="~{layouts/footer::footer}"></div>
<!-- scripts -->
<script type="text/javascript" th:src="@{/webjars/jquery/1.12.4/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
</body>
</html>
--Create src / main / resources / template / layouts / header.html.
header.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
<nav class="navbar navbar-default" layout:fragment="header">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Spring Boot practice</a>
</div>
<div class="collapse navbar-collapse" id="navigation">
<p class="navbar-text navbar-right">Login</p>
</div>
</div>
</nav>
</body>
</html>
--Create src / main / resources / template / layouts / footer.html.
footer.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
<div id="footer" layout:fragment="footer">
<footer class="text-center">
<small class="text-muted">Copyright(C) koukibuu3, All rights reserved.</small>
</footer>
</div>
</body>
</html>
--Modify src / main / resources / templates / index.html as follows.
index.html
<!DOCTYPE html>
<html
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout}">
<head>
<title>home</title>
</head>
<body>
<div layout:fragment="content">
<p>content</p>
</div>
</body>
</html>
By entering the following in layouts / header.html,
header.html(part)
<div layout:fragment="header"><!--Contents--></div>
The following tags entered in layout.html are replaced.
layout.html(part)
<div layout:replace="~{layouts/header::header}"></div>
th: include instead of th: replace, the inside of the tag of layout.html is rewritten.By writing the following on the individual page side (index.html) that reads the layout, the description of layouts / layout.html can be reflected.
index.html(part)
<html
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout}">
Recommended Posts