#5 Springで画面の入力値を受け取り表示する

今回は画面から入力された値を別画面に表示していきたいと思います。

前回まで

今回はH2データベースを利用しますが、必要な設定は前回の記事を見てください！

前提条件

この記事はSpringの最低限の知識が必要になります。
また、なるべく分かりやすく書くつもりですが、この記事の目的は自分の勉強のアウトプットであるため、所々説明は省略します。

構築環境

各バージョン
Spring Boot ver 2.7.5
依存関係
依存関係は前回の記事と一緒です。

成果物

値を入力

「id = 1」に紐付いた値を取得

今回行うこと

今回は以下の流れに沿って進めていきます。

検索結果を受け取るエンティティ「Employee.java」の作成
SQL文を処理する「SampleRepository.java」の作成
処理したSQLの実行結果を取得する「SampleService.java」の作成
値を受け取る画面「form.html」の作成
各リクエストを受けデータの受け渡し、画面遷移を行うコントローラー「SampleController.java」の作成
「form.html」から受け取った値を表示する「show.html」の作成

1. 検索結果を受け取るエンティティ「Employee.java」の作成

ここではデータの入れ物となるクラスを作成します。

Employee.java

package com.example.demo.sample;

import lombok.Data;

@Data // Getter, Setterの省略
public class Employee {
	private String Id;
	private String Name;
	private int Age;
}

2. SQL文を処理する「SampleRepository.java」の作成

今回は画面から入力された「id」と一致するデータを取得できるようSQL文を記述します。

SampleRepository.java

package com.example.demo.sample;

import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository;

@Repository
public class SampleRepository {
	
	// JdbcTemplateクラスを利用する
	@Autowired
	private JdbcTemplate jdbcTemplate;
	
	// SELECT文
	// 結果をMapで取得する。
	// MapのキーにはSELECT結果のカラム名、Mapの値にはSELECT結果の値が入る
	public Map<String, Object>findById(String id) {
		String query = "SELECT *"
				+ " FROM employee"
				+ " WHERE id=?";
		
		// 検索実行
		// id = 1のとき
		// employee.put("id", "1")
		// employee.put("name", "Kato")
		// employee.put("age", 10)
		Map<String, Object> employee = jdbcTemplate.queryForMap(query, id);
		return employee;
	}
}

3. 処理したSQLの実行結果を取得する「SampleService.java」の作成

SampleService

package com.example.demo.sample;

import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class SampleService {

	@Autowired
	private SampleRepository repository;
	
	/* 従業員を1人取得する */
	public Employee getEmployee(String id) {
		Map<String, Object> map = repository.findById(id); // findById(String id)の戻り値"employee"を取得
		// Mapから値を取得
		String Id = (String) map.get("id");     // "1"を取得
		String Name = (String) map.get("name"); // "Kata"を取得
		int Age = (Integer) map.get("age");     // 10を取得
		
		// Employeeクラスに値をセット
		Employee employee = new Employee();
		employee.setId(Id);
		employee.setName(Name);
		employee.setAge(Age);
		
		return employee;
	}
}

4. 値を受け取る画面「form.html」の作成

form.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
	<h1>入力フォーム</h1>
	<form method="post" action="/sample/db">
		従業員ID:<input type="text" name="text2">
		<input type="submit" value="クリック">
	</form>
</body>
</html>

5. 各リクエストを受けデータの受け渡し、画面遷移を行うコントローラー「SampleController.java」の作成

SampleController.java

package com.example.demo.sample;

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 org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

// 画面からHTTPリクエストを受け付けるため@Controllerアノテーションを付与する
@Controller
public class SampleController {
	
	@Autowired
	private SampleService service;

    // http://localhost(ポート番号)/sampleにアクセスすると「form.html」が呼ばれる
	@GetMapping("/sample")
	public String getSample() {
        // 「form.html」が設置されている場所を文字列に指定「src/main/resources/templates」から見た相対パス
		return "form";
	}

	@PostMapping("/sample/db")
    // formタグの「name」と一致する値を取得
	public String postDbRequest(@RequestParam("text2") String id, Model model) {
		// 1件検索
		Employee employee = service.getEmployee(id); // getEmployee(String id)メソッドの戻り値"employee"を取得
		
		// 検索結果をModelに登録
		model.addAttribute("employee", employee); 
		
		// db.htmlに画面遷移
		return "show";
	}
}

6. 「form.html」から受け取った値を表示する「show.html」の作成

show.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ResponseSample</title>
</head>
<body>
	<h1>ResponseSample</h1>
	<table th:object=${employee}>
		<tr>
			<td>ID:</td>
			<td th:text="*{Id}"></td>
		</tr>
		<tr>
			<td>名前:</td>
			<td th:text="*{Name}"></td>
		</tr>
		<tr>
			<td>年齢:</td>
			<td th:text="*{Age}"></td>
		</tr>
	</table>
</body>
</html>

成功していれば以下のように値を取得できます。

最後に

プログラム作成は以上になります。
詳しい接続設定などが分からない人は冒頭に貼ってあります前回の記事をご覧下さい！