springboot9：thymeleaf

最新推荐文章于 2023-05-31 07:00:00 发布

好汤圆

最新推荐文章于 2023-05-31 07:00:00 发布

阅读量127

点赞数 1

分类专栏： springboot 文章标签： java spring boot

本文链接：https://blog.csdn.net/qq_47436772/article/details/114185454

版权

springboot 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

Thymeleaf

这期学习springboot的一个模板引擎thymeleaf

什么是模板引擎？

前端交给我们的页面，是html页面。我们在以前开发的时候需要把他们转成jsp页面，jsp好处就是当我们查出一些数据转发到JSP页面以后，我们可以用jsp轻松实现数据的显示以及交互等。

jsp支持非常强大的功能，包括能写Java代码，但是呢，我们现在的这种情况，SpringBoot这个项目首先是以jar包的方式，不是war，而且，我们用的还是嵌入式的Tomcat服务器，所以呢，现在默认是不支持jsp的。

不支持jsp，如果我们直接用纯静态页面的方式，那给我们开发会带来非常大的麻烦

SpringBoot推荐你可以来使用模板引擎：

模板引擎，我们其实大家听到很多，其实jsp就是一个模板引擎，还有以前用的比较多的freemarker，包括SpringBoot给我们推荐的Thymeleaf，模板引擎有非常多，但再多的模板引擎，他们的思想都是一样的，我们来看一下这张图：

在这里插入图片描述

模板引擎的作用就是：当我们写一个页面模板，有些数据，是动态的，我们需要写一些表达式。而这些数据，就是我们在后台封装的一些数据。然后把这个模板和这个数据交给模板引擎，模板引擎按照这个数据帮我们把表达式解析、填充到我们指定的位置，然后把这个数据最终生成一个我们想要的内容给写出去，这就是模板引擎，不管是jsp还是其他模板引擎，都是这个思想。只不过，不同模板引擎之间，语法有点不一样。我主要来介绍一下SpringBoot给我们推荐的Thymeleaf模板引擎，这是一个高级语言的模板引擎，语法更简单而且功能强大。

如何引入Thymeleaf

对于springboot来说，什么事情不都是一个start的事情嘛，我们去在项目中引入一下：

Thymeleaf 官网：https://www.thymeleaf.org/

Thymeleaf 在Github 的主页：https://github.com/thymeleaf/thymeleaf

Spring官方文档：找到我们对应的版本
https://docs.spring.io/spring-boot/docs/2.4.3/reference/htmlsingle/#using-boot-starter

找到对应的pom依赖：

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

Maven会自动下载jar包

如何使用Thymeleaf

我们只需要把我们的html页面放在类路径下的templates下，thymeleaf就可以帮我们自动渲染了。

使用thymeleaf什么都不需要配置，只需要将他放在指定的文件夹下即可！

测试：

1、编写一个TestController

@Controller
public class TestController {
    @RequestMapping("/test")
    public String test(){
        //classpath:/templates/test.html
        return "test";
    }
}

2、编写一个测试页面 test.html 放在 templates 目录下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>测试页面</h1>
    </body>
</html>

3、启动项目请求测试

Thymeleaf 语法

要学习语法，还是参考官网文档最为准确，我们找到对应的版本看一下

Thymeleaf 官网：https://www.thymeleaf.org/ ，简单看一下官网！我们去下载Thymeleaf的官方文档！

做个最简单的练习：我们需要查出一些数据，在页面中展示

1、修改测试请求，增加数据传输；

@RequestMapping("/test")
public String test(Model model){
    //存入数据
    model.addAttribute("msg","Hello,Thymeleaf");
    //classpath:/templates/test.html
    return "test";
}

2、我们要使用thymeleaf，需要在html文件中导入命名空间的约束，方便提示。

我们可以去官方文档中看一下命名空间拿过来：

xmlns:th="http://www.thymeleaf.org"

3、我们去编写下前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>hsy</title>
    </head>
    <body>
        <h1>测试页面</h1>
        <!--th:text就是将div中的内容设置为它指定的值，和之前学习的Vue一样-->
        <div th:text="${msg}"></div>
    </body>
</html>

4、启动测试即可

OK，入门搞定，我们来认真研习一下Thymeleaf的使用语法！

1、我们可以使用任意的 th:attr 来替换Html中原生属性的值！

在这里插入图片描述

2、我们能写那些表达式呢？

在这里插入图片描述

练习测试：

1、我们编写一个Controller，放一些数据

@RequestMapping("/t2")
public String test2(Map<String,Object> map){
    //存入数据
    map.put("msg","<h1>Hello</h1>");
    map.put("users", Arrays.asList("hsy","kxy"));
    //classpath:/templates/test.html
    return "test";
}

2、测试页面取出数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>hsy</title>
    </head>
    <body>
        <h1>测试页面</h1>
        <div th:text="${msg}"></div>
        <!--不转义-->
        <div th:utext="${msg}"></div>
        <!--遍历数据-->
        <!--th:each每次遍历都会生成当前这个标签：官网#9-->
        <h4 th:each="user :${users}" th:text="${user}"></h4>
        <h4>
            <!--行内写法：官网#12-->
            <span th:each="user:${users}">[[${user}]]</span>
        </h4>
    </body>
</html>

3、启动项目测试即可

我们看完语法，很多样式，我们即使现在学习了，也会忘记，所以我们在学习过程中，需要使用什么，根据官方文档来查询，才是最重要的，要熟练使用官方文档！

好汤圆

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
springboot9：thymeleaf

Thymeleaf什么是模板引擎？如何引入Thymeleaf如何使用**Thymeleaf**Thymeleaf 语法OK，入门搞定，我们来认真研习一下Thymeleaf的使用语法！这期学习springboot的一个模板引擎thymeleaf什么是模板引擎？前端交给我们的页面，是html页面。我们在以前开发的时候需要把他们转成jsp页面，jsp好处就是当我们查出一些数据转发到JSP页面以后，我们可以用jsp轻松实现数据的显示以及交互等。jsp支持非常强大的功能，包括能写Java代码，但是呢，我们现在
复制链接

扫一扫