2019.04.11
WEBアプリ作成の続きです。
前回は検索フォームに入力されたデータに合致するデータのみ表示する動作を実現しました。 今回は検索して表示された本のISBN番号をクリックするとその詳細画面まで移動するようなものを実装していきます。
表示されている本のISBN番号をクリックした際に移動するテンプレートを準備します。detail.htmlとしました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>TRANSONIC書店 在庫管理システム</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <h2>在庫管理</h2> <div class="box"> <table th:object="${data}"> <tr><th>・ISBN</th><td th:text="*{isbn}">XXXX</td></tr> <tr><th>・タイトル</th><td th:text="*{title}">XXXX</td></tr> <tr><th></th><td></td></tr> <tr><th>・ジャンル</th><td th:text="*{genre}">XXXX</td></tr> <tr><th>・著者</th><td th:text="*{author}">XXXX</td></tr> <tr><th>・出版社</th><td th:text="*{publisher}">XXXX</td></tr> <tr><th>・発行年</th><td th:text="*{publicationYear}">XXXX</td></tr> </table> </div> <a href="/"><button type="button">戻る</button></a> </body> </html> |
表示されているISBN番号をクリックすると詳細ページに移動するようにindex.htmlを修正します。
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 | <!DOCTYPE html> <html xmlns:th="http://www.themeleaf.org"> <head> <title>TRANSONIC書店 在庫管理システム</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" media="all" th:href="@{/css/index.css}"/> </head> <body> <h2>在庫管理</h2> <div class="box"> <p>条件を記入してください</p> <form method="post" action="/" th:object="${formModel}"> <p><label for="genre">ジャンル：</label> <select name="genre"> <option selected th:text="*{genre}"></option> <option value="文学">文学</option> <option value="推理">推理</option> <option value="エッセイ">エッセイ</option> <option value="プログラミング">プログラミング</option> </select></p> <p><label for="isbn">ＩＳＢＮ： </label><input type="search" name="isbn" th:value="*{isbn}" /></p> <p><label for="author">著者 ： </label><input type="search" name="author" th:value="*{author}" /></p> <p><label for="title">タイトル： </label><input type="search" name="title" th:value="*{title}" /></p> <input type="submit" name="submit" value="検索" /> </form> <a href="/"><button type="button">全データ表示</button></a> </div> <hr /> <table> <tr><th>ISBN番号</th><th>タイトル</th><th>著者名</th><th>在庫数</th><th>注文状態</th><th>注文日</th><th>注文</th><th>納品</th></tr> <tr th:each="obj : ${booklist}"> <td align="center"><a href="/detail" th:href="@{/detail/{isbn}(isbn=${obj.isbn})}" th:text="${obj.isbn}" ></a></td> <td align="left" th:text="${obj.title}"></td> <td align="left" th:text="${obj.author}"></td> <td align="center" th:text="${obj.stock}"></td> <td align="center" th:text="${obj.genre}"></td> <td align="center" ></td> <td align="center" ><a href="/order" th:href="@{/order/{isbn}(isbn=${obj.isbn})}">●</a></td> <td align="center" ><a href="/delivery" th:href="@{/delivery/{isbn}(isbn=${obj.isbn})}">●</a></td> </tr> </table> </body> </html> |
注目すべきは32行目です。
1 | <a href="/detail" th:href="@{/detail/{isbn}(isbn=${obj.isbn})}" th:text="${obj.isbn}" ></a> |
th:hrefは遷移先のURLを動的に作り出すことができます。ここではリクエストハンドラから送られたbooklistのデータのフィールドであるisbnをURLの一部に指定しています。 書式としては以下のようになります。
1 | th:href="@{ URL }" |
例としてisbn = 111であるとすると、今回の場合は下の示した場合と同じになります。
1 | <a href="/detail/111">111</a> |
前回作成したStockControllerの中に以下を追加してください。
1 2 3 4 5 6 7 8 | @RequestMapping(value="/detail/{isbn}", method = RequestMethod.GET) public ModelAndView detail(@PathVariable("isbn") String isbn, ModelAndView mav) { mav.setViewName("detail"); Optional data = bRepository.findByIsbn(isbn); mav.addObject("data",data.get()); return mav; } |
・@PathVariable
これは動的に生成されたURLの中に含まれる値を取得するものです。 @RequestMappingで/detail/{isbn}と指定されているため、例としてhttp://localhost:8080/detail/111などからこの関数にとんできた際に@PathVariableで指定したisbnに111という値が入ります。 なお、@RequestMappingで指定した{isbn}と@PathVariableで指定する引数は同じでなければなりません。
それでは実際に動かしてみましょう
まずはトップ画面ですね
検索をし、ISBN番号をクリックすると
成功です。
