[Spring] DBレコードによるセレクトメニューの作成

Spring Boot 2 を使い、HTML上にあるセレクトボックスのメニューを、データベースに格納されたレコードからセットするページを作成します。

View部分にはThymeleafを使用しています。

mysqlのテーブルに格納されたレコードを取得し

HTML画面上のセレクトメニューにセットし、表示します。

1 Entity Classの作成
2 Repository Interfaceの作成
3 Controller Classの作成
4 Viewの作成

Entity Classの作成

まずEntity Classを作成します。今回は、IDと名前の2カラム（フィールド）だけの構成とします。

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table
public class MenuData {

	@Id
	@GeneratedValue(strategy=GenerationType.IDENTITY)
	@Column
	private long id;
	
	@Column(length=50, nullable = false)
	private String name;

	public long getId() {
		return id;
		
	}
	
	public void setId(long id) {
		this.id = id;
		
	}
	
	public String getName() {
		return name;
		
	}

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

import javax.persistence.Column;

import javax.persistence.Entity;

import javax.persistence.GeneratedValue;

import javax.persistence.GenerationType;

import javax.persistence.Id;

import javax.persistence.Table;

@Entity

@Table

public class MenuData {

@Id

@GeneratedValue(strategy=GenerationType.IDENTITY)

@Column

private long id;

@Column(length=50, nullable = false)

private String name;

public long getId() {

return id;

}

public void setId(long id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

Repository Interfaceの作成

データベースアクセスを行う為のRepository Interfaceです。JpaRepositoryを継承して、先に作成したEntity Classをセットするだけ。

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

@Repository
public interface MenuDataRepository extends JpaRepository&lt;MenuData, Long&gt; {
	
}

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

import org.springframework.stereotype.Repository;

@Repository

public interface MenuDataRepository extends JpaRepository<MenuData, Long> {

}

Controller Classの作成

次にController Classです。先に作成したrepositoryでテーブルを全件検索し、”menulist”オブジェクトに格納して、”index”へ渡しています。

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class MenuSampleController {

	@Autowired
	MenuDataRepository repository;
	
	@RequestMapping(value="/", method=RequestMethod.GET)
	@Transactional(readOnly=false)
	public ModelAndView index(@ModelAttribute("formModel") MenuData sedata, ModelAndView mav) {
		mav.setViewName("index");
		List&lt;MenuData&gt; list = (List&lt;MenuData&gt;)repository.findAll();
		mav.addObject("menulist", list);
		return mav;
		
	}
	
}

import java.util.List;

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

import org.springframework.stereotype.Controller;

import org.springframework.transaction.annotation.Transactional;

import org.springframework.web.bind.annotation.ModelAttribute;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.servlet.ModelAndView;

@Controller

public class MenuSampleController {

@Autowired

MenuDataRepository repository;

@RequestMapping(value="/", method=RequestMethod.GET)

@Transactional(readOnly=false)

public ModelAndView index(@ModelAttribute("formModel") MenuData sedata, ModelAndView mav) {

mav.setViewName("index");

List<MenuData> list = (List<MenuData>)repository.findAll();

mav.addObject("menulist", list);

return mav;

}

Viewの作成

先に作成した Controller Class にてパラメータの渡し先となっていた “index” です。ファイル名は index.html です。

“menulist”を展開して、メニューへセットしています。

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>top page</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<body>
		<table>
				<tr>
					<td><label for="categoryId">カテゴリ</label></td>
					<td>
						<select name="categoryId" th:value="*{id}">
							<option value="">==</option>
							<option th:each="item : ${menulist}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id} == *{id}"></option>
						</select>
					</td>
				</tr>
		</table>		
	</body>
</html>

<!DOCTYPE HTML>

<head>

</head>

<body>

<table>

<tr>

<td>

</select>

</td>

</tr>

</table>

</body>

</html>

データベースへの接続情報を application.properties へ記述し、起動します。

テーブルが存在しなければ、初回アクセス時に作成されます。

レコードを格納しておけば、セレクトメニューに値が表示されるハズ。

Entity Classの作成

Repository Interfaceの作成

Controller Classの作成

Viewの作成

関連記事: