Installieren Sie die folgenden Erweiterungen. Da Java verwendet wird, werden Java-Erweiterungsfunktionen Java Extension Pack und Spring Boot-Erweiterungen erfasst. Fügen Sie das Spring Boot Extension Pack hinzu (https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack). Deaktivieren Sie unnötige Erweiterungen nach Bedarf.
Durch die Installation der Spring Boot Tools können Sie Spring Boot-Befehle mit VS-Code verwenden.
--Wählen Sie Java
--Verzeichnisaufbau
Verzeichnisaufbau
src/
└ main/
│ ├ java/
│ │ └ com/
│ │ └ example/
│ │ └ {Anwendungsname}/
│ │ └ DemoApplication.java
│ └ resource/
│ ├ static/
│ └ templates/
└ test/
target/
.gitignore
mvnw
mvnw.cmd
pom.xml
--Erstellen Sie IndexController.java im Verzeichnis src / main / java / com / example / {Anwendungsname} / controller
IndexController.java
package com.example.{Anwendungsname}.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";
}
}
--Erstellen Sie index.html im Verzeichnis src / main / resources / templates
index.html
<!DOCTYPE html>
<html>
<head>
<title>Zuhause</title>
</head>
<body>
<div>
<p>Inhalt</p>
</div>
</body>
</html>
--Wählen Sie `Debug> Start Debug``
--Wählen Sie "Java" in der Umgebungsauswahl (nur beim ersten Mal)
--launch.json wird generiert (nur beim ersten Mal)
--Wählen Sie erneut `Debug> Start Debug`` (nur beim ersten Mal)
Fügen Sie der Abhängigkeit thymeleaf-layout-dialect hinzu, um die Layout Dialect-Funktion von thymeleaf zu verwenden, der Vorlagen-Engine von Spring Boot. Fügen Sie auch bootstrap und jquery hinzu.
<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>
--Erstellen Sie 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>
--Erstellen Sie 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 üben</a>
</div>
<div class="collapse navbar-collapse" id="navigation">
<p class="navbar-text navbar-right">Einloggen</p>
</div>
</div>
</nav>
</body>
</html>
--Erstellen Sie 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>
src / main / resources / templates / index.html wie folgt.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>Zuhause</title>
</head>
<body>
<div layout:fragment="content">
<p>Inhalt</p>
</div>
</body>
</html>
Durch Eingabe der folgenden Angaben in layouts / header.html,
header.html(Teil)
<div layout:fragment="header"><!--Inhalt--></div>
Die folgenden in layout.html eingegebenen Tags werden ersetzt.
layout.html(Teil)
<div layout:replace="~{layouts/header::header}"></div>
Die Beschreibung von layouts / layout.html kann durch Schreiben der folgenden Informationen auf die Seite der einzelnen Seiten (index.html), die das Layout liest, wiedergegeben werden.
index.html(Teil)
<html
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout}">
Recommended Posts