はじめに
自身の知識のアウトプットも兼ねて、新人研修用に作成した記事となります。Spring Bootを学び始めた方を対象とした内容になっています。
ID検索機能の作成については、前回の記事を参照ください。
概要
企業情報一覧画面から「詳細」リンクを押下すると、特定の企業に関する詳細情報が表示されるようにします。
完成イメージ
パッケージ構成
赤枠で囲ったHTMLファイルを今回作成していきます。また、青枠で囲ったクラスを編集していきます。
Controllerクラスの修正
CompanyController.javaに登録済み企業の詳細情報を表示するメソッドを追加します。
配置先：src > main > java > com > example > demo > controller > CompanyController.java
@Controller
public class CompanyController {
// 企業情報の詳細を表示
@GetMapping("company/detail/{id}")
public String detailCompany(@PathVariable Long id, Model model) {
model.addAttribute("company", companyService.getCompanyById(id).orElse(null));
return "detail";
}
}
@GetMapping("company/detail/{id}")
GETリクエストで /company/detail/{id} のURLへアクセスした時にこのメソッドが実行されます。{id} はプレースホルダで、URLに含まれる企業IDがここに入ります。
@PathVariable
このアノテーションは、HTTPリクエストのURLから動的な値を取得するために使用されます。ここでは、@PathVariableを使うことで、URLの {id} の部分を id パラメータとして取得します。
Viewの作成
detail.htmlを作成します。
ここでは、コントローラから渡されたcompanyオブジェクトの情報を表示しています。
配置先：src > main > resources > templates > detail.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>詳細画面</title>
</head>
<body>
<h1>企業情報詳細画面</h1>
<p>ID: <span th:text="${company.companyId}">ID</span></p>
<p>会社名: <span th:text="${company.name}">Name</span></p>
<p>従業員数: <span th:text="${company.employees}">Number of employees</span></p>
<p>設立日: <span th:text="${company.establishmentDate}">Establishment Date</span></p>
<a th:href="@{/company/lists}">一覧画面へ戻る</a>
</body>
</html>
詳細リンクの修正
index.htmlを修正します。
「詳細」リンクにダミーリンクを設定していたのを、detail.html に遷移できるように修正します。
配置先：src > main > resources > templates > index.html
<td>
<!-- ここを修正 -->
<a th:href="@{/company/detail/{id}(id=${company.companyId})}">詳細</a>
<!-- 一旦ダミーリンクを設定 -->
<a th:href="@{#}">編集</a>
<a th:href="@{#}">削除</a>
</td>
URLのプレースホルダ
/company/detail/{id} の {id} はプレースホルダであり、特定の企業IDを動的に挿入する位置です。ここでは、companyId の値がここに代入され、詳細ページへのリンクを生成します。
パラメータ指定
(id=${company.companyId}) により、{id} プレースホルダにcompany.companyId の値を挿入します。
${company.companyId} は、コントローラから渡されたcompanyオブジェクトの companyId を参照しており、Thymeleafが動的にリンクを生成します。
たとえば、company.companyId が 1 の場合、生成されるリンクは次のようになります。
<a href="/company/detail/1">詳細</a>
次回は更新機能を実装していきます。
参考サイト