如何将CSS和JS添加到Spring Boot应用程序中? [英] how add css and js to spring boot application?

问题描述

我尝试使用Thymeleaf在Spring Boot中将CSS添加到我的HTML页面中，将CSS文件添加到静态文件夹中并以这种方式链接:

I try to add CSS to my HTML page in Spring Boot using Thymeleaf, added the CSS file in static folder and linked it that way:

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

但它不起作用.

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

I wanted to stop accessing CSS and js in the URL so I added this method to my security configuration:

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

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

Can anyone tell me what's my error or if any configuration needed?

推荐答案

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

.css and .js are static resources and Spring Boot maps it by default in your /resources/static folder

例如:

在/resources/static/css/style.css

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

If you want to access it throught thymeleaf add this to your html head section:

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

这里只是一个观察，如果您使用的是@EnableWebMvc批注，那么您应该通过自己的配置来映射静态资源.

Just an observation here, if your are using @EnableWebMvc annotation then you should map the static resources by your own configuration.

编辑

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

所有资源都应能够从浏览器访问，否则.css和.js将不会加载.

All the resources should get access from browser otherwise the .css and .js will not be loaded.

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

If you need to get access to the resources only for authenticated users you can try the following configuration:

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

1. Go to the /resources/static folder and create two sub-folders, One for resources for anonymous users public and other for authenticated users private.
2. Put all public resources to the /resources/static/public folder.
3. Put all private resources to the /resources/static/private folder.
4. Go to your Spring Security Configuration Class and make your /private url private with this configuration: .antMatchers( "/private/**").authenticated() and make /public accessible for anonymous users: .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内容.

Finally try to access the public resources, for example if you have a style.css file under public folder, then try to access it: http://localhost:808/public/style.css, the browser should display the style.css content.

例如，当您尝试访问私有文件夹(未经身份验证)时，例如，私有文件夹下有一个private.css，然后尝试:http://localhost:808/private/private.css.您应该被重定向到登录页面，这意味着您应该首先登录，然后在那个春天之后，您将可以访问private.css资源.

When you try to access the private folder (without authentication), for example there is a private.css under private folder then try it: http://localhost:808/private/private.css. You should get redirected to login page, that means that you should login first and after that spring will let you to access to private.css resource.

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

Regarding to thymeleaf it is the same approach, for public html pages use the public resources: <link th:href="@{/public/public.css}" rel="stylesheet" /> and for protected resources user private soruces <link th:href="@{/private/syle.css}" rel="stylesheet" />

这篇关于如何将CSS和JS添加到Spring Boot应用程序中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！