Eclipse で Spring Boot + Thymeleaf . (その１）

18160 ワード
spring-boot Thymeleaf Thymeleaf テキストリンク

はじめに

Spring Boot + Thymeleaf のサンプルプログラムをEclipseで作ってみよう。

開発環境

Windows 10 Pro 1709(16299.192)
Eclipse pleiades-4.7.3
java 1.8.0_162
spring-boot-2.0.2.RELEASE
thymeleaf-3.0.9.RELEASE

手順

１．Eclipse Pleiades All in One のインストール
のちのち他言語でも使いたいので、フルバージョンをインストールします。
　　「Ultimate」：Java以外でも開発可能（C/C++、Python...）
　　「Full Edition」：コンパイラや実行環境を含む

２．STSのインストール

３．プロジェクトの作成

４．サンプルプログラム"従業員表示"作成
　　　M（Model）: Form (Javaクラス)
　　　C（Controller） : Controller (Javaクラス)
　　　V（View） : html(template)

５．動作確認

１．Eclipse Pleiades All in One のインストール

URL

http://mergedoc.osdn.jp/

インストール手順

1. 「Eclipse 4.7 Oxygen」クリック

2. ミラー・サーバを変更する ( 3.でタイムアウトしてしまう場合があるので。)

3. Windws 64bitの「Ultimate」「Full Edition」をクリック

4.ダウンロードファイルを作業フォルダーに解凍する

２．STSのインストール

1. 「eclipse.exe」をダブルクリック

2. 「起動」ボタンをクリック

3. Pythonは使用しないので「選択をすべて解除」ボタンをクリックし、「選択された変更を適用」ボタンをクリック

4. 「ヘルプ」「Eclipseマーケットプレース」メニュ選択

5. 「検索」に"STS"と入力し、Enterキー押下後、「インストール」ボタンクリック

6. 「確認」ボタンクリック

7. 「使用条件の条項に同意します」を選択し、「完了」ボタンクリック

8. 「インストール」ボタンクリック

9. 「今すぐ再起動」ボタンクリック

３．プロジェクトの作成

３－１．Springパースペクティブを開く

1. 「ウィンドウ」「パースペクティブ」「パースペクティブを開く」「その他」メニュ選択

2. 「Spring」を選択し「開く」ボタンクリック

3. 「ようこそ」を閉じ、「C/C++」「PHP]「Python」「Perl」「Ruby」も閉じておく

4. Springをクリックし、Springパースペクティブを開く

３－２．Springプロジェクト作成

1. パッケージ・エクスぷローラー上の右メニュで「新規」「Springスターター・プロジェクト」メニュ選択

2. プロジェクト名、その他を入力し、「次へ」ボタンクリック

3. 依存関係の選択「DevTools」「Lombok」「Thymeleaf」「Web」を選択し、「完了」クリック（「JPA」「PostgreSql」は後ほどDBのサンプルプログラム作成で使用。）

4. 「JPA」「PostgreSql」を選択した場合は、application.propertiesに以下を追加

application.properties
spring.datasource.url=jdbc:postgresql://localhost:5432/postgres
spring.datasource.username=postgres
spring.datasource.password=admin
spring.datasource.driverClassName=org.postgresql.Driver

# disable driver's feature detection
spring.jpa.properties.hibernate.temp.use_jdbc_metadata_defaults = false

# without detection you have to set the dialect by hand
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.PostgreSQLDialect

４．サンプルプログラム"従業員表示"作成

４－１．Model（Form）作成

1. 「ファイル」->「新規」->「クラス」メニュ選択

2. 「Javaパッケージ」と「クラス名」を入力し、「完了」ボタンクリック

3. コード作成

EmployeeForm.java
package com.example.demo;

import lombok.Data;

@Data
public class EmployeeForm {

    private String id            = "";
    private String name          = "";
    private String email         = "";

}

４－２．Controller作成

1. 「ファイル」->「新規」->「クラス」メニュ選択

2. 「Javaパッケージ」と「クラス名」を入力し、「完了」ボタンクリック

3. コード作成

EmployeeController.java
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class EmployeeController {

    @RequestMapping("/show")
    public ModelAndView show(ModelAndView mav) {
        EmployeeForm form = new EmployeeForm();
        form.setId("1");
        form.setName("Ken");
        form.setEmail("[email protected]");

        mav.addObject("employeeForm", form);
        mav.setViewName("employee");

        return mav;
    }

}

４－３．View（HTML）作成

1. 「ファイル」->「新規」->「その他」メニュ選択

2. 「HTMLファイル」を選択し、「次へ」ボタンクリック

4. 「フォルダー」と「ファイル名」を入力し、「完了」ボタンクリック

5. コード生成

employee.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello, Spring Boot!</title>
</head>
<body>
<h1>Hello, Spring Boot!</h1>

<form th:action="@{/show}" th:object="${employeeForm}" method="post">
    <table>
        <caption>
            <strong>従業員検索</strong>
        </caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>EMAIL</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td th:text="*{id}"></td>
                <td th:text="*{name}"></td>
                <td th:text="*{email}"></td>
            </tr>
        </tbody>
    </table>

    <p>Name (optional): <input type="text" th:field="*{name}" />
       <em th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</em></p>
    <p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>

５．動作確認

1. ショートカットキー「Alt+Shift+X」＋ B　でSpring Bootアプリ実行


2. ブラウザのurlに、http://localhost:8080/show と入力