完成数据的页面展示

43次阅读

共计 2090 个字符，预计需要花费 6 分钟才能阅读完成。

完成数据的页面展示

创建 Spring Boot 项目，引入 Thymeleaf 依赖

编写配置文件

打开 application.properties 全局配置文件，在该文件中对 Thymeleaf 模板页面的数据缓存进行设置


       #
thymeleaf 页面缓存设置（默认为 true），开发中方便调试应设置为 false，上线稳定后应保持默认 true

      spring.thymeleaf.cache=false

使用“spring.thymeleaf.cache=false”将 Thymeleaf 默认开启的缓存设置为了 false，用来关闭模板页面缓存

创建 web 控制类

在项目中创建名为 com.lagou.controller 的包，并在该包下创建一个用于前端模板页面动态数据替换效果测试的访问实体类 LoginController


@Controller

public class LoginController {

 

   
/**

        
* 获取并封装当前年份跳转到登录页 login.html

          */

 

   
@RequestMapping("/toLoginPage")

   
public String toLoginPage(Model model){

       
model.addAttribute("currentYear",
Calendar.getInstance().get(Calendar.YEAR));

       
return "login";

    }

toLoginPage() 方法用于向登录页面 login.html 跳转，同时携带了当前年份信息 currentYear。

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

在“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 整合成功，完成了静态资源的引入和动态数据的显示

学习让人快乐，学习更让人觉得无知！学了 1 个多月的《Java 工程师高薪训练营》，才发现自己对每个技术点的认知都很肤浅，根本深不下去，立个 Flag：每天坚持学习一小时，一周回答网上 3 个技术问题，把自己知道都分享出来。

正文完