【SpringBoot入門】#7~ 検索画面の作成

当ページのリンクには広告が含まれています。
目次

概要

書籍情報を検索するフォーム(検索フォーム)と検索結果を表示する画面(検索結果一覧)を作成します。
検索フォームと検索結果一覧はHTMLファイルを分けて作成しています。
分けることは必須ではなく、再利用性を高めるため工夫と考えて下さい。
 

遷移先を定義

ソースコード(Controller)

・Viewの配置先
 src/main/resources/templates/book/list.html
 赤字の部分が、return “book/list”;に対応しています。

検索フォームの作成

イメージ


 

ソースコード

・fragment化
 検索フォーム部分を「th:fragment=”search”」として、fragment(断片化)として定義しておきます。
 これは、検索一覧画面に埋め込むようにします。
 

検索結果一覧の作成

イメージ


共通ヘッダー、検索フォーム、検索結果一覧の構成になっています。

ソースコード

・fragmentの埋め込み
 共通ヘッダー:th:replace=”header::header”
 検索フォーム:th:replace=”book/search”

・画面操作上のエラー表示部
 th:text=”${error}”としておきます。
 ここは、後程実装する削除機能で使います。

・画面表示の制御
1.初期表示時は空欄
 それは、th:if=”${books}”とすることで、オブジェクトが渡されている場合のみ後続の処理をさせることで実現しています。

2.0件の場合
 th:if=”${books.size() == 0}”
 これにより、渡されたオブジェクトが0件である場合は、「検索結果は0件です。」と表示されます。

3.表示件数がある場合
 th:if=”${books.size() > 0}”
 検索結果が0件超過の場合に、後続の表示処理を実行させます。
 また、th:each=”book : ${books}” で繰り返し処理による表示処理を行います。
 eachでは拡張for文のように記述することができます。

・画面表示用のメソッド
 book.isbnFormat()
 book.priceCommaOf1000()
 book.publicationDateOfYyyymmdd()
 これらをBook.javaに追記しておくことで、画面側ではメソッドを呼び出すだけで済みます。
 (後続の、Book.javaへの追記を参照)

Book.javaへの追記

以下のメソッドを画面表示用に追記します。

 

まとめ

・検索条件をリクエストする検索フォームを作成する。
・検索結果を表示する一覧画面を作成する。
・検索結果一覧に表示する件数によって、表示内容を制御することができる。
・検索結果に表示するフォーマットを整形する場合、オブジェクトにメソッドを定義して利用することができる。

最後までお読み頂き、ありがとうございました!
ご意見・ご要望がありましたら、遠慮なくコメント下さい!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

リーマンショックの影響で26歳の時にIT業界から離れ、紆余曲折を経て34歳でエンジニアに復帰しました。
復帰前は開発未経験でしたが、独学した知識と面接時のコミュニケーション力で見事開発エンジニアとして復帰しました!
今はフリーランスエンジニアとして仕事をしています。

■保有資格
・Java Gold SE 11

コメント

コメントする

CAPTCHA


目次