[JAVA] Zeichnen Sie den Bildschirm mit Thymeleaf in SpringBoot

Zweck

Beim letzten Mal konnte ich die Zeichenfolge mit @RestController von SpringBoot im Browser anzeigen Dieses Mal werde ich lernen, wie man eine HTML-Datei mit @Controller anzeigt.

Vorbereitungen

Wir gehen davon aus, dass es bereits ein Spring Boot-Projekt gibt. Informationen zum Erstellen eines Projekts finden Sie in Spring Quickstart Guide und diesem Artikel. ist.

1. Machen wir einen Controller!

Ich denke, der Quellcode, wenn die Spring Quickstart-Anleitung vorbei ist, ist wie folgt.

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);
	}
}

Mit dieser Implementierung werden unnötige Teile in der Datei DemoApplication.java gelöscht.

DemoApplication.Abgeschlossene Form von 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);
	}

}

Erstellen Sie einen Controller-Ordner in derselben Hierarchie wie DemoApplication.java. Erstellen Sie dann "HelloController.java" in diesem Ordner und beschreiben Sie den Prozess.

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";
	}
}

Die Annotation der HelloController-Klasse lautet @Controller. Durch Festlegen von @Controller wird die von HTML geschriebene Vorlagendatei zurückgegeben.

Da der ○○ Teil von return" ○○ " der Name der HTML-Datei ist, müssen Sie später hello.html erstellen.

Modell legt die Daten fest, die in der Vorlage verwendet werden sollen. Die Nachrichtenvariable, in der die Zeichenfolge gespeichert ist, wird in der Notation "model.addAttribute (" Wertname ", Wert)" an die Vorlage übergeben.

Der Controller ist jetzt fertig!

2. Verwenden wir Thymeleaf!

Ich werde den View-Teil von MVC erstellen, aber dieses Mal werde ich Thymeleaf verwenden.

Thymeleaf ist eine Template-Engine, die von springboot verarbeitet werden kann. Der in der Variablen auf der Controllerseite gespeicherte Wert kann als HTML-Datei angezeigt werden. [Thymeleaf Tutorial] in japanischer Sprache (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html#thymeleaf%E3%81%AE%E7%B4%B9%E4%BB%8B) ) Ist auch verfügbar!

Bearbeiten wir nun die Datei pom.xml, damit Thymeleaf verwendet werden kann.

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>

    <!--↓ ↓ ↓ ↓ ↓ Hinzugefügt, um Thymeleaf zu verwenden ↓ ↓ ↓ ↓ ↓-->
    <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. Erstellen Sie eine HTML-Datei zum Zeichnen des Bildschirms!

Lassen Sie uns hello.html in src / main / resources / templates erstellen.

Der Inhalt von hello.html ist wie folgt. Vergessen Sie nicht, den Thymeleaf-Namespace im HTML-Tag zu definieren!

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>Hallo Welt auf Thymeleaf! </h1>

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

</html>

Im zweiten h1-Tag wird der vom Controller übergebene Wert durch Setzen von th: text =" $ {msg} " angezeigt.

4. Lass es uns tun!

Ich habe mich darauf vorbereitet, eine HTML-Datei mit @Controller in 1-3 zu zeichnen und einen in Controller mit Thymeleaf definierten Wert in eine HTML-Datei zu zeichnen. Lass uns rennen und nachsehen.

Geben Sie den folgenden Befehl in das Terminal ein und drücken Sie die Eingabetaste.

Terminal

$ ./mvnw spring-boot:run

Wenn Sie nach ca. 2 Sekunden auf http: // localhost: 8080 / hello zugreifen,

hello.html wird gezeichnet und die in Controller definierte Nachricht wird ebenfalls korrekt angezeigt.

Am Ende

Ich habe gelernt, wie man eine HTML-Datei mit @Controller anzeigt. Es gibt viele weitere Möglichkeiten, Thymeleaf zu schreiben, daher möchte ich zu einem anderen Zeitpunkt einen Artikel schreiben.

Referenzseite

Verwenden Sie die Vorlage "Thymeleaf" mit 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