商品検索
Spring Bootの動きも少し見えてきかと思います。何かシステムを作りたくなったのではないでしょうか。そんな時のために課題を用意しました。
商品を商品名、種類、価格帯で検索するプログラムを作成してください。最初の表示は全件表示します。そして検索条件に応じて抽出対象の商品を表示します。検索条件(項目)は全てAND条件で作成してください。また商品名の入力は、入力された文字列が含まれる商品名を抽出対象とします。
検索結果例です
提供クラス
商品情報は次のプログラムを用意しているのでコピーして利用してください。また必要に応じてメソッドの追加／修正など行ってください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
package com.example.demo; public class Item { private String kind; private String name; private int price; private String priceEdit; public Item(String kind,String name,int price) { this.kind = kind; this.name = name; this.price = price; this.priceEdit = String.format("%,3d", price); } public String getKind() { return kind; } public void setKind(String kind) { this.kind = kind; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getPrice() { return price; } public void setPrice(int price) { this.price = price; } public String getPriceEdit() { return priceEdit; } public void setPriceEdit(String priceEdit) { this.priceEdit = priceEdit; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
package com.example.demo; public class Items { static Item[] items = { new Item("陶磁器","江戸時代の小判が入っている陶磁器",290000), new Item("その他","マンモスの化石",2000), new Item("陶磁器","明治時代の陶磁器",3000), new Item("その他","チンギス・ハンが愛用した硯",500000), new Item("陶磁器","平成時代の陶磁器",1400), new Item("絵画","鎌倉時代の古ぼけた絵画",24000), new Item("時計","デジタル式時計",1250), new Item("絵画","安土桃山時代信長作の絵画",780000), new Item("絵画","奈良時代の仏像の絵画",30000), new Item("陶磁器","平安時代のきらびやかな陶磁器",14000), new Item("絵画","平成時代の美咲さんが書いた絵画",10), new Item("時計","日時計",48000), new Item("陶磁器","弥生時代の陶磁器",2000000), new Item("時計","江戸時代の歯車式時計",12000), new Item("時計","水時計",8800), new Item("その他","義経の刀",5000), new Item("陶磁器","昭和時代の陶磁器",2400), new Item( "その他","不発弾",-10000), }; } |
商品一覧の表示
商品一覧を表示するため配列の要素数分表示する必要があります。配列の個数に応じてHTMLの要素を繰り返す命令がThymeleafエンジンの「th:each」です。
ソースイメージは次のようになります。productがコントローラーから引き渡されるインスタンスです。そしてdataがproductのプロパティ(変数)で10,20,30(配列)が格納されています。
|
1 2 3 4 5 |
<table> <tr th:each="value : ${product.data}"> <td th:text="${value}"></td> </tr> </table> |
次のようにHTML要素が展開されます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<table> <tr> <td>10</td> </tr> <tr> <td>20</td> </tr> <tr> <td>30</td> </tr> </table> |
