この記事はこれの続きです
静的なファイルを置いておくフォルダー作成
パッケージではなくフォルダー というのがポイント。
『src/main/resources』直下にフォルダー作成します。
フォルダー名は『static』。
静的なファイル作成後はこちら
staticより下の階層については、フォルダー名やファイル名に特別な縛りはありません。
本記事ではこのようにcssとJavaScriptのファイル置きました。
cssの中身。
JavaScriptファイルの中身。
thymeleafファイル
本記事では『css』『js』フォルダーは認証除外フォルダーに指定していません。
そのため、ログイン成功後画面で読み込むようにします。
login-success.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link th:href="@{/css/global.css}" rel="stylesheet">
<script th:src="@{/js/global.js}" charset="utf-8"></script>
</head>
<body>
<h1>login-success</h1>
<div th:text="${userName}"></div>
<form th:action="@{/logout}" method="POST">
<button type="submit" value="go">ログアウト</button>
</form>
</body>
</html>
動作確認
cssが効いていて…
JavaScriptも動作しました。
バージョン
Microsoft Windows [Version 10.0.22631.3672]
JAVA 17.0.10
Spring Boot v3.3.0