四、spring security【集成前端框架thymeleaf+bootstrap并定制登录页】

maven,pom.xml

     <!--前端 begin-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>webjars-locator-core</artifactId>
    </dependency>
    <!--前端框架bootstrap的js、css等类库，以jar包形式引入-->
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>bootstrap</artifactId>
        <version>4.5.0</version>
    </dependency>
    <!--前端 end-->

webJars

1. WebJars能使Maven的依赖管理支持OSS的JavaScript库/CSS库，比如jQuery、Bootstrap等；
2. WebJars是将Web前端Javascript和CSS等资源打包成Java的Jar包，这样在Java Web开发中我们可以借助Maven这些依赖库的管理，保证这些Web资源版本唯一性。
  • 添加一个login.html页面，引入webjar相关前端类库
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title th:text="#{login.page.title}"></title>
    <link
            rel="stylesheet"
            type="text/css"
            href="/webjars/bootstrap/css/bootstrap.min.css"
            th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"
    />
</head>
<body>
<div class="container">
    <form name="f" th:action="@{/login}" method="post">
        <div
                th:if="${param.error}"
                class="alert alert-danger"
                th:text="#{login.page.bad-credential}"
        >
            Invalid username and password.
        </div>
        <div
                th:if="${param.logout}"
                class="alert alert-success"
                th:text="#{login.page.logout.msg}"
        >
            You have been logged out.
        </div>
        <div class="form-group">
            <label for="username" th:text="#{login.page.form.username}"
            >Username:</label
            >
            <input
                    type="text"
                    class="form-control"
                    id="username"
                    name="username"
            />
        </div>
        <div class="form-group">
            <label for="password" th:text="#{login.page.form.password}"
            >Password:</label
            >
            <input
                    type="password"
                    class="form-control"
                    id="password"
                    name="password"
            />
        </div>
        <div class="form-check">
            <input
                    type="checkbox"
                    class="form-check-input"
                    id="remember-me"
                    name="remember-me"
            />
            <label class="form-check-label" for="remember-me" th:text="#{login.page.form.remember-me}"
            >Remember Me:</label
            >
        </div>
        <!--<input
                type="hidden"
                id="csrf_token"
                th:name="${_csrf.parameterName}"
                th:value="${_csrf.token}"
        />-->
        <button
                type="submit"
                class="btn btn-primary"
                th:text="#{login.page.form.submit}"
        >
            Submit
        </button>
    </form>
</div>
<script src="/webjars/jquery/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
</body>
</html>

添加国际化


messages.properties:
messages_en.properties:
messages_zh_CN.properties:

login.page.title=登录
login.page.logout.msg=您已退出登录
login.page.bad-credential=用户名或密码不正确
login.page.form.username=用户名
login.page.form.password=密码
login.page.form.submit=登录
index.page.menu.sign-out=退出登录
login.page.form.remember-me=记住我

在SecurityConfig配置类中定义访问登录页的路径/login

WebMvcConfig 配置静态资源、配置视图解析

/**
 * 前端资源配置
 */
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 最终采取该方式
        WebJarAssetLocator locator = new WebJarAssetLocator();
        Map<String, String> webJars = locator.getWebJars();
        webJars.forEach((key, version)->{
            registry.addResourceHandler("/webjars/"+key+"/**")
                    .addResourceLocations("classpath:/META-INF/resources/webjars/"+key+"/"+version+"/");
        });

        // 不明原因不生效
        // registry.addResourceHandler("/webjars/**")
        //         .addResourceLocations("/webjars/");

        // 测试 访问：http://localhost:8080/webjars/bootstrap.js
        // registry.addResourceHandler("/webjars/**")
        //         .addResourceLocations("classpath:/META-INF/resources/webjars/bootstrap/4.5.0/js/");
        registry.setOrder(1);
    }

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // “/login”对应访问的登录页URL, “login”对应login.html具体的视图
        registry.addViewController("/login").setViewName("login");
    }
}
  • addResoureHandler：指的是对外暴露的访问路径
    一般格式为：/xxx/xx/**
  • addResourceLocations：指的是内部文件放置的目录。注意：必须使用“/”（斜杆）结尾。
    常见格式有：
    /webjars/
    classpath:/META-INF/public-web-resources/
    file:D:/abc.txt
  • ResourceHandlerRegistry
    当调用addResourceLocations()时，ResourceHandlerRegistration对象其实接受了一组资源路径,可能来自classpath,也可能来自文件系统，然后它将这些路径记录下来，最后生成静态资源处理器(resource handler)时，会用到上面提到的这些URL pattern和资源路径resource locations。
    当应用开发人员通过上面的registry.addResourceHandler("/repo/**").addResourceLocations("file:/tmp/")这种方式配置完静态资源映射关系之后，这些关系会被ResourceHandlerRegistry registry对象记录下来。然后在应用启动过程中,Spring MVC配置执行阶段，具体来讲，是bean resourceHandlerMapping实例化过程中，这些信息会被使用
posted @ 2023-06-18 20:48  aesopcmc  阅读(37)  评论(0)    收藏  举报