7 — 简单了解thymeleaf

1、官网学习地址

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

2、什么是thymeleaf?

一张图看明白:

  • 7 — 简单了解thymeleaf

解读:

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

  • jsp支持非常强大的功能,包括能写Java代码,但是,SpringBoot是以jar的方式,不是war,第二,我们用的还是嵌入式的Tomcat,所以,springboot现在默认是不支持jsp的

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

SpringBoot推荐使用模板引擎:

模板引擎,我们其实大家听或多或少都听说过一些,其实jsp就是一个模板引擎,还有用的比较多的freemarker,包括SpringBoot给我们推荐的Thymeleaf,模板引擎有非常多,但再多的模板引擎,他们的思想都是一样的

  • 模板引擎的作用就是我们来写一个页面模板,比如有些值,是动态的,我们写一些表达式。而这些值从哪来?就是我们在后台封装一些数据。然后把这个模板和这个数据交给模板引擎,模板引擎按照我们封装的数据把这表达式解析出来、填充到我们指定的位置,然后把这个数据最终生成一个我们想要的内容从而最后显示出来,这就是模板引擎。

  • 不管是jsp还是其他模板引擎,都是这个思想。只不过,不同模板引擎之间,他们可能语法有点不一样。其他的就不介绍了,这里主要介绍一下SpringBoot给我们推荐的Thymeleaf模板引擎,这模板引擎,是一个高级语言的模板引擎,他的这个语法更简单。而且功能更强大

3、在官网中说到了thymeleaf的取数据方式

7 — 简单了解thymeleaf

提取出来看一下,从而在springboot中演示一下

  • 简单的表达:
    • 变量表达式: ${...}
    • 选择变量表达式: *{...}
    • 消息表达: #{...}
    • 链接 URL 表达式: @{...}
    • 片段表达式: ~{...}

4、在springboot中使用thymeleaf

1)、导入依赖


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

2)、怎么使用thymeleaf,即:html文件应该放到什么目录下

  • 前面我们已经导入了依赖,那么按照springboot的原理,底层会帮我们导入相应的东西,并做了相应的配置,那么就去看一下源码,从而知道我们应该把文件放在什么地方( 注:springboot中和配置相关的都在xxxxxProperties文件中,因此:去看一下thymeleaf对应的thymeleafProperties文件

  • 7 — 简单了解thymeleaf

  • 那就来建一个
    7 — 简单了解thymeleaf

  • 编写controller,让其跳到templates目录的页面中去
    7 — 简单了解thymeleaf

  • 测试
    7 — 简单了解thymeleaf

    • 成功跳过去了

3)、那就延伸,传输数据( 参照官网来 )

7 — 简单了解thymeleaf

  • 这里只演示 变量表达式: ${...},其他的都是一样的原理

  • 编写后台,存入数据
    7 — 简单了解thymeleaf

  • 在前台获取数据
    7 — 简单了解thymeleaf

  • 测试:

    • 7 — 简单了解thymeleaf

5、有了基础,就可以玩一下其他的了

7 — 简单了解thymeleaf

  • 玩一下
    • 后台

      • 7 — 简单了解thymeleaf
    • 前台

      • 7 — 简单了解thymeleaf
    • 测试

      • 7 — 简单了解thymeleaf

其他的玩法都差不多

上一篇:狂神员工管理系统(没链接数据库)


下一篇:Springboot中thymeleaf导入静态资源问题