Help us understand the problem. What is going on with this article?

Spring Boot 1.3.5 + Thymeleaf + PostgreSQL 9.6 導入メモ (1)

More than 3 years have passed since last update.

はじめに

記事を書いていたら思いのほか長くなったので、

の2つに分割しました。

環境

  • JDK 8u91
  • Spring Boot 1.3.5
  • PostgreSQL 9.6
  • NetBeans 8.1
  • Maven 3.0.5 (NetBeansバンドル)

Spring Boot導入~Hello World

NetBeans上で新規プロジェクト作成→カテゴリ「Maven」を選択し、適当にプロジェクトを作る。
今回は以下のように設定した。

  • プロジェクト名: SpringBootSample
  • グループID: com.example
  • パッケージ: com.example.springbootsample
  • その他の項目は既定値のまま

プロジェクトを作成したら、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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.example</groupId>
    <artifactId>SpringBootSample</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>jar</packaging>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <java.version>1.8</java.version>  <!-- Javaのバージョンを明記 -->
    </properties>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.3.5.RELEASE</version>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>
</project>

次に、com.example.springbootsample.controllerパッケージを作成し、その中にSampleController.javaを作成する。

SampleController.java
package com.example.springbootsample.controller;

import org.springframework.stereotype.*;
import org.springframework.web.bind.annotation.*;

@Controller
@RequestMapping("/")
public class SampleController {
    @RequestMapping(method = RequestMethod.GET)
    @ResponseBody
    String get() {
        return "Hello, Spring Boot!";
    }
}

@Controllerアノテーションを付与されたクラスはコントローラとして動作し、@RequestMappingで設定された条件に基づいてイベントのハンドリングをする。
なお、@ResponseBodyアノテーションを付与すると、戻り値として直接コンテンツを返すことができる。
つまり、上記のコントローラは、/へのGETリクエストに対し"Hello, Spring Boot!"という文字列を返す。

また、これとは別にエントリポイント用のクラスcom.example.springbootsample.Applicationを作成する。

Application.java
package com.example.springbootsample;

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

@SpringBootApplication
public class Application {
    public static void main(String[] args) throws Exception {
        SpringApplication.run(Application.class, args);
    }
}

ここまで終わったら一度実行してみる。
Spring Bootのlisten portはTomcatのデフォルト設定と同じく8080番である(設定により変更可能)。
Webブラウザ等を用いてhttp://localhost:8080/にアクセスし、"Hello, Spring Boot!"と表示されることを確認する。

Thymeleaf (テンプレートエンジン)導入

このままでは表示するコンテンツを全てコントローラで作成しなければならず、非効率的かつ大変である。
そこで、ビュー部分にはThymeleafというテンプレートエンジンを導入する。
pom.xmlの依存関係に下記を追加する。

pom.xml
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

また、src/main/resources/application.ymlを作成し、以下を記述する。
(src/main/resoucesディレクトリはデフォルトでは存在しないため、手動で作成する必要あり)

src/main/resources/application.yml
spring:
    thymeleaf:
        cache: false

これでThymeleafのキャッシュが無効化される。

次に、テンプレートとなるsrc/main/resources/templates/sample.htmlを用意する。

sample.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Hello, Spring Boot!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <p th:text="${message}"></p>
        <p>using Thymeleaf</p>
    </body>
</html>

ポイントは8行目のth:text="${message}"である。
このようにすることで、コントローラからビューに値を渡すことができる。
なお、NetBeansでThymeleafを使う場合には、xmlns="http://www.w3.org/1999/xhtml"を指定しないとエラーだらけでえらーいことになる。

最後に、SampleControllerに上で作ったビューに対するマッピング設定を記述する。

SampleController.java
package com.example.springbootsample.controller;

import org.springframework.stereotype.*;
import org.springframework.ui.Model;    // 追加
import org.springframework.web.bind.annotation.*;

@Controller
@RequestMapping("/")
public class SampleController {
    @RequestMapping(method = RequestMethod.GET)
//    @ResponseBody // このアノテーションをつけるとレンダリングが行われなくなるので注意
    String get(Model model) {
        model.addAttribute("message", "Hello, Spring Boot!");   // パラメタを渡す
        return "sample"; // 使用するテンプレートの名前を指定する
    }
}

ここまで書いたら再び実行する。http://localhost:8080/にアクセスし、正しくページが表示されればOK

フォームを利用した値の送受信

ここまで決め打ちの文章しか表示していなかったので、そろそろ自分で入力したい。ということで、フォームを利用して値を送受信する。
手始めに、先ほど作成したビューにフォームを追加する。

sample.html
<!-- 前略 -->
<form method="POST" th:action="@{/}">
    <label for="name">Your name: </label><input type="text" name="name" />
    <label for="age">Your age: </label><input type="text" name="age" />
    <input type="submit" value="submit" />
</form>
<!-- 後略 -->

これで、名前と年齢をPOSTできるようになった。
あとはこれをコントローラで受け取るだけだが、そのための準備として、このフォームに対応するクラスを作成する。
com.example.springbootsample.controllerの中にPersonFormクラスを定義する。

PersonForm.java
package com.example.springbootsample.controller;

public class PersonForm {
    private String name;
    private Integer age;
    // getter/setter略
}

SampleControllerを修正し、POSTされたフォームの値を取得する。
コントローラは、PersonFormインスタンス経由でフォームの値を取得する。
このインスタンスを生成する部分はアノテーション1つで良い感じにやってくれる。

SampleController.java
// 前略
public class SampleController {
    @RequestMapping(method = RequestMethod.GET)
    String get(Model model) {
        model.addAttribute("message", "Hello, Spring Boot!");
        return "sample";
    }

    @RequestMapping(method = RequestMethod.POST)
    String post(@ModelAttribute PersonForm personForm, Model model) {
        String name = personForm.getName();
        Integer age = personForm.getAge();
        model.addAttribute("message", "your name: " + name + ", your age: " + age);
        return "sample";
    }
}

続き

http://qiita.com/sashim1343/items/d37d2336f3625b86c141

参考

http://projects.spring.io/spring-boot/
http://www.riem.nagoya-u.ac.jp/~ohta/etc/springboot-1.html
http://d.hatena.ne.jp/hagi44/20130608/1370667799
http://blog.okazuki.jp/entry/2015/07/05/093915

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした