Springを使ったDBデータ検索画面の作成

カテゴリ: 製造・コーディング(PG/バックエンド)

公開日: 2022/10/14 更新日: 2022/10/14

今回はJavaから画面へ値を渡すプログラムではなく、画面からJavaへ値を渡して、DBからデータを取得し結果を画面へ表示する実装方法を紹介していきたいと思います。

1. 環境

Java17

Spring2.7.4

PostgreSQL)14.5

SQLの設定

データを格納するためのテーブルを作成します。

テーブル作成などはPSQLの場合pgAdminなどを使うと簡単に行えます。

SQLCREATE文


CREATE TABLE IF NOT EXISTS public.syain
(
    syainkbn integer,
    age integer,
    sex character varying(5) COLLATE pg_catalog."default",
    name character varying(20) COLLATE pg_catalog."default",
    id integer NOT NULL DEFAULT nextval('syain_id_seq'::regclass),
    delete_flag boolean
)

SpringとPSQLの接続設定

application.propertiesにDBの接続情報を記載します。

DBの接続設定{}の中はそれぞれ設定してください。


spring.datasource.url=jdbc:postgresql://{IPアドレス:DBのPORT/データベース名}
spring.datasource.username={ユーザー名}
spring.datasource.password={パスワード}
spring.jpa.database=POSTGRESQL

pom.xmlに依存関係を記載します。

依存関係の追加



	org.springframework.boot
	spring-boot-starter-data-jpa


	org.postgresql
	postgresql
	runtime

Eclipse(Version: 2022-09 (4.25.0))

EntityとRepositoryの作成

SyainRepositoryの作成


package com.example.demo.repository;

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

import com.example.demo.model.SyainEntity;

@Repository
public interface SyainRepository extends JpaRepository {

}

SyainEntityの作成


package com.example.demo.model;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.pers

2. 画面の作成

検索用のボタンの配置と検索用のテキストボックスの配置、検索結果の表示部分の作成を行います。


meta charset="UTF-8"
title
/title


 p
  span th:text="${syaindata}"
Hello World!/span
 /p
 
  table
   tbody
tr
    td
検索フォーム/td
   /tr
   tr
    td
label
ID：input type="number" name="id" size="20" th:field="*{id}"
/label
/td
    td
label
社員区分：input type="number" name="syainKbn" size="5" th:field="*{syainKbn}"
/label
/td
    td
label
年齢：input type="number" name="age" size="20" th:field="*{age}"
/label
/td
    td
label
性別：input type="text" name="sex" size="20" maxlength="5" th:field="*{sex}"
/label
/td
    td
label
名前：input type="text" name="name" size="20" maxlength="20" th:field="*{name}"
/label
/td

   /tr
  /tbody
/table

  table
   tbody
tr
    td
input type="submit" value="検索"
/td
    td
input type="reset" value="クリア"
/td
   /tr
  /tbody
/table

3. 画面のオブジェクトクラスの作成


package com.example.demo.model;

public class InputModel {

	//ID
	private Integer id;
	
	//社員区分
	private Integer syainKbn;

	//年齢
	private Integer age;

	//性別
	private String sex;

	//社員名
	private String name;

	public Integer getId() {
		return id;
	}

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

	public Integer getSyainKbn() {
		return syainKbn;
	}

	public void setSyainKbn(Integer syainKbn) {
		this.syainKbn = syainKbn;
	}

	public Integer getAge() {
		return age;
	}

	public void setAge(Integer age) {
		this.age = age;
	}

	public String getSex() {
		return sex;
	}

	public void setSex(String sex) {
		this.sex = sex;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
}

このクラスは画面から入力する値をJava側で受け取ったり、Java側から画面へデータを渡す際に使用するので、画面で使用する項目分、定義する。

また画面からデータを受け取る際は

input type="text" name="id"size="20" maxlength="20" th:field="*{id}" /

のようにnameで指定されている名称と画面のオブジェクトクラスの変数名を一致させる。

4. サービスクラスの作成


package com.example.demo.service;

import java.util.ArrayList;
import java.util.List;

import javax.persistence.EntityManager;
import javax.persistence.Query;

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

import com.example.demo.model.InputModel;
import com.example.demo.model.SyainEntity;
import com.example.demo.repository.SyainRepository;

@Service
public class SerchService {

	@Autowired
	SyainRepository syainRepository;

	@Autowired
	private EntityManager entityManager;

	//画面に入力された情報をもとにDB内のデータの検索を行う。
	public List getSerchSyainData(InputModel form) {

		String sql;

		//SQLの整形
		StringBuilder sb = new StringBuilder("SELECT * FROM syain  WHERE delete_flag = false");

		//IDが入力されていた場合条件式に追加する
		if (form.getId() != null) {
			sb.append(" AND id = " + form.getId());
		}
		//社員区分が入力されていた場合条件式に追加する
		if (form.getSyainKbn() != null) {
			sb.append(" AND syainkbn = " + form.getSyainKbn());
		}
		//年齢が入力されていた場合条件式に追加する
		if (form.getAge() != null) {
			sb.append(" AND age = " + form.getAge());
		}
		//性別が入力されていた場合条件式に追加する
		if (!"".equals(form.getSex())) {
			sb.append(" AND sex = '" + form.getSex() + "'");
		}
		//名前が入力されていた場合条件式に追加する
		if (!"".equals(form.getName())) {
			sb.append(" AND name = '" + form.getName() + "'");
		}

		sql = sb.toString();
		
		//SQL実行
		Query query = entityManager.createNativeQuery(sql, SyainEntity.class);
		
		List list = new ArrayList<>();
		list = query.getResultList();
		
		return list;
	}
}

画面から受け取った情報でSQLを作成しデータを取得する。

引数の画面オブジェクトに検索ワードがあるか確認して検索ワードがあった場合のみ SQLにWHERE分を追記していきSQLを実行する。

5. コントローラークラスの作成


package com.example.demo;

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.example.demo.model.InputModel;
import com.example.demo.model.SyainEntity;
import com.example.demo.service.RegisterService;
import com.example.demo.service.SerchService;
import com.example.demo.service.TestApiService;

@Controller
@RequestMapping("user")
public class SyainController {
	
	@Autowired
	SerchService serchService; 

	@RequestMapping(value = "/syaindata", method = RequestMethod.GET)
	public String syain(Model model) {

		model.addAttribute("InputModel",new InputModel());
		return "syaindata";
	}

	//検索ワードでDB内からデータを抽出し画面へ返す
	@RequestMapping(value = "/syaindata", method = RequestMethod.POST)
	public String syain(@ModelAttribute("InputModel") InputModel form, Model model) {

		List syainList = new ArrayList<>();
		
		model.addAttribute("syaindata", "社員情報");
		syainList = serchService.getSerchSyainData(form);
		model.addAttribute("syainList",syainList);

		return "syaindata";
	}
	
}

コントローラークラスで先ほどのサービスの検索メソッドを呼び出し Listで結果を取得し画面へ返す。

method = RequestMethod.GETの部分で InputModelを返すのはGet通信で接続した際に表示するオブジェクトがNULLでエラーとなってしまうので、からのオブジェクトをNewで作成し画面へ渡している。

これで実行し”http://localhost:8080/user/syaindata”へ接続すると検索が行える。

注意点

ID、社員区分、年齢は数字以外で検索するとエラーとなります。

また桁数制限があるので注意してください。

6. まとめ

今回はSpringで検索画面を作成しました。

内容自体はそんなに難しくはなかったのですが検索画面での入力チェックなど改良が必要だなと感じました。