一步一步学 SpringBoot2
第4章: 使用 Thymeleaf 模板引擎
本章主要介绍Thymeleaf 模板引擎、Thymeleaf模板引擎标签和函数、SpringBoot 中如何使用Thymeleaf、集成测试以及Rest Client 工具的使用。
4.1 Thymelear 模板引擎介绍
Theymeleaf 是一个优秀的、面向Java的XML/XHTML/HTML5页面模板,具有丰富的标签语言何函数。因此,在使用SpringBoot框架进行页面设计时,一般都会选择Thymeleaf模板。下面简单列举一下Thymeleaf常用的表达式、标签和函数。
常用表达式:
- ${…} 变量表达式。
- *{…} 选择表达式。
- #{…}消息文字表达式。
- @{…}链接url表达式。
- #maps 工具对象表达式。
常用标签: - th: action 定义后台控制器路径。
- th: each 循环语句。
- th: field 表单字段绑定。
- th: href 定义超链接。
- th: id div标签中的ID声明,类似HTML标签中的ID属性。
- th: if 条件判断语句。
- th: include 布局标签,替换内容到引入文件。
- th: fragment 布局标签,定义一个代码片段,方便其他地方引用。
- th: object 替换对象。
- th: src 图像类地址引入。
- th: text 显示文本。
- th: value 属性赋值。
常用函数: - #dates 日期函数。
- #list 列表函数。
- #arrays 数组函数。
- #strings 字符串函数。
- #calendars 日历函数。
- #objects 对象函数。
- #bools 逻辑函数。
关于Thymeleaf表达式、标签、函数等更多内容,大家可以到官方网站(http://www.thymelear,org/)参考学习,这里不过多描述。
4.2 使用 Thymelear 模板引擎
4.2.1 引入依赖
要使用Thymeleaf模板引擎,我们需要在pom.xml文件中引入依赖。依赖引入之后,记得刷新依赖。具体代码如下:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
同时,我们还需要在application.properties文件中添加Thymeleaf配置,具体代码如下:
#Thymeleaf配置
#模板的模式,支持HTML、XML、TEXT、JAVASCRIPT等
spring.thymeleaf.mode=HTML5
#编码,可不用配置
spring.thymeleaf.encoding=UTF-8
#内容类别,可不用配置
spring.thymeleaf.content-type=text/html
#开发配置为falser,避免修改模板还要重启服务器
spring.thymeleaf.cache=false
#配置模板路径,默认是templates,可以不用配置
#spring.thymeleaf.prefix=classpath:/templates/
这个要注意的是,Thymeleaf模板引擎默认会读取my-spring-boot项目资源文件夹resource 下的templates 目录,这个目录是用来存放HTML文件的。如果我们添加了Thymeleaf依赖,而没有进行任何配置,或者添加默认目录,启动应用时就会报错。
4.2.2 控制层开发
在my-spring-boot项目目录/src/main/java/com.example.demo.controller下开发控制层类AyUserController.java,同时把AyUserService服务注入控制层类当中。具体代码如下:
@Controller
@RequestMapping("/ayUser")
public class AyUserController {
@Resource
private AyUserService ayUserService;
@RequestMapping("/test")
public String test(Model model){
//查询数据库所有用户
List<AyUser> ayUser = ayUserService.findAll();
model.addAttribute("users",ayUser);
return "ayUser";
}
}
- @Controller:标注此类为一个控制层类,同时让Spring Boot 容器管理起来。
- @RequestMapping:是一个用来处理请求地址映射的注解,可用于类或者方法。用于类,表示类中所有响应请求的方法都是以该地址作为父路径的。@RequestMapping注解有value、method等属性,value属性可以默认不写。"/ayUser"就是value属性的值,value属性的值就是请求的实际地址。
- Model对象:一个接口,我们可以把数据库查询出来得数据设置到该类中,前端会从该对象获取数据。其实现类为ExtendedModelMap,具体可看源代码:
public class ExtendedModelMap extends ModelMap implements Model {
public EztendedModelMap (){
}
}
4.2.3 Thymelear 模板页面开发
控制层类AyUserController.java开发完成之后,我们继续在/src/main/resources/templates目录下开发ayUser.html页面,具体代码如下:
<!doctype html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta http-equiv="content-type" content="text/html" />
<title>Hello</title>
</head>
<body>
<table>
<tr>
<!-- <td>Id</td>-->
<td>用户名</td>
<td>密码</td>
</tr>
<tr th:each="user:${users}">
<!-- <th th:text="${user.id}"></th>-->
<td th:text="${user.name}"></td>
<td th:text="${user.password}"></td>
</tr>
</table>
</body>
</html>
是Thymeleaf命名空间,通过引入该命名空间就可以在HTML文件中使用Thymeleaf标签语言,用关键字"th"来标注。 下面看几个简单的例子:
//th:text用于显示文本Hello、Thymeleaf
<p th:text=" 'Hello,Thymeleaf' "></p>
//${}关键字用于获取内存变量为name的值
<p th:text="${name}"></p>
//th:src用于设定<img>图片文件的链接地址,@{}为超链接url表达式
<img th:src="@{/image/a.jpg}"/>
4.3 集成测试
4.3.1 测试
在上一节中,我们已经简单开发好控制层类和前端HTML页面。现在重新运行入口类MySpringBootApplication的main方法,然后在浏览器中访问http://locatlhost:8080/ayUser/test,出现如图所示的页面,说明SpringBoot集成Thymeleaf成功,同时也说明我们开发的前端页面没有问题。
4.3.2 Rest Client 工具介绍
Rest Client 是一个用于测试RESTful Web Service的Java客户端,非常小巧,界面非常简单。IntelliJ IDEA 软件已经集成该插件,方便我们进行调试。我们可以在IntelliJ IDEA功能菜单中选择【Tools】>【Test RESTful web service】来打开插件,具体如图所示:
在Rest Client插件中,我们可以在HTTP method 中选择请求方式:Post方式或者Get方式等。在Host、port:中填入需要访问的主机host和端口port,在Path中填入访问的映射路径,最后单击右上角run按钮,就可以访问后端代码。同时,可以在Request、Cookies、Response、Respons Headers中查看请求信息、Cookies信息、响应信息、请求头信息等。
4.3.3 使用 Rest Client 测试
接下来,我们使用Rest Client介绍控制层类代码。在Rest Client界面中,在HTTP method 中选择Get方式,在Host/port中填入 http://localhost:8080,在Path中填入ayUser/test,具体如图所示。然后单击run按钮运行之后,当我们看到如图所示的Response响应界面时,说明代码执行成功。