Spring Thymeleaf(HTML)のFormとSpring(Javaのデータクラス)のつなげ方

<h4>・はじめに</h4>
　この記事においては、会員情報の送信などユーザーに何かデータを送信してほしいときによく使うHTMLのフォームとそのFormで送られる情報をJavaで受け取る方法を書いていきます。

<h4>・HTMLの設定</h4>

```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>
```
<br>
　このcreateAccount.htmlにおいては、ユーザーにメールアドレス・ユーザー名・パスワードを登録してもらう想定で作っています。<br>
　ここで重要なのは４点あります。１点目は<b>@ModelAttribute</b>です。これによってデータクラスとコントローラーが繋がります。<br>
　２点目はHTMLの要素の前に<b>th</b>を入れることです。`th`を入れることによってThymeleafと結びつきます。<br>
　３点目は、<b>action</b>です。ここでactionはフォームが送信された際の遷移先を指定するものです。ここで指定した遷移先にデータが送られます。<br>
　４点目は、inputの<b>name属性</b>です。ここで指定したnameが送信先のgetterと結びつきます。<br>

```HTML:complete.html
<!DOCTYPE html>
<html lang="ja">
    <head>~省略~</head>
    <body>
        <h3>登録が完了しました!</h3>
    </body>
</html>
```

このHTMLファイルは、登録が完了した際に出てくる画面です。<br><br>

<h4>・コントローラクラス</h4>

```Java: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属性とつながります。<br><br>

<h4>・データクラス</h4>

```Java: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が繋がっている。

<h4>使ったファイルのまとめ</h4>

```Java: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";
}
```

```Java:Users.java
@Data
public class Users {
    private int id;
    private String address;
    private String userName;
    private String passWord;
}
```

```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>
```

```HTML:complete.html
<!DOCTYPE html>
<html lang="ja">
    <head>~省略~</head>
    <body>
        <h3>登録が完了しました!</h3>
    </body>
</html>
```