Mybatisを使って検索画面を作成する

Java

テーブルを作成する

まずデータを取得するための適当なテーブルを作成します。

CREATE TABLE HOGE
 (ID NUMBER NOT NULL ENABLE, 
  NAME VARCHAR2(20 BYTE) NOT NULL ENABLE, 
  TYPE INT NOT NULL ENABLE, 
  DELETE_FLG INT NOT NULL ENABLE, 
  NOTES VARCHAR2(20 BYTE), 
  CONSTRAINT "HOGE_PK" PRIMARY KEY ("ID")
 );

Entity を作成する

次に HOGE テーブルに対応する Entity クラスを作成します。

package com.example.demo.mybatis.entity;

import lombok.Data;

@Data
public class Hoge {
	private int id;
	private String name;
	private int type;
  private int delete_flg;
	private String notes;

}

Mapper を作成する

Entity クラスの作成が終わったら Mapper interfaceを作成します。

<script>要素で囲むことでXMLのように動的sqlを使用できます。

package com.example.demo.mybatis.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import com.example.demo.mybatis.entity.Hoge;

@Mapper
public interface HogeMapper {

	// 検索
	@Select({
			"<script>",
			"SELECT * FROM HOGE",
			"<where>",
			"<if test=\"id != null and id != '' \">AND id=#{id}</if>",
			"<if test=\"name != null and name != '' \">AND name=#{name}</if>",
			"<if test=\"type != null and type != '' \">AND type=#{type}</if>",
			"<if test=\"delete_flg != null and delete_flg != '' \">AND type=#{deleteFlg}</if>",
			"</where>",
			"</script>"
	})
	List<Hoge> findHogeList(@Param("id") String id, @Param("name") String name, @Param("type") int type, @Param("deleteFlg") int deleteFlg);
}

Controller を作成する

Controller クラスを作成します。

初期表示では検索せずに、「検索する」ボタンをクリックしたときに検索するようにしました。

package com.example.demo.controller;

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.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.demo.form.HogeListForm;
import com.example.demo.mybatis.entity.Hoge;
import com.example.demo.mybatis.mapper.HogeMapper;

@Controller
@RequestMapping("/hoge")
public class HogeListController {

	@Autowired
	private HogeMapper hogeMapper;

	/**
	 * 初期表示(検索しない)
	 * @param model
	 * @return hogeList
	 */
	@GetMapping("/index")
	public String index(Model model) {
		HogeListForm hogeListForm = new HogeListForm();
		model.addAttribute(hogeListForm);

		List<Hoge> resultList =new ArrayList<Hoge>();
		model.addAttribute(resultList);

		return "/hoge/hogeList";
	}

	/**
	 * 検索処理
	 * @param hogeForm
	 * @param bindingResult
	 * @param model
	 * @return hogeList
	 */
	@GetMapping("/search")
	public String search(final @Validated @ModelAttribute HogeListForm hogeListForm, final BindingResult bindingResult,Model model) {

		List<Hoge> resultList = hogeMapper.findHogeList(hogeListForm.getId(), hogeListForm.getName(), hogeListForm.getType(), hogeListForm.getDeleteFlg());
		model.addAttribute("resultList", resultList);

		return "/hoge/hogeList";
	}

}
@Validatedバリデーション。
バリデーションのグループを指定できる。
@Valid というアノテーションもあるがこちらはグループ指定不可。
@ModelAttributeデータの受け渡し。
「引数に指定して入力値のバリデーションをする」のような使い方をする。
メソッドに対してアノテーションを付与することもできる。
このとき Request Mapping の前にインスタンスを返す。
例)
@ModelAttribute
SampleForm setUpForm(){
 SampleForm sampleForm = new SampleForm();
 return new SampleForm;
}

処理メソッドの引数にするか、前述のように @ModelAttribute を記述しない場合は、 model.addAttribute をすることで Model に追加できます。

例)

model.addAttribute(“resultList”, resultList);

を明示的に記述しないと、resultList という model は存在しないことになります。

そうなるとview に検索結果が渡らないため画面に表示されません。

html を作成する

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <meta charset="UTF-8"></meta>
 <title>hogeList</title>
</head>
<body>
 <div class="container">
  <div>
   <h1>HOGE 検索</h1>
  </div>
  <div>
   <form method="get" action="/hoge/search" th:object="${hogeListForm}">

   <!-- 検索条件 -->
   <table border="1">
    <tr><th colspan="2">検索条件</th></tr>
    <tr>
     <td>ID</td>
     <td>
      <input type="text" th:field="*{id}" />
     </td>
    </tr>
    <tr>
     <td>名称</td>
     <td>
      <input type="text" th:field="*{name}" />
     </td>
    </tr>
    <tr>
     <td>
      <input type="submit" value="検索する" />
     </td>
    </tr>
   </table>

   <br />

   <!-- 検索結果 -->
   <table border="1">
    <tr>
     <th>ID</th>
     <th>名称</th>
     <th>タイプ</th>
     <th>削除フラグ</th>
    </tr>
    <tr th:each="hoge: ${resultList}">
     <td th:text="${hoge.id}"></td>
     <td th:text="${hoge.name}"></td>
     <td th:text="${hoge.type}"></td>
     <td th:text="${hoge.delete_flg}"></td>
    </tr>
   </table>
   </form>
  </div>
 </div>
</body>
</html>
th:objectModel の属性を指定し、th:field が使えるようになる。
th:fieldフォームとバインドする。
id, name, value が設定されます。
th:each繰り返し処理。
「th:each=”変数名: 繰り返す要素”」
th:textテキスト出力する。
th:field の例)
<input type="text" th:field="*{id}" />
とすると
<input type="text" id="id" name="id" value="">
になる。

画面を表示する

初期表示

http://localhost:8080/hoge/index

にアクセスしてHOGE 検索画面が表示されました!

検索する

検索条件の名称に「TEST」を入力して、検索ボタンをクリックしたら検索結果が表示されました!

コメント

タイトルとURLをコピーしました