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