Spring Boot 에 HTML에 Thmeleaf 넣기

Spring

Spring Boot 에 HTML에 Thmeleaf 넣기

기록만이살길 2020. 6. 15. 23:51

1. 프로젝트 생성

프로젝트를 생성합니다.

2. 메이븐

spring-boot-starter-web및 spring-boot-starter-thymeleaf 먼저 두가지 의존성을 넣습니다.

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
         http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <artifactId>web-thymeleaf</artifactId>
    <packaging>jar</packaging>
    <name>Spring Boot Web Thymeleaf Example</name>
    <description>Spring Boot Web Thymeleaf Example</description>
    <version>1.0</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.2.RELEASE</version>
    </parent>

    <properties>
        <java.version>1.8</java.version>
        <bootstrap.version>4.2.1</bootstrap.version>
    </properties>

    <dependencies>

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

        <!-- thymeleaf -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!-- test -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- hot swapping, disable cache for template, enable live reload -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>

        <!-- Optional, for bootstrap -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>${bootstrap.version}</version>
        </dependency>

    </dependencies>
    <build>
        <plugins>

            <!-- Package as an executable jar/war -->
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <addResources>true</addResources>
                </configuration>
            </plugin>

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>2.22.0</version>
            </plugin>

        </plugins>

    </build>
</project>

3. Developer Tools

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <optional>true</optional>
</dependency>

이렇게 spring-boot-devtools하면 캐시를 비활성화하고 핫 스와핑을 활성화하여 개발자가 항상 새로고침없이 HTML에 마지막 변경 사항을 볼 수 있습니다. 개발에 좋습니다. 이것을 읽으십시오 – Spring Boot – 개발자 도구 Thymeleaf 템플릿 또는 속성 파일을 수정하고 브라우저를 새로 고침하여 변경 사항이 즉시 적용되는지 확인하십시오.

Eclipse IDE의 경우와 잘 통합되어 spring-boot-devtools

있습니다.
Intellij IDEA의 경우 추가 단계가 필요합니다.이 다시로드 정적 파일이 작동하지 않음을 읽으십시오

4. 스프링 부트 + MVC

4.1 간단한 컨트롤러.

WelcomeController.java

package com.mkyong.controller;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.Arrays;
import java.util.List;

@Controller
public class WelcomeController {

    // inject via application.properties
    @Value("${welcome.message}")
    private String message;

    private List<String> tasks = Arrays.asList("a", "b", "c", "d", "e", "f", "g");

    @GetMapping("/")
    public String main(Model model) {
        model.addAttribute("message", message);
        model.addAttribute("tasks", tasks);

        return "welcome"; //view
    }

    // /hello?name=kotlin
    @GetMapping("/hello")
    public String mainWithParam(
            @RequestParam(name = "name", required = false, defaultValue = "")
            String name, Model model) {

        model.addAttribute("message", name);

        return "welcome"; //view
    }

}

4.2 클래스를 만들고로 주석을 답니다 @SpringBootApplication. IDE에서이 클래스를 실행하여 전체 웹 애플리케이션을 시작하십시오.

StartWebApplication.java

package com.mkyong;

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

@SpringBootApplication
public class StartWebApplication {

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

}

부

5. Thymeleaf + static file

참고 스프링 맵핑 서비스 정적 컨텐츠 제공 을읽고 자원 맵핑을 이해하십시오.

5.1 Thymeleaf 템플릿 파일의 경우 src/main/resources/templates/

src / main / resources / templates / welcome.html

<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Spring Boot Thymeleaf Hello World Example</title>

    <link rel="stylesheet" th:href="@{webjars/bootstrap/4.2.1/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/main.css}"/>

</head>

<body>

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Mkyong.com</a>
</nav>

<main role="main" class="container">

    <div class="starter-template">
        <h1>Spring Boot Web Thymeleaf Example</h1>
        <h2>
            <span th:text="'Hello, ' + ${message}"></span>
        </h2>
    </div>

    <ol>
        <li th:each="task : ${tasks}" th:text="${task}"></li>
    </ol>

