[SPRING] 어떻게 스프링 부팅 응용 프로그램에 CSS와 JS를 추가할까요?

어떻게 스프링 부팅 응용 프로그램에 CSS와 JS를 추가할까요?

Thymeleaf를 사용하는 Spring Boot의 HTML 페이지에 CSS를 추가하고 CSS 파일을 정적 폴더에 추가하고 그런 식으로 연결했습니다.

<link rel="stylesheet" th:href="@{/css/home.css}" href="../../css/home.css" />

하지만 작동하지 않습니다.

URL에서 CSS 및 js 액세스를 중지하고 싶었 기 때문에이 방법을 보안 구성에 추가했습니다.

@Override
public void configure(WebSecurity web) throws Exception {
   web
      .ignoring()
      .antMatchers("/resources/static/**"); // #3
}

아무도 내 오류 또는 구성이 필요한지 말해 줄 수 있습니까?

해결법

1. ==============================

   1..css와 .js는 정적 리소스이고 Spring Boot는 기본적으로 / resources / static 폴더에 매핑합니다.

   .css와 .js는 정적 리소스이고 Spring Boot는 기본적으로 / resources / static 폴더에 매핑합니다.

   예 :

   /resources/static/css/style.css에있는 style.css 파일이 있습니다.

   thymeleaf를 통해 액세스하려면 html 머리 부분에 다음을 추가하십시오.

   <link th:href="@{/css/style.css}" rel="stylesheet" />
   

   여기서 관찰 해 보겠다. @EnableWebMvc annotation을 사용하고 있다면 정적 리소스를 자신의 구성으로 매핑해야한다.

   편집하다

   URL에 CSS 및 js 액세스를 중지하고 싶었 기 때문에이 방법을 보안 구성에 추가했습니다.

   모든 리소스는 브라우저에서 액세스해야합니다. 그렇지 않으면 .css 및 .js가로드되지 않습니다.

   인증 된 사용자에 대해서만 리소스에 액세스해야하는 경우 다음 구성을 시도 할 수 있습니다.

   보안 구성 예제 :

     @Override
       protected void configure(HttpSecurity http) throws Exception {
           http
                   .authorizeRequests()
                   .antMatchers( "/public/**").permitAll()
                   .antMatchers( "/private/**").authenticated()
                   .anyRequest().authenticated()
                   .and()
                   .formLogin()
                   .loginPage("/login")
                   .permitAll()
                   .and()
                   .logout()
                   .permitAll()
   
           ;
       }
   }
   

   마지막으로 public 리소스에 액세스하려고 시도합니다. 예를 들어 공용 폴더 아래에 style.css 파일이있는 경우 http : // localhost : 808 / public / style.css에 액세스하려고 시도하면 브라우저에 style.css 함유량.

   예를 들어 개인 폴더 아래에 private.css가있는 경우 (인증없이) 개인 폴더에 액세스하려고하면 http : // localhost : 808 / private / private.css를 시도하십시오. 로그인 페이지로 리디렉션되어야합니다. 즉, 먼저 로그인해야하고 그 봄 이후에 private.css 리소스에 액세스 할 수있게됩니다.

   thymeleaf와 관련하여 공개 HTML 페이지가 공용 리소스를 사용하기 때문에 동일한 접근 방식입니다. 보호 된 리소스에 대해 사용자 개인 소스 < 링크 th : href = "@ {/ private / syle.css}"rel = "stylesheet"/>

from https://stackoverflow.com/questions/45536972/how-add-css-and-js-to-spring-boot-application by cc-by-sa and MIT license