SpringBoot에서 Thymeleaf를 사용하여 화면 그리기

14821 단어 신인 프로그래머 응원 spring-boot 프로그래밍 초보자 자바 Thymeleaf

목적

이전에는 SpringBoot의 을 사용하여 문자열을 브라우저에서 표시 할 수 있었으므로,
이번에는 을 사용하여 HTML 파일을 표시하는 방법을 배우려고합니다.

사전 준비

SpringBoot의 프로젝트가 이미 있다는 것을 전제로 진행하고 있습니다.
프로젝트를 만드는 방법은 Spring Quickstart Guide 이나 이 기사 를 참고해 주시면 감사하겠습니다.

1.Controller를 만들자!

Spring Quickstart Guide가 끝났을 때의 소스 코드는 다음과 같다고 생각합니다.

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

이번의 구현에 수반해, DemoApplication.java 파일내의 불필요하게 되는 부분을 삭제합니다.

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

}

DemoApplication.java와 동일한 계층 구조에 controller 폴더를 만듭니다.
그리고 그 폴더 안에 HelloController.java 를 작성해 처리를 기술합니다.

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

HelloController 클래스의 어노테이션은 입니다.
그렇다면 html로 작성된 템플릿 파일을 반환합니다.
return "〇〇" 의 〇〇 의 부분이 html 파일의 이름이 되므로, 나중에 hello.html 를 작성하지 않으면 안 되는 것이 됩니다.

Model은 템플릿에서 사용할 데이터를 설정합니다.model.addAttribute("値の名前", 値) 라는 쓰는 방법으로 문자열이 저장된 message 변수를 템플릿에 전달합니다.

이제 Controller가 완성되었습니다!

2.Thymeleaf를 사용할 수 있도록!

MVC의 View 부분을 작성해 나가는데, 이번에는 Thymeleaf를 사용합니다.

Thymeleaf는 springboot로 처리 할 수있는 템플릿 엔진입니다.
Controller측에서 변수에 격납한 값을 HTML파일로 표시할 수가 있습니다.
일본어로 쓰여진 Thymeleaf 튜토리얼 도 있습니다!

이제 Thymeleaf를 사용할 수 있도록 pom.xml 파일을 편집합니다.

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>

    <!-- ↓↓↓↓↓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. 화면을 그리는 HTML 파일을 만들자!

src/main/resources/templates 안에 hello.html을 만듭니다.

hello.html의 내용은 다음과 같습니다.
HTML 태그에 thymeleaf의 네임 스페이스를 정의하는 것을 잊지 마세요!

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>ThymeleafでHello World! </h1>

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

</html>