如何将CSS和JS添加到Spring Boot应用程序？

小编典典

如何将CSS和JS添加到Spring Boot应用程序？

spring-boot

我尝试使用Thymeleaf在Spring Boot中将CSS添加到我的HTML页面中，将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
}

谁能告诉我我的错误是什么，或者是否需要任何配置？

阅读 427

2020-05-30

共1个答案

小编典典

.css并且.js是静态资源，默认情况下，Spring Boot会将其映射到您的/resources/static文件夹中

例如：

有一个style.css文件位于/resources/static/css/style.css

如果要通过百里香叶访问它，请将其添加到html头部分：

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

这里只是一个观察，如果您使用的是@EnableWebMvc注释，则应通过自己的配置映射静态资源。

编辑

我想停止访问URL中的CSS和js，所以我将此方法添加到了安全配置中

所有的资源应该从浏览器进行访问，否则.css并.js不会被加载。

如果您只需要访问经过身份验证的用户的资源，则可以尝试以下配置：

转到/resources/static文件夹并创建两个子文件夹，一个子文件夹用于匿名用户的资源，另一个子文件夹public用于经过身份验证的用户private。
将所有公共资源放入 /resources/static/public文件夹。
将所有私有资源放入 /resources/static/private文件夹。
转到您的Spring Security配置类，并/private使用以下配置将url 设为私有：.antMatchers( "/private/**").authenticated()并使/public匿名用户可以访问：.antMatchers( "/public/**").permitAll()

安全配置示例：

  @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()

        ;
    }
}

最后，尝试访问公共资源，例如，如果您style.css在公共文件夹下有一个文件，然后尝试访问它：http://localhost:808/public/style.css，浏览器应显示style.css内容。

当您尝试访问该私人文件夹（无身份验证），例如有私人文件夹下的private.css那就试试吧：http://localhost:808/private/private.css。您应该被重定向到登录页面，这意味着您应该首先登录，然后在那个spring之后，您将可以访问private.css资源。

关于百里香，这是相同的方法，因为公共HTML页面使用公共资源：<link th:href="@{/public/public.css}" rel="stylesheet" />而对于受保护资源，用户使用私有资源<link th:href="@{/private/syle.css}" rel="stylesheet" />

2020-05-30