Question

我正在使用Spring Boot来制作网站。我想使用自己的登录页面并使用CSS设置其样式。但是，CSS不会链接到HTML页面（由thymleaf驱动）属性。

基于已定义的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();
    }
}

login.html文件

<!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>

template / index.html

<!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>

static / css / style.css

body{
    background-color: red;
}

登录前：

登录后：

当我单击返回（<-）按钮时，将应用样式：

调试器当我要登录时：

登录后的调试器：

点击“返回”按钮后的调试器：

Answer 1

更改

 <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/login.css}"/>

收件人

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

在 login.html

中

Answer 2

您应该忽略静态资源，如下所示。

配置类：

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

希望它能对您有所帮助！

使用自定义CSS登录页面

2 个答案:

配置类：