Spring BootにThymeleafの設定を追加する[Eclipse]
内容
Spring BootにThymeleafを追加する。
(前回作成したMavenにSpring Bootの設定を追加したものに追加)
Thymeleaf の設定追加
- pom.xmlに「spring-boot-starter-thymeleaf」を追加
pom.xml
<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> <groupId>com.xxxxx</groupId> <artifactId>apr</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>jar</packaging> <name>apr</name> <url>http://maven.apache.org</url> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.3.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</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> </dependency> <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>
コントローラークラスの変更内容
- アノテーション変更「@RestController」→「@Controller」
(@Controllerにするとデフォルトの処理の戻り値が画面名になる) - 文字列(レスポンスボディ)を返す処理に「@ResponseBody」を付ける
- 画面名を返却する処理を追加(index)
AppController.java
package com.xxxxx.apr; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; @Controller public class AppController { @RequestMapping("/hello") @ResponseBody private String hello(){ return "Hello World!"; } @RequestMapping("/") private String index(){ return "index"; } }
画面(html)の作成
- src/main/resources/templates 配下にHTMLファイルを格納
index.html
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>index</title> <meta charset="UTF-8" /> </head> <body> <h3>INDEX画面</h3> </body> </html>
確認
WEBアプリ起動
- App.javaを起動
- 起動完了
ブラウザで確認
- URLに「http://localhost:8080」を入力し画面が表示されたOK
その他
jsやcssのようにファイルを格納するには
src/main/resources/static 配下に格納する
例)
src/main/resources/static/js/index.js
src/main/resources/static/css/index.css