1. 소개

이 빠른 사용방법(예제)에서는 Thymeleaf 템플릿 에서 CSS 및 JavaScript를 사용하는 방법을 배웁니다 .

먼저 예상되는 폴더 구조를 살펴보고 파일을 저장할 위치를 알 수 있습니다. 그런 다음 Thymeleaf 템플릿에서 해당 파일에 액세스하기 위해 수행해야하는 작업을 살펴 ​​보겠습니다.

페이지에 CSS 스타일을 추가하는 것으로 시작한 다음 몇 가지 JavaScript 기능을 추가합니다.

2. 설정

애플리케이션에서 Thymeleaf를 사용하기 위해 Thymeleaf 용 Spring Boot Starter를 Maven 구성에 추가하겠습니다 .

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>2.2.6.RELEASE</version>
</dependency>

3. 기본 예

3.1. 디렉토리 구조

이제 Thymeleaf는 Spring Boot 애플리케이션과 쉽게 통합 할 수있는 템플릿 라이브러리입니다. 기본적으로 Thymeleaf는 이러한 템플릿을 src / main / resources / templates 폴더 에 배치 할 것으로 예상 합니다. 하위 폴더를 만들 수 있으므로이 예제 에서는 cssandjs 라는 하위 폴더를 사용합니다 .

CSS 및 JavaScript 파일의 경우 기본 디렉토리는 src / main / resources / static 입니다. CSS 및 JS 파일에 대해 각각 static / styles / cssandjs 및 static / js / cssandjs 폴더를 생성 해 보겠습니다 .

3.2. CSS 추가

하자라는 간단한의 CSS 파일을 생성 main.css가 우리의 정적 / 스타일 / cssandjs 몇 가지 기본 스타일을 정의 폴더를 :

h2 {
    font-family: sans-serif;
    font-size: 1.5em;
    text-transform: uppercase;
}

strong {
    font-weight: 700;
    background-color: yellow;
}

p {
    font-family: sans-serif;
}

다음으로,의라는 Thymeleaf 템플릿을 만들 수 styledPage.html 에 우리의 템플릿 / cssandjs 폴더 이러한 스타일을 사용하려면 :

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Add CSS and JS to Thymeleaf</title>
    <link th:href="@{/styles/cssandjs/main.css}" rel="stylesheet" />
</head>
<body>
    <h2>Carefully Styled Heading</h2>
    <p>
        This is text on which we want to apply <strong>very special</strong> styling.
    </p>
</body>
</html>

Thymeleaf의 특별한 th : ​​href 속성이 있는 링크 태그를 사용하여 스타일 시트를로드 합니다. 예상되는 디렉토리 구조를 사용한 경우 src / main / resources / static 아래에 경로 만 지정하면됩니다 . 이 경우에는 /styles/cssandjs/main.css입니다 . @ {/ 스타일 / cssandjs / main.css가} 구문은 URL의 연결을하는 Thymeleaf의 방법입니다.

애플리케이션을 실행하면 스타일이 적용된 것을 볼 수 있습니다.

 

 

 

 

3.3. JavaScript 사용

다음으로, Thymeleaf 페이지에 JavaScript 파일을 추가하는 방법을 배우겠습니다.

src / main / resources / static / js / cssandjs / actions.js 의 파일에 JavaScript를 추가하는 것으로 시작하겠습니다 .

function showAlert() {
    alert("The button was clicked!");
}

그런 다음 Thymeleaf 템플릿으로 돌아가서 JavaScript 파일을 가리키는 <script> 태그를 추가 합니다.

<script type="text/javascript" th:src="@{/js/cssandjs/actions.js}"></script>

이제 템플릿에서 메서드를 호출합니다.

<button type="button" th:onclick="showAlert()">Show Alert</button>

애플리케이션을 실행하고 경고 표시 버튼을 클릭 하면 경고 창이 표시됩니다.

마무리하기 전에 JavaScript에서 Spring 컨트롤러의 데이터를 사용하는 방법을 배우면서이 예제를 약간 빌드 해 보겠습니다.

페이지에 이름을 제공하도록 컨트롤러를 수정하여 시작하겠습니다.

@GetMapping("/styled-page")
public String getStyledPage(Model model) {
    model.addAttribute("name", "Baeldung Reader");
    return "cssandjs/styledPage";
}

다음 으로 경고에이 이름을 사용 하는 함수를 actions.js 파일에 추가해 보겠습니다 .

function showName(name) {
    alert("Here's the name: " + name);
}

마지막으로 컨트롤러의 데이터를 사용하여 함수를 호출하려면 스크립트 인라인 을 사용해야 합니다. 따라서 로컬 JavaScript 변수에 이름 값을 배치하겠습니다 .

<script th:inline="javascript">
    var nameJs = /*[[${name}]]*/;
</script>

이렇게함으로써 컨트롤 의 이름 모델 값 을 포함하는 로컬 JavaScript 변수를 만들었습니다. 그러면 나머지 페이지에서 JavaScript에서 사용할 수 있습니다.

이제이 작업을 완료 했으므로 nameJs 변수를 사용하여 JavaScript 함수를 호출 할 수 있습니다 .

<button type="button" th:onclick="showName(nameJs);">Show Name</button>

4. 결론

이 짧은 예제에서 우리는 Thymeleaf 페이지에 CSS 스타일과 외부 JavaScript 기능을 적용하는 방법을 배웠습니다. 권장되는 디렉토리 구조로 시작하여 Spring 컨트롤러 클래스에 제공된 데이터를 사용하여 JavaScript를 호출하는 작업을 수행했습니다.

항상 그렇듯이 코드는 GitHub에서 사용할 수 있습니다 .