任庆博

导航

springBoot整合thymeleaf

Thymeleaf作为后端页面开发模板,避免了前后端分离带来的跨域等问题,对于后台管理等简单页面可以快速进行开发迭代。 学习Thymeleaf,首先了解一下如何将Thymeleaf集成到SpringBoot项目中使用。

1. 创建SpringBoot项目

1.1 选择起步依赖

在创建SpringBoot项目时,官方提供了很多的起步依赖,其中就有Thymeleaf相关的启动器,在Template Engines模板引擎下勾选Thymeleaf启动器,由于是Web页面的开发,所以还需要引入Web模块启动器。

image.png

勾选后点击下一步并完成项目创建。

1.2 手动添加依赖

如果在项目创建时没有选择相关的Thymeleaf启动器,则可以在maven的坐标配置pom.xml文件中添加thymeleaf的依赖信息。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
复制代码

完成创建后,就得到了一个集成Thymeleaf的SpringBoot项目,结构上与普通项目一样,但是在resources文件夹下多了一个templates文件夹,这个文件夹就是用于存放Thymeleaf模板文件。

image.png

2. Thymeleaf配置

2.1 SpringBoot自动配置Thymeleaf

SpringBoot框架中提供了对Thymeleaf模板引擎的自动加载配置,在SpringBoot的自动配置类包中,有一个org.springframework.boot.autoconfigure.thymeleaf包,定义的ThymeleafProperties类就是thymeleaf的自动配置类,其中指定了thymeleaf框架的一些默认属性,比如模板的默认路径前缀classpath:/templates/,以及模板文件格式后缀.html

ThymeleafProperties类的部分定义内容如下:

//自动配置类ThymeleafProperties
@ConfigurationProperties( prefix = "spring.thymeleaf" )
public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING;
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";
    private boolean checkTemplate = true;
    private boolean checkTemplateLocation = true;
    private String prefix = "classpath:/templates/";
    private String suffix = ".html";
    private String mode = "HTML";
    ...
}
复制代码

可以看出,配置类读取的是SpringBoot配置文件中以spring.thymeleaf作为前缀的配置内容,因此,如果需要自定义thymeleaf的相关配置,只需要在application.properties文件中指定即可。

2.2 自定义配置项

自动配置类ThymeleafProperties初始化时会读取application.properties文件中配置的内容,配置文件中可以定义的thymeleaf配置项有:

# thymeleaf模板文件前缀,可以自定义文件夹如classpath:/templates/temp
spring.thymeleaf.prefix=classpath:/templates/
# thymeleaf模板文件后缀
spring.thymeleaf.suffix=.html
# 视图模板类型
spring.thymeleaf.mode=HTML
# 默认视图编码格式
spring.thymeleaf.encoding=UTF-8 
# 响应类型
spring.thymeleaf.servlet.content-type=text/html
# 配置页面缓存,thymeleaf默认开启缓存,页面不能及时刷新,需要关闭
spring.thymeleaf.cache=false
复制代码

通过自定义的配置相关属性的值,在实际使用时可以更好的控制对thymeleaf模板引擎的使用。

3. Thymeleaf页面效果

创建了项目,添加了配置,下面就来看一下thymeleaf带来的页面效果。

3.1 定义HTML文件

使用thymeleaf模板引擎展示页面,首先要创建一个html文件,并按照thymeleaf语法编码与接口数据绑定。

  • 定义html文件时,要对其中的<html>标签使用xmlns:th="http://www.thymeleaf.org"声明,这样在当前html页面中才可以使用thymeleaf语法。
  • 对于服务接口绑定返回的数据集合,可以使用th:each="user : ${userEntityList}"遍历对应值
  • 对于每个属性的值,使用th:text="${user.getName()}"来获取展示
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>电话</th>
            </tr>
        </thead>
        <tbody>
        <tr th:each="user : ${userEntityList}">
            <td th:text="${user.getName()}">name</td>
            <td th:text="${user.getGender()}">male</td>
            <td th:text="${user.getPhone()}">13812341234</td>
        </tr>
        </tbody>
    </table>
</body>
</html>
复制代码

3.2 定义服务接口

定义服务接口来向thymeleaf模板传递数据,接口定义时需要注意:

  • 使用@Controller注解而不是@RestController,因此@RestController会将结果解析后直接展示字符串内容,而不能根据字符串获取对应的模板名称
  • 服务接口需要加入Model对象作为参数,并使用Model对象来绑定需要传递的数据,以便在thymeleaf中使用
@Controller
public class ThymeleafController {
    @RequestMapping("/index")
    public String getIndex(Model model){
        List<UserEntity> userList = new ArrayList<>();
        UserEntity user = new UserEntity("tom","female", "17788996600");
        userList.add(user);
        model.addAttribute(userList);
        return "index";
    }
}

3.3 页面展示

如此这般之后,可以运行项目,并请求定义的服务接口,此时会根据接口将数据加入Model中,并根据接口的返回结果找到对应的thymeleaf模板文件,在模板文件中将数据渲染,最终展示在页面中。

 

 

在 Thymeleaf 之中逻辑运算可以使用下面的一些运算符来完成,例如:and、or、关系比较(>、<、>=、<=、==、!=、lt、gt、le、ge、eq、ne等)。

下面说明一下:lt、gt、le、ge、eq、ne所代表的含义:

lt:less than 小于
le:less than or equal to 小于等于
eq:equal to 等于
ne:not equal to 不等于
ge:greater than or equal to 大于等于
gt:greater than 大于
not: 非运算
mod:取模
and:与运算
or:或运算

 

 


转载:https://juejin.cn/post/7030820165042307108

posted on 2022-03-22 11:04  不捡自然无  阅读(2096)  评论(0编辑  收藏  举报