・はじめに
この記事においては、会員情報の送信などユーザーに何かデータを送信してほしいときによく使うHTMLのフォームとそのFormで送られる情報をJavaで受け取る方法を書いていきます。・HTMLの設定
createAccount.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://thymeleaf.org">
<head>~省略~</head>
<body>
<h3>会員登録</h3>
<form th:action="@{/create}" th:method="@{post}">
<label>メールアドレス：</label>
<input type="email" name="address" /><br>
<label>ユーザー名：</label>
<input type="text" name="userName" /><br>
<label>パスワード</label>
<input type="password" name="passWord" /><br>
<input type="submit" value="送信" />
</form>
</body>
</html>
このcreateAccount.htmlにおいては、ユーザーにメールアドレス・ユーザー名・パスワードを登録してもらう想定で作っています。
ここで重要なのは４点あります。１点目は@ModelAttributeです。これによってデータクラスとコントローラーが繋がります。
２点目はHTMLの要素の前にthを入れることです。`th`を入れることによってThymeleafと結びつきます。
３点目は、actionです。ここでactionはフォームが送信された際の遷移先を指定するものです。ここで指定した遷移先にデータが送られます。
４点目は、inputのname属性です。ここで指定したnameが送信先のgetterと結びつきます。
complete.html
<!DOCTYPE html>
<html lang="ja">
<head>~省略~</head>
<body>
<h3>登録が完了しました!</h3>
</body>
</html>
このHTMLファイルは、登録が完了した際に出てくる画面です。
・コントローラクラス
Controller.java
@GetMapping("/createAccount")
public String createAccount() {
return "createAccount";
}
@PostMapping("/create")
public String create(@ModelAttribute Users users) {
users.setAddress(users.getAddress());
users.setUserName(users.getUserName());
users.setPassWord(users.getPassWord());
return "complete";
}
このコントローラークラスでは、/createAccountに接続すると、登録に必要な情報を入力する画面に遷移します。そして/createはcreateAccount.htmlのフォームを送信した際に使われるものです。ここのgetterとsetterがHTMLのフォームのname属性とつながります。
・データクラス
Users.java
@Data
public class Users {
private int id;
private String address;
private String userName;
private String passWord;
}
このクラスではユーザー登録に必要な情報のデータを集めたデータクラスです。MyBatisを使ってgetterやsetterなどを省略してます。ここのデータクラスとHTMLのname属性とコントローラークラスのgetter、setterが繋がっている。
使ったファイルのまとめ
Controller.java
@GetMapping("/createAccount")
public String createAccount() {
return "createAccount";
}
@PostMapping("/create")
public String create(@ModelAttribute Users users) {
users.setAddress(users.getAddress());
users.setUserName(users.getUserName());
users.setPassWord(users.getPassWord());
return "complete";
}
Users.java
@Data
public class Users {
private int id;
private String address;
private String userName;
private String passWord;
}
createAccount.html
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://thymeleaf.org">
<head>~省略~</head>
<body>
<h3>会員登録</h3>
<form th:action="@{/create}" th:method="@{post}">
<label>メールアドレス：</label>
<input type="email" name="address" /><br>
<label>ユーザー名：</label>
<input type="text" name="userName" /><br>
<label>パスワード</label>
<input type="password" name="passWord" /><br>
<input type="submit" value="送信" />
</form>
</body>
</html>
complete.html
<!DOCTYPE html>
<html lang="ja">
<head>~省略~</head>
<body>
<h3>登録が完了しました!</h3>
</body>
</html>