refirio.org

Memo

メモ > 技術 > フレームワーク: SpringBoot > Webアプリケーションの作成
■Webアプリケーションの作成
■HTMLを返すコントローラーの作成

com.example.demo 内に新規Javaクラス HomeController を作る
HomeController.java が作成されるので、以下の内容を記述する

@RestController はレスポンスとして文字列を返すような場合に使用する
@Controller はレスポンスとしてHTMLを返すような場合に使用する

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.time.LocalDateTime;

@Controller
public class HomeController {
    @GetMapping(value = "/")
    @ResponseBody
    String index() {
        return """
            <html>
            <head>
            <title>Spring Boot</title>
            </head>
            <body>
            <h1>Spring Boot</h1>
            <p>It works!</p>
            </body>
            </html>
            """;
    }
    @GetMapping(value = "/now")
    @ResponseBody
    String now() {
        return """
            <html>
            <head>
            <title>Spring Boot</title>
            </head>
            <body>
            <h1>Spring Boot</h1>
            <p>現在時刻は%sです。</p>
            </body>
            </html>
            """.formatted(LocalDateTime.now());
    }
}
■HTMLテンプレートを利用する

テンプレートエンジンのThymeleaf（タイムリーフ）を利用する
pom.xml に以下を追加し、さらにMavenの変更を読み込む
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>


src/main/resources/templates/index.html を作成し、以下の内容を記述する
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot</title>
</head>
<body>
    <h1>Spring Boot</h1>
    <p>It works!</p>
</body>
</html>


src/main/resources/templates/now.html を作成し、以下の内容を記述する
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot</title>
</head>
<body>
    <h1>Spring Boot</h1>
    <p>現在時刻は<span th:text="${time}"></span>です。</p>
</body>
</html>


HomeController.java の内容を以下に変更する
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.time.LocalDateTime;

@Controller
public class HomeController {
    @GetMapping(value = "/")
    String index() {
        return "index";
    }
    @GetMapping(value = "/now")
    String now(Model model) {
        model.addAttribute("time", LocalDateTime.now());
        return "now";
    }
}


これでブラウザからアクセスすると、テンプレートの内容に従って画面が表示される
Thymeleafについては、後述の「テンプレート（Thymeleaf）」も参照

■MySQLを利用する（JDBCの場合）

※特に理由がなければ、JDBCではなくSpring Data JPAを使うと良さそう
  Spring Data JPAについては、後述の「MySQLを利用する（Spring Data JPAの場合）」を参照

ここでは、MySQLはXAMPPに付属しているものを使用することにする

XAMPPのApacheとMySQLを起動する
phpMyAdminで今回は「spring」というデータベースを作成しておく
データベースの文字コードは「utf8mb4_general_ci」としておく

