この記事はこれの続きです

静的なファイルを置いておくフォルダー作成

パッケージではなくフォルダー というのがポイント。

『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