完成数据的页面展示

  1. 创建Spring Boot项目,引入Thymeleaf依赖

编写配置文件


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


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

      spring.thymeleaf.cache=false

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

  1. 创建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个技术问题,把自己知道都分享出来。


孙辣椒
1 声望0 粉丝