【新着情報一覧】HTMLファイル作成

はじめの1歩！Sping Data JPAでサクっとWEBアプリケーションを作ろう！～新着情報一覧・登録機能編～

レッスン内容

templates/index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>DISCOVER TRAVEL株式会社</title>
	<link rel="stylesheet" href="style_pc.css">
</head>
<body>
	<div id="wrap">
		<header>
			<h1>DISCOVER TRAVEL</h1>
			<p>練習用の架空のサイトです</p>
			<nav>
				<ul>
					<li><a href="index.html">ホーム</a></li>
					<li><a href="#">オススメ</a></li>
					<li><a href="#">会社概要</a></li>
					<li><a href="#">お問い合わせ</a></li>
				</ul>
			</nav>
			<img th:src="@{/images/top.jpg}" alt="チェスキークルムロフ" class="top_image">
		</header>
		<main>
			<article>
				<h2>新着情報</h2>
				<table>
					<tr th:each="n : ${newsList}">
						<td>
							[[${n.newsDate}]]<br>[[${n.newsText}]]
						</td>
					</tr>
				</table>
			</article>
			<aside>
				<img th:src="@{/images/banner1.jpg}">
				<img th:src="@{/images/banner2.jpg}">
			</aside>
		</main>
		<footer>
			<p><small>Copyright &copy; 2018 DISCOVER TRAVEL, Inc. All Rights Reserved. </small></p>
		</footer>
	</div>
</body>

</html>

★<html xmlns:th=”http://www.thymeleaf.org“>
　　thymeleafを使用する時に記述

★<img th:src=”@{/images/top.jpg}” alt=”チェスキークルムロフ” class=”top_image”>
　th:とリンク式(@{ })を使用して画像のパスを記述

★<tr th:each=”n : ${newsList}”>
　拡張For文の様なイメージ
　newsList：NewsListControllerに記述したmodel.addAttribute(“newsList“, newsService.findAll());と名前を合わせる

★[[${n.newsDate}]]
　[[　]]の中に変数式(＄｛｝)を記述すると出力される
　newsDate：Entityクラスのフィールド名を記述