完成数据的页面展示

完成数据的页面展示

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

image-20191230160651703

2. 编写配置文件

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

properties

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

spring.thymeleaf.cache=false

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

3. 创建web控制类

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

```java

@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

```html

用户登录界面

请登录

<input type=“text” class=“form-control”

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

<input type=“password” class=“form-control”

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

记住我

登录

© 2019-2020

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

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

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

5.效果测试

image-20200103103127625

​ 可以看出,登录页面login.html显示正常,在文件4-3中使用“th:*”相关属性引入的静态文件生效,并且在页面底部动态显示了当前日期2019-2020,而不是文件中的静态数字2019-2020。这进一步说明了Spring Boot与Thymeleaf整合成功,完成了静态资源的引入和动态数据的显示

这些内容,是从拉勾教育的《Java工程师高薪训练营》里学到的,课程内容非常全面,还有拉勾的内推大厂服务,推荐你也看看。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值