[Spring Boot] Thymeleafの組み込み

2019.07.02

ここでは、STSを使用して新規プロジェクトを作成し、まっさらな状態からThymeleafでサンプルページを表示するまでの手順となります。

前回の記事の続きとなります。

■ 環境

Spring Boot

Spring Tool Suite 4 (STS) 4.4.3

■ pomへの追記

最初に、pom.xml ファイルの <dependencies> タグの中に以下の行を追加します。

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

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

■ テンプレートファイルの設置

[ src/main/resources/templates ]階層に以下のファイルを設置します。

ファイル名は、この場合「hoge.html」とします。

今後、HTMLテンプレートは必ずこのディレクトリ内に設置する事になります。

・hoge.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>テスト ページ</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
test
<p th:text="${msg}" /> 
</body>
</html>

<!DOCTYPE HTML>

<head>

<title>テストページ</title>

</head>

<body>

test

</body>

</html>

■ Controllerの設置

[ src/main/java/app/controllers ] 階層内に以下を設置。

なお、[ app/controllers ]の部分はなんでもいい。

・TestController.java

package jp.co.howagiken.plando.controllers;

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

@Controller
@RequestMapping("/test")
public class TestController {


　　@RequestMapping(path = { "/", "/index" }, method = {RequestMethod.GET})
　　public String index(Model model) {
　　　　　　model.addAttribute("msg", "初めての表示");
　　　　　　return "hoge";
　　}
}

package jp.co.howagiken.plando.controllers;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

@Controller

@RequestMapping("/test")

public class TestController {

　　@RequestMapping(path = { "/", "/index" }, method = {RequestMethod.GET})

　　public String index(Model model) {

　　　　　　model.addAttribute("msg", "初めての表示");

　　　　　　return "hoge";

　　}

@RequestMappingによって、URLが決定されます。

@Controller下部にある　@RequestMapping(“/test”)、およびメソッドの上部にある @RequestMapping(path = { “/”, “/index” } ) の２つを組み合わせ、http://localhost:8080/test/index、もしくはhttp://localhost:8080/test/というURLにアクセスすれば、このindex()メソッドが呼び出されることを表しています。

さらに、index()メソッドのreturnで “hoge” を指定しています。これでテンプレートの hoge.html を使用します。