SpringBoot整合LayUI和Thymeleaf制做简单登陆页面

前面已经学习过SpringBoot整合Thymeleaf，此次主要把上次提到的简单登陆界面用博文形式写出来

记录一个小Demo的学习，若是没看过SpringBoot整合Thymeleaf能够看一下SpringBoot整合Thymeleaf(三)

先上页面效果图：

Demo所涉及的知识点

1.SpringBoot请求映射

2.static和templates静态资源映射

只要简单了解这两个知识点，就能够作出简单的登陆的页面

Demo所涉及的目录结构图

Demo所涉及的Pom文件的主要依赖

<dependencies>
        <!--thymeleaf模板引擎依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--Springboot-Web开发依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

Demo编码思路及知识点记录

1.引入Maven所须要的thymeleaf和web依赖

2.编写视图层LoginController,添加请求访问 /,/login.html的映射规则

3.经过资源文件夹形式引入layui框架的静态资源（CSS,JS）及个性定制的(CSS,JS,IMAGE),主要经过th:src,th:href两个属性引入

编写视图层LoginController，添加/,/login.html的映射规则

@Controller
public class LoginController {
    @RequestMapping({"/","login.html"})
    public String Login(){
        return "login";
    }
}

这里记录一下，SpringBoot会根据return "login";的返回值，自动找到类路径下的templates文件夹的login.html,具体的先后缀组装原则，能够在ThymeleafProperties，双击shift快捷键，输入“ThymeleafProperties”，关键的代码以下

public class ThymeleafProperties {
	private static final Charset DEFAULT_ENCODING;
    public static final String DEFAULT_PREFIX = "classpath:/templates/"; //前缀
    public static final String DEFAULT_SUFFIX = ".html";//后缀
    private boolean checkTemplate = true;
    private boolean checkTemplateLocation = true;
    private String prefix = "classpath:/templates/";//类路径下的templates文件夹
    private String suffix = ".html";
    private String mode = "HTML";
}

引入layui框架的静态资源（CSS,JS）及个性定制的(CSS,JS,IMAGE)

LayUI框架是一个前端框架，能够快速搭建一个简约页面，能够到官网下载最新的版本,具体的静态资源时放在类路径的static文件下，由于这是SpringBoot约定好的静态资源文件存放位置之一（另外还有四个文件夹能够存放）

最后就是在html页面，引用thymeleaf的使用，往页面中引入这些CSS,JS,IMAGE ,主要用到th:src,th:href两个属性

<!--css -->
	<link rel="stylesheet"  th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/login.css}"/>
	<!--images -->
	<img  th:src="@{/images/01.jpg}"/>
	<img  th:src="@{/images/03.jpg}"/>
	<!-- Layui Js -->
	<script type="text/javascript" th:src="@{/layui/layui.js}"></script>

Demo及静态页面下载

登陆页面源代码：基于Layui简约登陆界面

🔨Github： springboot-themeleaf-layui