创建模板页面并引入静态资源文件

在“classpath:/templates/”目录下引入一个用户登录的模板页面login.html


<!DOCTYPE html>

<html lang="en"
xmlns:th="http://www.thymeleaf.org">

<head>

   
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">

   
<meta name="viewport" content="width=device-width,
initial-scale=1,shrink-to-fit=no">

   
<title>用户登录界面</title>

   
<link th:href="@{/login/css/bootstrap.min.css}"
rel="stylesheet">

   
<link th:href="@{/login/css/signin.css}"
rel="stylesheet">

</head>

<body class="text-center">

<!-- 
用户登录form表单 -->

<form class="form-signin">

   
<img class="mb-4"
th:src="@{/login/img/login.jpg}" width="72"
height="72">

   
<h1 class="h3 mb-3 font-weight-normal">请登录</h1>

   
<input type="text" class="form-control"

          
th:placeholder="用户名"
required="" autofocus="">

   
<input type="password" class="form-control"

          
th:placeholder="密码"
required="">

   
<div class="checkbox mb-3">

       
<label>

           
<input type="checkbox" value="remember-me"> 记住我

       
</label>

   
</div>

   
<button class="btn btn-lg btn-primary btn-block"
type="submit" >登录</button>

   
<p class="mt-5 mb-3 text-muted">© <span
th:text="${currentYear}">2019</span>-<span th:text="${currentYear}+1">2020</span></p>

</form>

</body>

</html>

通过“xmlns:th="http://www.thymeleaf.org"”引入了Thymeleaf模板标签；

使用“th:href”和“th:src”分别引入了两个外联的样式文件和一个图片；

使用“th:text”引入了后台动态传递过来的当前年份currentYear

5．效果测试

可以看出，登录页面login.html显示正常，在文件4-3中使用“th:*”相关属性引入的静态文件生效，并且在页面底部动态显示了当前日期2019-2020，而不是文件中的静态数字2019-2020。这进一步说明了Spring Boot与Thymeleaf整合成功，完成了静态资源的引入和动态数据的显示
这些内容，是从拉勾教育的《Java工程师高薪训练营》里学到的，课程内容非常全面，还有拉勾的内推大厂服务，推荐你也看看。

创建模板页面并引入静态资源文件

孙辣椒

引用和评论

SpringBoot概念

Java8的新特性

Java11的新特性

Java5的新特性

Java9的新特性

Java13的新特性

Java7的新特性