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