[JAVA] Dessiner un écran avec Thymeleaf dans SpringBoot

Objectif

La dernière fois, j'ai pu afficher la chaîne de caractères sur le navigateur en utilisant @RestController de SpringBoot, donc Cette fois, je vais apprendre à afficher un fichier HTML en utilisant @Controller.

Préparation préalable

Nous allons procéder en supposant qu'il existe déjà un projet Spring Boot. Pour savoir comment créer un projet, veuillez consulter le Spring Quickstart Guide et cet article. est.

1. Faisons un contrôleur!

Je pense que le code source à la fin du guide de démarrage rapide de Spring est le suivant.

DemoApplication.java

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
@RestController
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}

	@GetMapping("/hello")
	public String hello(@RequestParam(value = "name", defaultValue = "World") String name) {
		return String.format("Hello %s!", name);
	}
}

Avec cette implémentation, nous supprimerons les parties inutiles du fichier DemoApplication.java.

DemoApplication.Formulaire rempli de java

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}

}

Créez un dossier controller dans la même hiérarchie que DemoApplication.java. Créez ensuite HelloController.java dans ce dossier et décrivez le processus.

HelloController.java

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {

	@GetMapping("/hello")
	public String hello(Model model) {
		String message = "Hello World from HelloController!!!";
		model.addAttribute("msg", message);
		return "hello";
	}
}

L'annotation de la classe HelloController est @Controller. En définissant @Controller, le fichier modèle écrit par html sera retourné.

Puisque la partie ○○ de return" ○○ " est le nom du fichier html, vous devrez créer hello.html plus tard.

Modèle définit les données à utiliser dans le modèle. La variable de message qui stocke la chaîne de caractères est passée au modèle dans la notation model.addAttribute (" nom de la valeur ", valeur).

Le contrôleur est maintenant terminé!

2. Utilisons Thymeleaf!

Je vais créer la partie View de MVC, mais cette fois j'utiliserai Thymeleaf.

Thymeleaf est un moteur de template qui peut être géré par springboot. La valeur stockée dans la variable côté contrôleur peut être affichée sous forme de fichier HTML. [Tutoriel Thymeleaf] écrit en japonais (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#thymeleaf%E3%81%AE%E7%B4%B9%E4%BB%8B ) Est également disponible!

Modifions maintenant le fichier pom.xml afin que Thymeleaf puisse être utilisé.

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.3.1.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>
  <groupId>com.example</groupId>
  <artifactId>demo</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>demo</name>
  <description>Demo project for Spring Boot</description>

  <properties>
    <java.version>11</java.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-test</artifactId>
      <scope>test</scope>
      <exclusions>
        <exclusion>
           <groupId>org.junit.vintage</groupId>
           <artifactId>junit-vintage-engine</artifactId>
        </exclusion>
      </exclusions>
    </dependency>

    <!--↓ ↓ ↓ ↓ ↓ Ajouté pour utiliser Thymeleaf ↓ ↓ ↓ ↓ ↓-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    

  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>

</project>

3. Créez un fichier HTML pour dessiner l'écran!

Créons hello.html dans src / main / resources / templates.

Le contenu de hello.html est le suivant. N'oubliez pas de définir l'espace de noms thymeleaf dans votre balise html!

hello.html

<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>Spring Boot Lesson</title>
</head>

<body>
  <h1>Hello World sur Thymeleaf! </h1>

  <h1 th:text="${msg}"></h1>
</body>

</html>

Dans la deuxième balise h1, la valeur transmise par le contrôleur est affichée en définissant th: text =" $ {msg} ".

4. Faisons-le!

Je me suis préparé à dessiner un fichier HTML avec @Controller en 1-3, et à dessiner une valeur définie dans Controller avec Thymeleaf dans un fichier HTML. Courons et vérifions.

Entrez la commande suivante dans le terminal et appuyez sur Entrée.

Terminal

$ ./mvnw spring-boot:run

Après avoir attendu environ 2 secondes, lorsque vous accédez à http: // localhost: 8080 / bonjour,

hello.html est dessiné et le msg défini dans Controller s'affiche également correctement.

À la fin

J'ai appris à afficher un fichier HTML en utilisant @Controller. Il existe de nombreuses autres façons d'écrire Thymeleaf, alors j'aimerais écrire un article à un autre moment.

Site de référence

Utilisez le modèle "Thymeleaf" avec Spring Boot https://cloudear.jp/blog/?p=799

Tutorial: Using Thymeleaf (ja) https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#thymeleaf%E3%81%AE%E7%B4%B9%E4%BB%8B