Html 对登录页面使用自定义css_Html_Css_Spring Boot_Thymeleaf

Html 对登录页面使用自定义css

html css spring-boot

Html 对登录页面使用自定义css,html,css,spring-boot,thymeleaf,Html,Css,Spring Boot,Thymeleaf,我正在使用SpringBoot制作一个网站。我想使用我自己的登录页面和样式使用CSS。但是，CSS不会链接到HTML页面（由ThymlLeaf提供支持）属性基于已定义的CSS，我希望登录页面的背景颜色为红色，但这不会发生。此外，当登录成功进行时，它显示的不是index.html，而是style.css 如果有人能帮我找出如何将css文件正确链接到html文件，我真的很感激控制器类： @Controller public class ControllerManager { @GetM

我正在使用SpringBoot制作一个网站。我想使用我自己的登录页面和样式使用CSS。但是，CSS不会链接到HTML页面（由ThymlLeaf提供支持）属性

基于已定义的CSS，我希望登录页面的背景颜色为红色，但这不会发生。此外，当登录成功进行时，它显示的不是index.html，而是style.css

如果有人能帮我找出如何将css文件正确链接到html文件，我真的很感激

控制器类：

@Controller
public class ControllerManager {

    @GetMapping("/login")
    public String login(){
        return "login";
    }

    @GetMapping(value = {"/",""} )
    public String homePage(){
        return "index";
    }
}

配置类：

@Configuration
public class ConfigManager extends WebSecurityConfigurerAdapter {


    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .authorizeRequests()
                    .anyRequest()
                    .fullyAuthenticated()
                    .and()
                .formLogin()
                    .loginPage("/login")
                    .permitAll();
    }
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Please Login</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/style.css}"/>
</head>
<body>
<div>
    <div class="container">
        <form name="f" th:action="@{/login}" method="post">
            <fieldset>
                <legend>Please Login</legend>
                <div th:if="${param.error}" class="alert alert-error">
                Invalid username and password.
                </div>
                <div th:if="${param.logout}" class="alert alert-success">
                You have been logged out.
                </div>
                <label for="username">Username</label>
                <input type="text" id="username" name="username"/>
                <label for="password">Password</label>
                <input type="password" id="password" name="password"/>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Log in</button>
                </div>
            </fieldset>
        </form>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>

</body>
</html>

登录前：

登录后：

当我单击返回（时，您应该忽略静态资源，如下所示

配置类：

我希望它能对你有所帮助！

可能是因为你的css文件名为

style.css

，但是你在

login.html

中包含了

login.css

？谢谢你指出这一点。这是我在问题中的输入错误，我编辑了它。错误的行为不是因为这个。你是否包含了

spring.resources.add-map>这一行pings=true

在您的

应用程序.properties

文件中？是的，我确实包含了它。您能向我们展示生成的html文件吗（例如，从您的浏览器控制台）还有可能是文件结构的屏幕截图？是的，非常感谢。请您也解释一下好吗？通过spring security filter，所有请求都包括

/css/style.css

重定向到

登录

，然后再成功登录。因此，您应该忽略静态资源以防止出现这种情况。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Please Login</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>

<p th:text="Hello World">Greeting</p>
</body>
</html>

body{
    background-color: red;
}

@Configuration
public class ConfigManager extends WebSecurityConfigurerAdapter {

    @Override
    public void configure(WebSecurity web) {
        web.ignoring().antMatchers("/css/**", "/js/**");
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .authorizeRequests()
                    .anyRequest()
                    .fullyAuthenticated()
                    .and()
                .formLogin()
                    .loginPage("/login")
                    .permitAll();
    }
}