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>
\