添加thymeleaf依賴
<!--thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
配置application.properties
#thymeleaf start
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#開發(fā)時(shí)關(guān)閉緩存,不然沒法看到實(shí)時(shí)頁面
spring.thymeleaf.cache=false
#thymeleaf end
org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties這個(gè)類里面有默認(rèn)的配置脱拼。
spring-boot很多配置都有默認(rèn)配置：
比如默認(rèn)頁面映射路徑為classpath:/templates/*.html
同樣靜態(tài)文件路徑為classpath:/static/
登錄頁面AdminController
package com.moxi.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/admin")
public class AdminController {
@GetMapping("/login")
public String login(Model model) {
model.addAttribute("projectName", "MOXI");
return "login";
}
@GetMapping("/register")
public String register(Model model) {
model.addAttribute("projectName", "MOXI");
return "register";
}
}
引入文件
如圖瞒瘸，引入相應(yīng)的樣式、圖片和js文件熄浓，引入頁面文件:
image.png
新建html文件
login.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>INSPINIA | Login</title>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet"/>
<link th:href="@{/css/animate.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css}" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<div>
<h2 class="logo-name" th:text="${projectName}">IN+</h2>
</div>
<h3 th:text="'Welcome to ' + ${projectName}">Welcome to IN+</h3>
<p>Perfectly designed and precisely prepared admin theme with over 50 pages with extra new web app views.
<!--Continually expanded and constantly improved Inspinia Admin Them (IN+)-->
</p>
<p>Login in. To see it in action.</p>
<form class="m-t" role="form" action="index.html">
<div class="form-group">
<input type="email" class="form-control" placeholder="Username" required=""/>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required=""/>
</div>
<button type="submit" class="btn btn-primary block full-width m-b">Login</button>
<a th:href="@{register}" href="#"><small>Forgot password?</small></a>
<p class="text-muted text-center"><small>Do not have an account?</small></p>
<a class="btn btn-sm btn-white btn-block" th:href="@{register}" href="register.html">Create an account</a>
</form>
<p class="m-t"> <small>Inspinia we app framework base on Bootstrap 3 ? 2014</small> </p>
</div>
</div>
<!-- Mainly scripts -->
<script th:src="@{/js/jquery-2.1.1.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
</body>
</html>
register.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>INSPINIA | Register</title>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet"/>
<link th:href="@{/css/plugins/iCheck/custom.css}" rel="stylesheet"/>
<link th:href="@{/css/animate.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css}" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<div>
<h2 class="logo-name" th:text="${projectName}">IN+</h2>
</div>
<h3 th:text="'Register to ' + ${projectName}">Register to IN+</h3>
<p>Create account to see it in action.</p>
<form class="m-t" role="form" action="login.html">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" required=""/>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" required=""/>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required=""/>
</div>
<div class="form-group">
<div class="checkbox i-checks"><label> <input type="checkbox"/><i></i> Agree the terms and policy </label></div>
</div>
<button type="submit" class="btn btn-primary block full-width m-b">Register</button>
<p class="text-muted text-center"><small>Already have an account?</small></p>
<a class="btn btn-sm btn-white btn-block" th:href="login" href="login.html">Login</a>
</form>
<p class="m-t"> <small>Inspinia we app framework base on Bootstrap 3 ? 2014</small> </p>
</div>
</div>
<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="js/plugins/iCheck/icheck.min.js"></script>
<script>
$(document).ready(function(){
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
});
});
</script>
</body>
</html>
運(yùn)行結(jié)果
image.png
image.png