</main>
<!-- /.container -->

<script type="text/javascript" th:src="@{webjars/bootstrap/4.2.1/js/bootstrap.min.js}"></script>
</body>
</html>

5.2 스프링 부트 공통 애플리케이션 속성

src / main / resources / application.properties

welcome.message: Mkyong

spring.thymeleaf.cache=false

5.3 CSS 또는 JS와 같은 정적 파일의 경우 src/main/resources/static/

src / main / resources / static / css / main.css

body {
  padding-top: 5rem;
}
.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}

h1{
    color:#0000FF;
}

h2{
    color:#FF0000;
}

6. 단위 테스트

MockMvc Spring MVC 컨트롤러를 테스트합니다.

WelcomeControllerTest.java

package com.mkyong;

import com.mkyong.controller.WelcomeController;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.autoconfigure.web.servlet.WebMvcTest;
import org.springframework.test.context.junit4.SpringRunner;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.MvcResult;
import org.springframework.test.web.servlet.ResultActions;
import org.springframework.web.servlet.ModelAndView;

import java.util.Arrays;
import java.util.List;

import static org.hamcrest.Matchers.containsString;
import static org.hamcrest.Matchers.is;
import static org.hamcrest.core.IsEqual.equalTo;
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;

@RunWith(SpringRunner.class)
@WebMvcTest(controllers = WelcomeController.class)
public class WelcomeControllerTest {

    @Autowired
    private MockMvc mockMvc;

    List<String> expectedList = Arrays.asList("a", "b", "c", "d", "e", "f", "g");

    @Test
    public void main() throws Exception {
        ResultActions resultActions = mockMvc.perform(get("/"))
                .andExpect(status().isOk())
                .andExpect(view().name("welcome"))
                .andExpect(model().attribute("message", equalTo("Mkyong")))
                .andExpect(model().attribute("tasks", is(expectedList)))
                .andExpect(content().string(containsString("Hello, Mkyong")));

        MvcResult mvcResult = resultActions.andReturn();
        ModelAndView mv = mvcResult.getModelAndView();
        //
    }

    // Get request with Param
    @Test
    public void hello() throws Exception {
        mockMvc.perform(get("/hello").param("name", "I Love Kotlin!"))
                .andExpect(status().isOk())
                .andExpect(view().name("welcome"))
                .andExpect(model().attribute("message", equalTo("I Love Kotlin!")))
                .andExpect(content().string(containsString("Hello, I Love Kotlin!")));
    }

}

7. 데모

$ mvn spring-boot:run

: Tomcat initialized with port(s): 8080 (http)
: Starting service [Tomcat]
: Starting Servlet engine: [Apache Tomcat/9.0.14]

: Tomcat started on port(s): 8080 (http) with context path ''
 Started StartWebApplication in 1.858 seconds (JVM running for 2.222)

URL = http://localhost:8080

URL = http://localhost:8080/hello?name=abc

8. 실행 가능한 JAR 작성

배포를 위해 일반 Maven 패키지만으로 실행 가능한 JAR 파일을 만듭니다.

$ mvn clean package
$ java -jar target\web-thymeleaf-1.0.jar

소스 코드 다운로드

$ clone https://github.com/mkyong/spring-boot.git

$ cd web-thymeleaf$ mvn spring-boot : run

참고

https://mkyong.com/spring-boot/spring-boot-hello-world-example-thymeleaf/

'Spring' 카테고리의 다른 글

스프링 부트 @Async 비동기 예제 (0)	2020.06.16
spring boot custom properties만들기 (0)	2020.06.16
RestTemplate을 통해 파일 업로드하기 (0)	2020.06.15
RestTemplate Interceptor활용하기 (0)	2020.06.15
ErrorHandling 을 통한 RestTemplate 공통 에러처리 (1)	2020.06.14

현재글Spring Boot 에 HTML에 Thmeleaf 넣기

기록만이살길