添加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
#开发时关闭缓存,不然没法看到实时页面
spring.thymeleaf.cache=false
#thymeleaf end
org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties这个类里面有默认的配置。
spring-boot很多配置都有默认配置：
比如默认页面映射路径为classpath:/templates/*.html
同样静态文件路径为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";
}
}
引入文件
如图，引入相应的样式、图片和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>
运行结果
image.png
image.png
网友评论