以下のテーブルを作成する
CREATE TABLE tasks (
    id    INT UNSIGNED NOT NULL AUTO_INCREMENT,
    title VARCHAR(80)  NOT NULL,
    text  TEXT,
    PRIMARY KEY(id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;


MySQLを利用するため、pom.xml に以下を追加する（「mysql-connector-j」を「mysql-connector-java」とするとエラーになった）
追加したら、Mavenの変更を読み込む
		<dependency>
			<groupId>com.mysql</groupId>
			<artifactId>mysql-connector-j</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-jdbc</artifactId>
		</dependency>


src/main/resources/application.properties にデータベースへの接続設定を記述する（正しく設定しないと起動できない）
なお昔はドライバに「com.mysql.jdbc.Driver」が指定されたようだが、今はその指定は非推奨らしい
spring.jpa.hibernate.ddl-auto=none
spring.datasource.url=jdbc:mysql://localhost:3306/spring
spring.datasource.username=root
spring.datasource.password=1234
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver


Spring BootでMySQLに接続する | 株式会社CONFRAGE ITソリューション事業部
https://confrage.jp/spring-boot%E3%81%A7mysql%E3%81%AB%E6%8E%A5%E7%B6%9A%E3%81%99%E3%82%8B/

You must configure either the server or JDBC driver (via the serverTimezone configuration property) to use a more specifc time zone value if you want to utilize time zone support. | 株式会社CONFRAGE ITソリューション事業部
https://confrage.jp/you-must-configure-either-the-server-or-jdbc-driver-via-the-servertimezone-confi...

src/main/java/com/example/demo/Task.java としてデータクラスを作成する
package com.example.demo;

public class Task {
    private String id;
    private String title;
    private String text;

    public Task(String id, String title, String text) {
        this.id    = id;
        this.title = title;
        this.text  = text;
    }

    public String id() {
        return id;
    }

    public String title() {
        return title;
    }

    public String text() {
        return text;
    }
}


src/main/java/com/example/demo/TaskDao.java としてデータベースアクセスクラスを作成する
package com.example.demo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.namedparam.BeanPropertySqlParameterSource;
import org.springframework.jdbc.core.namedparam.SqlParameterSource;
import org.springframework.jdbc.core.simple.SimpleJdbcInsert;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Map;

@Service
public class TaskDao {
    private final JdbcTemplate jdbcTemplate;

    @Autowired
    TaskDao(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    public void add(Task task) {
        SqlParameterSource param = new BeanPropertySqlParameterSource(task);
        SimpleJdbcInsert insert = new SimpleJdbcInsert(jdbcTemplate).withTableName("tasks");
        insert.execute(param);
    }

    public List<Task> findAll() {
        String query = "SELECT * FROM tasks";

        List<Map<String, Object>> result = jdbcTemplate.queryForList(query);
        List<Task> tasks = result.stream()
                .map((Map<String, Object> row) -> new Task(
                        row.get("id").toString(),
                        row.get("title").toString(),
                        row.get("text").toString()
                )).toList();

        return tasks;
    }
}


src/main/resources/templates/task.html としてデータ一覧のテンプレートを作成する
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot</title>
</head>
<body>
<h1>Spring Boot</h1>
<p>タスクは以下のとおりです。</p>
<table>
    <tr>
        <th>ID</th>
        <th>タイトル</th>
        <th>テキスト</th>
    </tr>
    <tr th:each="task : ${tasks}">
        <td th:text="${task.id}"></td>
        <td th:text="${task.title}"></td>
        <td th:text="${task.text}"></td>
    </tr>
</table>
</body>
</html>


src/main/resources/templates/task_add.html としてデータ登録完了のテンプレートを作成する
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot</title>
</head>
<body>
<h1>Spring Boot</h1>
<p>タスクを登録しました。</p>
</body>
</html>


src/main/java/com/example/demo/HomeController.java を以下のように変更する
package com.example.demo;

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

import java.time.LocalDateTime;
import java.util.List;

@Controller
public class HomeController {
    private final TaskDao taskDao;

    @Autowired
    HomeController(TaskDao taskDao) {
        this.taskDao = taskDao;
    }

    @GetMapping(value = "/")
    String index() {
        return "index";
    }

    @GetMapping(value = "/now")
    String now(Model model) {
        model.addAttribute("time", LocalDateTime.now());
        return "now";
    }
    @GetMapping(value = "/task")
    String task(Model model) {
        List<Task> tasks = taskDao.findAll();
        model.addAttribute("tasks", tasks);
        return "task";
    }

    @GetMapping(value = "/task_add")
    String addTask() {
        Task task = new Task(null, "テスト", "テスト。\nこれはテストです。");
        taskDao.add(task);
        return "task_add";
    }
}
http://localhost:8080/task_add にアクセスするとタスクが登録される
http://localhost:8080/task にアクセスするとタスクが一覧表示される

データベースの接続情報を環境ごとに用意する方法は、このファイル内の「プロパティの上書き」を参照

■MySQLを利用する（Spring Data JPAの場合）

SpringBoot JPAを使う方法（Spring Data JPA の使用方法） - Web系開発メモ
https://web-dev.hatenablog.com/entry/spring-boot/intro/jpa

Spring Boot入門：MySQLにSpring Boot アプリケーションからアクセスする - あるSEのつぶやき・改
https://www.aruse.net/entry/2019/08/04/003838

Spring Boot＋JPAでデータベースに接続する方法 - ITを分かりやすく解説
https://medium-company.com/spring-boot%EF%BC%8Bjpa%E3%81%A7%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%8...

ここでは、MySQLはXAMPPに付属しているものを使用することにする

XAMPPのApacheとMySQLを起動する
phpMyAdminで今回は「spring」というデータベースを作成しておく
データベースの文字コードは「utf8mb4_general_ci」としておく

以下のテーブルを作成する
CREATE TABLE tasks (
    id    INT UNSIGNED NOT NULL AUTO_INCREMENT,
    title VARCHAR(80)  NOT NULL,
    text  TEXT,
    PRIMARY KEY(id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;


MySQLを利用するため、pom.xml に以下を追加する（「mysql-connector-j」を「mysql-connector-java」とするとエラーになった）
追加したら、Mavenの変更を読み込む
		<dependency>
			<groupId>com.mysql</groupId>
			<artifactId>mysql-connector-j</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>


src/main/resources/application.properties にデータベースへの接続設定を記述する（正しく設定しないと起動できない）
spring.jpa.hibernate.ddl-auto=none
spring.datasource.url=jdbc:mysql://localhost:3306/spring
spring.datasource.username=root
spring.datasource.password=1234


src/main/java/com/example/demo/Task.java としてエンティティクラスを作成する
package com.example.demo;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Table;
import jakarta.persistence.Id;

@Entity
@Table(name="tasks")
public class Task {
    @Id @GeneratedValue(strategy=GenerationType.IDENTITY)
    private Integer id;
    private String title;
    private String text;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }
}


src/main/java/com/example/demo/TaskRepository.java としてリポジトリクラスを作成する
package com.example.demo;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface TaskRepository extends JpaRepository<Task, Integer> {
}


src/main/resources/templates/task.html としてデータ一覧のテンプレートを作成する
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot</title>
</head>
<body>
<h1>Spring Boot</h1>
<p>タスクは以下のとおりです。</p>
<table>
    <tr>
        <th>ID</th>
        <th>タイトル</th>
        <th>テキスト</th>
    </tr>
    <tr th:each="task : ${tasks}">
        <td th:text="${task.id}"></td>
        <td th:text="${task.title}"></td>
        <td th:text="${task.text}"></td>
    </tr>
</table>
</body>
</html>


src/main/resources/templates/task_add.html としてデータ登録完了のテンプレートを作成する
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot</title>
</head>
<body>
<h1>Spring Boot</h1>
<p>タスクを登録しました。</p>
</body>
</html>


src/main/java/com/example/demo/HomeController.java を以下のように変更する
package com.example.demo;

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

import java.time.LocalDateTime;
import java.util.List;

@Controller
public class HomeController {
    @Autowired
    private TaskRepository taskRepository;

    @GetMapping(value = "/")
    String index() {
        return "index";
    }

    @GetMapping(value = "/now")
    String now(Model model) {
        model.addAttribute("time", LocalDateTime.now());
        return "now";
    }

    @GetMapping(value = "/task")
    String task(Model model) {
        List<Task> tasks = taskRepository.findAll();
        model.addAttribute("tasks", tasks);
        return "task";
    }

    @GetMapping(value = "/task_add")
    String addTask() {
        Task task = new Task();
        task.setId(null);
        task.setTitle("テスト");
        task.setText("テスト。\nこれはリポジトリのテストです。");
        taskRepository.save(task);
        return "task_add";
    }
}


これで http://localhost:8080/task_add にアクセスすると、タスクが登録される
また http://localhost:8080/task にアクセスすると、タスクが一覧表示される

データベースの接続情報を環境ごとに用意する方法は、このファイル内の「プロパティの上書き」を参照
Spring Data JPAについては、後述の「データベース（Spring Data JPA）」も参照
Memo

Advertisement
