springBoot整合thymeleaf

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

1. 创建SpringBoot项目

1.1 选择起步依赖

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

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

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模板文件。

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 不捡自然无阅读(3030) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· springBoot热部署

· spring的相关配置文件

· SpringBoot Thymeleaf

· SpringBoot实战教程（3）| 整合Thymeleaf

· SpringBoot集成Thymeleaf（六）

任庆博

导航

统计

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