Thymeleaf

132 阅读3分钟

Thymeleaf

模板引擎

应用控制器可以根据客户端请求,调用业务方法,并转发页面。但是,对于页面中展示动态数据的处理,只能以拼接字符串方式进行。

应用控制器对于生成动态网页繁琐,不利于项目分工。

解决方案之一,就是利用模板引擎简化动态数据的生成。

模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的 HTML 文档。

模板引擎可以让(网站)程序实现界面与数据分离,业务代码与逻辑代码的分离,这就大大提升了开发效率,良好的设计也使得代码重用变得更加容易。

常见的模板引擎有:

Jsp

Thymeleaf

Freemarker

……


@Controller 和@ RestController 的区别:

@Controller 对方法返回的字符串,默认进行页面跳转。@RestController 对方法返回字符串原样输出到客户端。

@RestController 对方法返回的是 java 对象,则默认将java 对象转换为 json 字符串,然后再输出到客户端。相当于 @Controller 和 @ResponseBody 的结合体。


在控制器中加入 @Controller 后,跳转页面的方式有两种:请求转发和重定向。

请求转发到指定页面:

return "/showInfo.html";

重定向到指定页面:

return "redirect:/showInfo.html";

重定向的工作流程:

客户端访问服务器,服务器在产生响应时,产生 302 状态码,同时产生 location 响应头,存放第二次请求的路径。客户端在接收到响应信息后,发现是 302 状态码,就会读取 location 响应头的内容,然后再向服务器发出第二次请求。

请求转发:服务器在接收到客户端请求后,在服务器内部进行资源调配,客户端可以只发一次请求。

重定向和请求转发的区别:

1、重定向客户端需要发出二次请求,所有,无法共享 request 中绑定的数据。而请求转发客户端只发出一次请求,可以共享 request 中绑定的数据。

2、请求转发,浏览器地址栏不会发生变化,重定向会在第二次请求时,将浏览器地址栏路径设置为真实路径。

3、请求转发,只能转发本服务器内部的资源,而重定向可以在第二次请求时,访问别的服务器。


thymeleaf 环境搭建

在 springBoot 环境下,添加 thymeleaf 启动器

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

在 maven 项目的 resources 目录下,新建 application.yml 。进行 thymeleaf 配置(可选,不写有默认值)。

/新建 application.properties

server.port=8088#开启 thymeleaf 视图解析
spring.thymeleaf.enabled=true
#编码
spring.thymeleaf.encoding=UTF-8
#前缀
spring.thymeleaf.prefix=classpath:/templates/
#是否使用缓存
spring.thymeleaf.cache=false
#严格的HTML语法模式
spring.thymeleaf.mode=HTML
#后缀名
spring.thymeleaf.suffix=.html

在 maven 项目的 resources 目录下,新建 templates 目录,存放 thymeleaf 页面。


在应用控制器中,绑定共享数据:

@RequestMapping("test")
public String test(HttpServletRequest req){
    //绑定共享数据
    req.setAttribute("name","cici");
    req.setAttribute("age",17);
​
    //请求转发到指定页面
    return "/showInfo.html";
}

在页面中,显示共享数据:

1、设置 thymeleaf 前缀:

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

2、显示共享数据:

姓名:<span th:text="${name}"></span><br>
年龄:<span th:text="${age}"></span>

3、判断语句:

<span th:if="${age >= 18}">(已成年)</span>
<span th:if="${age < 18}">(未成年)</span>

4、循环语句:

在应用控制器中绑定共享数据:

req.setAttribute("list",userList);

在页面中,通过 th:each 进行循环

<table border="1" cellspacing="0" width="80%">
    <thead>
    <th>编号</th>
    <th>姓名</th>
    <th>电话</th>
    </thead>
​
    <tbody>
    <tr th:each="obj : ${list}">
        <td th:text="${obj.id}"></td>
        <td th:text="${obj.name}"></td>
        <td th:text="${obj.phone}"></td>
    </tr>
    </tbody>
</table>

\