前回↓

はじめに

今回は前回に引き続きMVCモデルのViewを作成していく

View作成

ユーザーが触れる画面になるViewを作成していきます
templates直下にindex.htmlを作成する

src/main/resources/templates/index.html

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.thymeleaf.org">
    <head>
        <html>View</html>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <form th:action="@{/insertValue}" th:object="${person}" method="post">
            <label>Name</label>
            <input type="text" th:field="*{name}" />
            <br>
            <label>Age</label>
            <input type="text" th:field="*{age}" />
            <br>
            <input tyoe="submit" value="送信" id="button" />
        </form>
    </body>
</html>

src/main/resources/templates/result.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Result View</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <div>
            <p>[[${person.name}]]</p>
            <p>[[${person.age}]]</p>
        </div>
    </body>
</html>

見慣れない記述はthymeleafというもの
thymeleafの説明はこちら↓

おわりに

これでViewの作成は完了
次はControllerを作成したいと思います

【VSCode+SpringBoot】SpringBootでAPIを作る④

はじめに

View作成

おわりに