4.2.2 基本使用

(1) Thymeleaf模板基本配置

​ 首先 在Spring Boot项目中使用Thymeleaf模板,首先必须保证引入Thymeleaf依赖,示例代码如下:

```html

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

```

其次,在全局配置文件中配置Thymeleaf模板的一些参数。一般Web项目都会使用下列配置,示例代码如:

```properties

spring.thymeleaf.cache = true #启用模板缓存

spring.thymeleaf.encoding = UTF-8 #模板编码

spring.thymeleaf.mode = HTML5 #应用于模板的模板模式

spring.thymeleaf.prefix = classpath:/templates/ #指定模板页面存放路径

spring.thymeleaf.suffix = .html #指定模板页面名称的后缀

```

​ 上述配置中,spring.thymeleaf.cache表示是否开启Thymeleaf模板缓存,默认为true,在开发过程中通常会关闭缓存,保证项目调试过程中数据能够及时响应;spring.thymeleaf.prefix指定了Thymeleaf模板页面的存放路径,默认为classpath:/templates/;spring.thymeleaf.suffix指定了Thymeleaf模板页面的名称后缀,默认为.html

(2)静态资源的访问

开发Web应用时,难免需要使用静态资源。Spring boot默认设置了静态资源的访问路径。

使用Spring Initializr方式创建的Spring Boot项目,默认生成了一个resources目录,在resources目录中新建public、resources、static三个子目录下,Spring boot默认会挨个从public、resources、static里面查找静态资源

##### 4.2.3 完成数据的页面展示

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

​ <img src="./images/image-20191230160651703.png" alt="image-20191230160651703" style="zoom:67%;" />

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

<!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.效果测试**

<img src="./images/image-20200103103127625.png" alt="image-20200103103127625" style="zoom:67%;" />

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


秃头少女
4 声望0 粉丝

« 上一篇
Thymeleaf