back
MongoDBを利用する (5/6)
■テンプレートを修正する
最後に、テンプレートを修正しましょう。「templates」フォルダにある「helo.html」を下のリスト欄のように修正して下さい。
記述したら、プロジェクトを実行して/heloにアクセスしてみましょう。普通にアクセスすると、全エンティティが一覧表示されます。入力フィールドにテキストを書いて送信すると、記入したタイトルのエンティティだけが検索され表示されます。
今回は、フォームの他に検索結果を表示するためのテーブルも用意しておきました。テーブルでは、コントローラー側から渡された変数datasから繰り返しインスタンスを取得し、その内容を<td>内に書きだすようにしてあります。
実際にやってみると、MongoDBといえども、基本的なデータベースアクセス処理は普通のSQLデータベースとまったく変わらないことがわかります。といっても、それは「Spring Bootを使っているから」です。
更にいえば、Spring Bootのリポジトリインターフェイスのおかげが非常に大きいといってよいでしょう。MongoRepositoryは、JpaRepositoryとコンパチブルな設計になっているため、ほとんど同じ感覚でデータベース処理を作成することができるのです。
記述したら、プロジェクトを実行して/heloにアクセスしてみましょう。普通にアクセスすると、全エンティティが一覧表示されます。入力フィールドにテキストを書いて送信すると、記入したタイトルのエンティティだけが検索され表示されます。
今回は、フォームの他に検索結果を表示するためのテーブルも用意しておきました。テーブルでは、コントローラー側から渡された変数datasから繰り返しインスタンスを取得し、その内容を<td>内に書きだすようにしてあります。
<tr th:each="data : ${datas}">
<td>
<p class="title" th:text="'「' + ${data.title} + '」'" />
<p class="memo" th:text="${data.memo} + '(' + ${data.dateStr} + ')'" />
</td>
</tr>th:each="data : ${datas}"が、繰り返し処理の部分です。先に、Thymeleafの機能としてth:eachの利用について簡単に紹介しましたが覚えてますか？ これで変数datasから順にインスタンスを取り出し、変数dataに代入する、という作業が行われます。後は、そのdata内からtitleやmemo、dateStrの値を取り出して書き出すだけです。実際にやってみると、MongoDBといえども、基本的なデータベースアクセス処理は普通のSQLデータベースとまったく変わらないことがわかります。といっても、それは「Spring Bootを使っているから」です。
更にいえば、Spring Bootのリポジトリインターフェイスのおかげが非常に大きいといってよいでしょう。MongoRepositoryは、JpaRepositoryとコンパチブルな設計になっているため、ほとんど同じ感覚でデータベース処理を作成することができるのです。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>top page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
table tr th { background-color: #000099; color: white; }
table tr td { background-color:#eeeeee; }
p.msg { border:solid 1px lightgray; padding:10px; }
p.title { margin:0px 5px; font-weight:bold; }
p.memo { margin:0px 5px; }
</style>
</head>
<body>
<h1>Helo page</h1>
<p th:text="${msg}" />
<form method="post" action="/helo">
<input type="text" name="key" />
<input type="submit" value="検索" />
</form>
<hr />
<table>
<tr><th>MongoDB Data</th></tr>
<tr th:each="data : ${datas}">
<td>
<p class="title" th:text="'「' + ${data.title} + '」'" />
<p class="memo" th:text="${data.memo} + '(' + ${data.dateStr} + ')'" />
</td>
</tr>
</table>
</body>
</html>
| << 前へ | 次へ >> |