BLOG
ブログ

2019.04.11

[STS3.9.2]Spring BootでWEBアプリ作成(在庫管理システム) – その3

WEBアプリ作成の続きです。

 

前回は検索フォームに入力されたデータに合致するデータのみ表示する動作を実現しました。 今回は検索して表示された本のISBN番号をクリックするとその詳細画面まで移動するようなものを実装していきます。

詳細ページのテンプレート用意

表示されている本のISBN番号をクリックした際に移動するテンプレートを準備します。detail.htmlとしました。

 

index.htmlの修正

表示されているISBN番号をクリックすると詳細ページに移動するようにindex.htmlを修正します。

  注目すべきは32行目です。

  th:hrefは遷移先のURLを動的に作り出すことができます。ここではリクエストハンドラから送られたbooklistのデータのフィールドであるisbnをURLの一部に指定しています。 書式としては以下のようになります。

 

例としてisbn = 111であるとすると、今回の場合は下の示した場合と同じになります。

コントローラーの実装

前回作成したStockControllerの中に以下を追加してください。

・@PathVariable

 

これは動的に生成されたURLの中に含まれる値を取得するものです。 @RequestMappingで/detail/{isbn}と指定されているため、例としてhttp://localhost:8080/detail/111などからこの関数にとんできた際に@PathVariableで指定したisbnに111という値が入ります。 なお、@RequestMappingで指定した{isbn}と@PathVariableで指定する引数は同じでなければなりません。

 

 

それでは実際に動かしてみましょう

 

 

まずはトップ画面ですね

 

 

検索をし、ISBN番号をクリックすると

 

 

成功です。