1. 개요

이 예제에서는 JavaScript 코드를 포함하는 Thymeleaf 뷰에서 Spring MVC 객체에 접근하는 방법을 보여줄 것입니다. 예제에서는 Spring Boot와 Thymeleaf 템플릿 엔진을 사용하지만 아이디어는 다른 템플릿 엔진에서도 작동합니다.

두 가지 경우를 설명하겠습니다. JavaScript 코드가 엔진에 의해 생성 된 웹 페이지에 포함되거나 내부에있는 경우와 페이지 외부에있는 경우 (예 : 별도의 JavaScript 파일)입니다.

2. 설정

Thymeleaf 템플릿 엔진을 사용하는 Spring Boot 웹 애플리케이션을 이미 구성했다고 가정 해 보겠습니다. 그렇지 않으면 다음 사용방법(예제)를 시작하는 데 유용 할 수 있습니다.

또한 애플리케이션에 index.html 이라는 템플릿에서 뷰를 렌더링  하는 엔드 포인트 / index에 해당하는 컨트롤러가 있다고 가정 해 보겠습니다 . 이 템플릿에는 내장 또는 외부 JavaScript 코드 (예 : script.js) 가 포함될 수 있습니다 .

우리의 목표는 임베디드 또는 외부 JavaScript (JS) 코드에서 Spring MVC 매개 변수에 액세스 할 수있는 것입니다.

3. 매개 변수에 액세스

먼저 JS 코드에서 사용하려는 모델 변수를 만들어야합니다.

Spring MVC에는 다양한 방법이 있습니다. ModelAndView 접근 방식을 사용하겠습니다 .

@RequestMapping("/index")
public ModelAndView thymeleafView(Map<String, Object> model) {
    model.put("number", 1234);
    model.put("message", "Hello from Spring MVC");
    return new ModelAndView("thymeleaf/index");
}

Spring MVC의 Model , ModelMap 및 ModelView 에 대한 사용방법(예제)에서 다른 가능성을 찾을 수 있습니다  .

4. 임베디드 JS 코드

임베디드 JS 코드는 <script> 요소  내부 에있는 index.html 파일  의 일부일 뿐입니다 . Spring MVC 변수를 아주 간단하게 전달할 수 있습니다.

<script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>

Thymeleaf 템플릿 엔진은 모든 표현식을 현재 실행 범위에서 사용할 수있는 값으로 대체합니다. 이는 템플릿 엔진이 위에서 언급 한 코드를 다음 HTML 코드로 변환 함을 의미합니다.

<script>
    var number = 1234;
    var message = "Hello from Spring MVC!";
</script>

5. 외부 JS 코드

src 속성을 지정하는  동일한 <script> 태그를  사용하여 외부 JS 코드가 index.html 파일에 포함되어 있다고 가정 해 보겠습니다 .

<script src="/js/script.js"></script>

이제 script.js 에서 Spring MVC 매개 변수를 사용하려면 다음  을 수행해야합니다.

  1. 이전 섹션에서했던 것처럼 임베디드 JS 코드에 JS 변수를 정의합니다.
  2. script.js  파일 에서 이러한 변수에 액세스

외부 JS 코드는 포함 된 JS 코드의 변수를 초기화 한 후에 호출해야합니다 .

이는 JS 코드 실행 순서를 지정하거나 비동기 JS 코드 실행을 사용하는 두 가지 방법으로 수행 할 수 있습니다.

5.1. 실행 순서 지정

index.html에 포함 된 코드 뒤에 외부 JS 코드를 선언하여이를 수행 할 수 있습니다 .

<script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>
<script src="/js/script.js"></script>

5.2. 비동기 코드 실행

이 경우 index.html 에서 외부 및 포함 된 JS 코드를 선언하는 순서는   중요하지 않지만 script.js 의 코드를  일반적인 페이지로드 래퍼에 배치해야합니다.

window.onload = function() {
    // JS code
};

이 코드의 단순성에도 불구하고 가장 일반적인 방법은 대신 jQuery  를 사용하는  것입니다. index.html  파일 의 첫 번째 <script> 요소  로이 라이브러리를 포함 합니다.

<!DOCTYPE html>
<html>
    <head>
        <script src="/js/jquery.js"></script>
        ...
    </head>
 ...
</html>

이제 다음 jQuery 래퍼 안에 JS 코드를 배치 할 수 있습니다 .

$(function () {
    // JS code
});

이 래퍼를 사용하면 전체 페이지 콘텐츠 및 기타 모든 포함 된 JS 코드가 완전히로드 된 경우에만 JS 코드가 실행되도록 보장 할 수 있습니다.

6. 약간의 설명

Spring MVC에서 Thymeleaf 템플릿 엔진은 템플릿 파일 (이  경우 index.html) 만 구문 분석 하고이를 HTML 파일로 변환합니다. 이 파일에는 템플릿 엔진 범위를 벗어난 다른 리소스에 대한 참조가 포함될 수 있습니다. 이러한 리소스를 구문 분석하고 HTML보기를 렌더링하는 것은 사용자의 브라우저입니다.

따라서 이러한 리소스는 템플릿 엔진에 의해 구문 분석되지 않으며 컨트롤러에 정의 된 변수를 외부 JS 코드에 사용할 수있는 임베디드 JS 코드에만 주입 할 수 있습니다.

7. 결론

이 예제에서 우리는 JavaScript 코드 내에서 Spring MVC 매개 변수에 접근하는 방법을 배웠습니다.

항상 그렇듯이 전체 코드 예제는  GitHub 저장소에 있습니다.