MongoDBを利用する (5/6)
作成:2015-05-09 09:20
更新:2015-05-09 09:20
更新:2015-05-09 09:20
■テンプレートを修正する
最後に、テンプレートを修正しましょう。「templates」フォルダにある「helo.html」を下のリスト欄のように修正して下さい。
記述したら、プロジェクトを実行して/heloにアクセスしてみましょう。普通にアクセスすると、全エンティティが一覧表示されます。入力フィールドにテキストを書いて送信すると、記入したタイトルのエンティティだけが検索され表示されます。
今回は、フォームの他に検索結果を表示するためのテーブルも用意しておきました。テーブルでは、コントローラー側から渡された変数datasから繰り返しインスタンスを取得し、その内容を<td>内に書きだすようにしてあります。
実際にやってみると、MongoDBといえども、基本的なデータベースアクセス処理は普通のSQLデータベースとまったく変わらないことがわかります。といっても、それは「Spring Bootを使っているから」です。
更にいえば、Spring Bootのリポジトリインターフェイスのおかげが非常に大きいといってよいでしょう。MongoRepositoryは、JpaRepositoryとコンパチブルな設計になっているため、ほとんど同じ感覚でデータベース処理を作成することができるのです。
記述したら、プロジェクトを実行して/heloにアクセスしてみましょう。普通にアクセスすると、全エンティティが一覧表示されます。入力フィールドにテキストを書いて送信すると、記入したタイトルのエンティティだけが検索され表示されます。
今回は、フォームの他に検索結果を表示するためのテーブルも用意しておきました。テーブルでは、コントローラー側から渡された変数datasから繰り返しインスタンスを取得し、その内容を<td>内に書きだすようにしてあります。
<tr th:each="data : ${datas}">th:each="data : ${datas}"が、繰り返し処理の部分です。先に、Thymeleafの機能としてth:eachの利用について簡単に紹介しましたが覚えてますか? これで変数datasから順にインスタンスを取り出し、変数dataに代入する、という作業が行われます。後は、そのdata内からtitleやmemo、dateStrの値を取り出して書き出すだけです。
<td>
<p class="title" th:text="'「' + ${data.title} + '」'" />
<p class="memo" th:text="${data.memo} + '(' + ${data.dateStr} + ')'" />
</td>
</tr>
実際にやってみると、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>
※関連コンテンツ
「初心者のためのSpring Bootプログラミング入門」に戻る