6月25日

投稿者: | 2020年6月25日
0件のコメント

新しいプロジェクトを作成します。

プロジェクト名: mydata
グループ: jp.abc
パッケージ: jp.abc

次の画面で以下の項目を追加する。
・HyperSQL Database
・Thymeleaf
・Spring Web

「完了」でプロジェクトを作成する。

pom.xmlを確認すると足りない項目があるので書き足す。

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>

プロジェクトを右クリックして[Maven]-[プロジェクトの更新]
プロジェクトを右クリックして[実行]-[Maven install]

BUILD SUCCESS が出ればOK。

新規クラスを作成する。

パッケージ: jp.abc
クラス名: IndexController

package jp.abc;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {
	@RequestMapping("/")
	public ModelAndView index(ModelAndView mav) {
		mav.setViewName("layout");
		return mav;
	}
}

demoプロジェクトのlayout.html・header.html・footer.htmlをコピーしてtemplatesフォルダに貼り付けする。
layout.htmlはそのままではエラーが出たので、以下のように修正する

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>layout.html</title>
<style type="text/css">
header {
  background: #f0f0f0;
  text-align: center;
  padding: 50px;
}

h1.header {
  text-shadow: 5px 5px 5px gray;
  transform: rotate(-10deg);
}

footer {
  background: #e0e0e0;
  text-align: center;
}

li {
  display: inline-block;
}

a {
  text-decoration: none;
}
</style>
</head>
<body>

<header th:include="header :: header">
仮のヘッダーです
</header>

<nav>
</nav>

<section th:include="${template} :: ${fragment}">
<h1>layout</h1>
<p>本文です。</p>
</section>


<footer th:include="footer :: footer">
仮のフッターです
</footer>

</body>
</html>

新しいフラグメントとして mydata.html を用意する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>linux.html</title>
</head>
<body>

<div th:fragment="mydata">
<h1>MyData</h1>
<p>MyDataフラグメント</p>
<p th:text="${fragment}"></p>
</div>

</body>
</html>

IndexController.java

package jp.abc;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {
	@RequestMapping("/")
	public ModelAndView index(ModelAndView mav) {
		mav.addObject("template", "mydata");
		mav.addObject("fragment", "mydata");
		mav.setViewName("layout");
		return mav;
	}
}

MyDataクラスを作成する。

package jp.abc;

public class MyData {
	private long id;
	private String name;
	private String mail;
	private int age;
	private String memo;
}

ここまで作ったら、メニューから[ソース]-[getterおよびsetterの生成]を選択する。
すべてを選択してOKすると、getter/setterが生成される。

package jp.abc;

public class MyData {
	private long id;
	private String name;
	private String mail;
	private int age;
	private String memo;
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getMail() {
		return mail;
	}
	public void setMail(String mail) {
		this.mail = mail;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getMemo() {
		return memo;
	}
	public void setMemo(String memo) {
		this.memo = memo;
	}
}

MyDataにデータベースと関連付けるためのアノテーションを追加していく。

package jp.abc;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;

@Entity // my_dataテーブルと関連付けられる
public class MyData {
	@Id
	@Column
	@GeneratedValue
	private long id;

	@Column(length = 100, nullable = false)
	private String name;

	@Column(length = 100, nullable = false)
	private String mail;

	@Column
	private int age;

	@Column(nullable = true)
	private String memo;

	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getMail() {
		return mail;
	}
	public void setMail(String mail) {
		this.mail = mail;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getMemo() {
		return memo;
	}
	public void setMemo(String memo) {
		this.memo = memo;
	}
}

IndexControllerでMyDataを作成してModelAndViewにわたす

package jp.abc;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {
	@RequestMapping("/")
	public ModelAndView index(ModelAndView mav) {
		MyData myData = new MyData();
		myData.setName("山田花子");
		myData.setMail("hanako@example.com");
		myData.setAge(20);
		mav.addObject("myData", myData);
		mav.addObject("template", "mydata");
		mav.addObject("fragment", "mydata");
		mav.setViewName("layout");
		return mav;
	}
}

mydata.htmlに受け取ったデータを表示するコードを追加する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>linux.html</title>
</head>
<body>

<div th:fragment="mydata">
<h1>MyData</h1>
<p>MyDataフラグメント</p>
<p th:text="${myData.name}"></p>
<p th:text="${myData.mail}"></p>
<p th:text="${myData.age}"></p>
<p th:text="${myData.memo}"></p>
<p th:text="${fragment}"></p>
</div>

</body>
</html>