Installez les extensions suivantes. Puisque Java est utilisé, les fonctions d'extension Java sont collectées Java Extension Pack et les extensions Spring Boot sont collectées. Incluez le pack d'extension Spring Boot (https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack). Désactivez les extensions inutiles si nécessaire.
En installant Spring Boot Tools, vous pouvez utiliser les commandes Spring Boot avec VS Code.
--Exécuter Spring Initializr: Générer un projet Maven dans la palette de commandes (créer des projets de manière interactive)
--Sélectionnez Java
Entrez le nom du package (par exemple com.example) --Saisissez le nom du projet
Sélectionnez la version Spring Boot --Sélectionnez une dépendance
Structure du répertoire
Structure du répertoire
src/
└ main/
│ ├ java/
│ │ └ com/
│ │ └ example/
│ │ └ {Nom de l'application}/
│ │ └ DemoApplication.java
│ └ resource/
│ ├ static/
│ └ templates/
└ test/
target/
.gitignore
mvnw
mvnw.cmd
pom.xml
--Créez IndexController.java dans le répertoire src / main / java / com / example / {nom de l'application} / controller
IndexController.java
package com.example.{Nom de l'application}.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";
}
}
--Créez index.html dans le répertoire src / main / resources / templates
index.html
<!DOCTYPE html>
<html>
<head>
<title>domicile</title>
</head>
<body>
<div>
<p>contenu</p>
</div>
</body>
</html>
--Sélectionnez `Déboguer> Démarrer le débogage``
--Sélectionnez java dans la sélection d'environnement (première fois uniquement)
--launch.json est généré (première fois seulement)
Déboguer> Démarrer le débogage (première fois uniquement)--Accès http: // localhost: 8080 /
Ajoutez thymeleaf-layout-dialect à la dépendance pour utiliser la fonction Layout Dialect de thymeleaf, qui est le moteur de template de Spring Boot. Ajoutez également bootstrap et jquery.
--Ajout du contenu suivant à 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>
--Créez 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>
--Créez 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="/">Pratique du Spring Boot</a>
</div>
<div class="collapse navbar-collapse" id="navigation">
<p class="navbar-text navbar-right">Se connecter</p>
</div>
</div>
</nav>
</body>
</html>
--Créez 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>
--Modifiez src / main / resources / templates / index.html comme suit.
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>domicile</title>
</head>
<body>
<div layout:fragment="content">
<p>contenu</p>
</div>
</body>
</html>
En saisissant ce qui suit dans layouts / header.html,
header.html(partie)
<div layout:fragment="header"><!--Contenu--></div>
Les balises suivantes entrées dans layout.html sont remplacées.
layout.html(partie)
<div layout:replace="~{layouts/header::header}"></div>
th: include au lieu de th: replace, l'intérieur de la balise de layout.html est réécrit.La description de layouts / layout.html peut être reflétée en écrivant ce qui suit sur le côté de la page individuelle (index.html) qui lit la mise en page.
index.html(partie)
<html
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layouts/layout}">
Recommended Posts