狂神说SpringBoot系列连载课程,通俗易懂,基于SpringBoot2.2.5版本,欢迎各位狂粉转发关注学习。

微信公众号:狂神说(首发)    Bilibili:狂神说Java(视频)

未经作者授权,禁止转载

Thymeleaf

模板引擎

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

jsp支持非常强大的功能,包括能写Java代码,但是呢,我们现在的这种情况,SpringBoot这个项目首先是以jar的方式,不是war,像第二,我们用的还是嵌入式的Tomcat,所以呢,他现在默认是不支持jsp的

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

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

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

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

我们呢,就来看一下这个模板引擎,那既然要看这个模板引擎。首先,我们来看SpringBoot里边怎么用。

引入Thymeleaf

怎么引入呢,对于springboot来说,什么事情不都是一个start的事情嘛,我们去在项目中引入一下。给大家三个网址:

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

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

Spring官方文档:找到我们对应的版本

https://docs.spring.io/spring-boot/docs/2.2.5.RELEASE/reference/htmlsingle/#using-boot-starter

找到对应的pom依赖:可以适当点进源码看下本来的包!

  1. <!--thymeleaf-->
  2. <dependency>
  3. <groupId>org.springframework.boot</groupId>
  4. <artifactId>spring-boot-starter-thymeleaf</artifactId>
  5. </dependency>

Maven会自动下载jar包,我们可以去看下下载的东西;

Thymeleaf分析

前面呢,我们已经引入了Thymeleaf,那这个要怎么使用呢?

我们首先得按照SpringBoot的自动配置原理看一下我们这个Thymeleaf的自动配置规则,在按照那个规则,我们进行使用。

我们去找一下Thymeleaf的自动配置类:ThymeleafProperties

  1. @ConfigurationProperties(
  2. prefix = "spring.thymeleaf"
  3. )
  4. public class ThymeleafProperties {
  5. private static final Charset DEFAULT_ENCODING;
  6. public static final String DEFAULT_PREFIX = "classpath:/templates/";
  7. public static final String DEFAULT_SUFFIX = ".html";
  8. private boolean checkTemplate = true;
  9. private boolean checkTemplateLocation = true;
  10. private String prefix = "classpath:/templates/";
  11. private String suffix = ".html";
  12. private String mode = "HTML";
  13. private Charset encoding;
  14. }

我们可以在其中看到默认的前缀和后缀!

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

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

测试

1、编写一个TestController

  1. @Controller
  2. public class TestController {
  3.  
  4. @RequestMapping("/t1")
  5. public String test1(){
  6. //classpath:/templates/test.html
  7. return "test";
  8. }
  9.  
  10. }

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <h1>测试页面</h1>
  9.  
  10. </body>
  11. </html>

3、启动项目请求测试

Thymeleaf 语法学习

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

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

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

1、修改测试请求,增加数据传输;

  1. @RequestMapping("/t1")
  2. public String test1(Model model){
  3. //存入数据
  4. model.addAttribute("msg","Hello,Thymeleaf");
  5. //classpath:/templates/test.html
  6. return "test";
  7. }

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

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>狂神说</title>
  6. </head>
  7. <body>
  8. <h1>测试页面</h1>
  9.  
  10. <!--th:text就是将div中的内容设置为它指定的值,和之前学习的Vue一样-->
  11. <div th:text="${msg}"></div>
  12. </body>
  13. </html>

4、启动测试!

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

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

2、我们能写哪些表达式呢?

  1. Simple expressions:(表达式语法)
  2. Variable Expressions: ${...}:获取变量值;OGNL
  3. 1)、获取对象的属性、调用方法
  4. 2)、使用内置的基本对象:#18
  5. #ctx : the context object.
  6. #vars: the context variables.
  7. #locale : the context locale.
  8. #request : (only in Web Contexts) the HttpServletRequest object.
  9. #response : (only in Web Contexts) the HttpServletResponse object.
  10. #session : (only in Web Contexts) the HttpSession object.
  11. #servletContext : (only in Web Contexts) the ServletContext object.
  12.  
  13. 3)、内置的一些工具对象:
  14.       #execInfo : information about the template being processed.
  15.       #uris : methods for escaping parts of URLs/URIs
  16.       #conversions : methods for executing the configured conversion service (if any).
  17.       #dates : methods for java.util.Date objects: formatting, component extraction, etc.
  18.       #calendars : analogous to #dates , but for java.util.Calendar objects.
  19.       #numbers : methods for formatting numeric objects.
  20.       #strings : methods for String objects: contains, startsWith, prepending/appending, etc.
  21.       #objects : methods for objects in general.
  22.       #bools : methods for boolean evaluation.
  23.       #arrays : methods for arrays.
  24.       #lists : methods for lists.
  25.       #sets : methods for sets.
  26.       #maps : methods for maps.
  27.       #aggregates : methods for creating aggregates on arrays or collections.
  28. ==================================================================================
  29.  
  30. Selection Variable Expressions: *{...}:选择表达式:和${}在功能上是一样;
  31. Message Expressions: #{...}:获取国际化内容
  32. Link URL Expressions: @{...}:定义URL
  33. Fragment Expressions: ~{...}:片段引用表达式
  34.  
  35. Literals(字面量)
  36. Text literals: 'one text' , 'Another one!' ,…
  37. Number literals: 0 , 34 , 3.0 , 12.3 ,…
  38. Boolean literals: true , false
  39. Null literal: null
  40. Literal tokens: one , sometext , main ,…
  41.  
  42. Text operations:(文本操作)
  43. String concatenation: +
  44. Literal substitutions: |The name is ${name}|
  45.  
  46. Arithmetic operations:(数学运算)
  47. Binary operators: + , - , * , / , %
  48. Minus sign (unary operator): -
  49.  
  50. Boolean operations:(布尔运算)
  51. Binary operators: and , or
  52. Boolean negation (unary operator): ! , not
  53.  
  54. Comparisons and equality:(比较运算)
  55. Comparators: > , < , >= , <= ( gt , lt , ge , le )
  56. Equality operators: == , != ( eq , ne )
  57.  
  58. Conditional operators:条件运算(三元运算符)
  59. If-then: (if) ? (then)
  60. If-then-else: (if) ? (then) : (else)
  61. Default: (value) ?: (defaultvalue)
  62.  
  63. Special tokens:
  64. No-Operation: _

练习测试

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

  1. @RequestMapping("/t2")
  2. public String test2(Map<String,Object> map){
  3. //存入数据
  4. map.put("msg","<h1>Hello</h1>");
  5. map.put("users", Arrays.asList("qinjiang","kuangshen"));
  6. //classpath:/templates/test.html
  7. return "test";
  8. }

2、测试页面取出数据

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>狂神说</title>
  6. </head>
  7. <body>
  8. <h1>测试页面</h1>
  9.  
  10. <div th:text="${msg}"></div>
  11. <!--不转义-->
  12. <div th:utext="${msg}"></div>
  13.  
  14. <!--遍历数据-->
  15. <!--th:each每次遍历都会生成当前这个标签:官网#9-->
  16. <h4 th:each="user :${users}" th:text="${user}"></h4>
  17.  
  18. <h4>
  19. <!--行内写法:官网#12-->
  20. <span th:each="user:${users}">[[${user}]]</span>
  21. </h4>
  22.  
  23. </body>
  24. </html>

3、启动项目测试!

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

一定要关注分享支持一下哦~

狂神说SpringBoot11:Thymeleaf模板引擎的更多相关文章

  1. (二)SpringBoot基础篇- 静态资源的访问及Thymeleaf模板引擎的使用

    一.描述 在应用系统开发的过程中,不可避免的需要使用静态资源(浏览器看的懂,他可以有变量,例:HTML页面,css样式文件,文本,属性文件,图片等): 并且SpringBoot内置了Thymeleaf ...

  2. 【Springboot】Springboot整合Thymeleaf模板引擎

    Thymeleaf Thymeleaf是跟Velocity.FreeMarker类似的模板引擎,它可以完全替代JSP,相较与其他的模板引擎,它主要有以下几个特点: 1. Thymeleaf在有网络和无 ...

  3. 三、thymeleaf模板引擎构建前台html, 后台使用 ModelAndView 和 Model 模型

    项目源码:https://github.com/y369q369/springBoot.git      ->     thymeleaf 私聊QQ: 1486866853 1.pom.xml中 ...

  4. SpringBoot使用thymeleaf模板引擎

    (1).添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...

  5. Spring Boot 2.0 整合Thymeleaf 模板引擎

    本节将和大家一起实战Spring Boot 2.0 和thymeleaf 模板引擎 1. 创建项目 2. 使用Spring Initlizr 快速创建Spring Boot 应用程序 3. 填写项目配 ...

  6. Thymeleaf模板引擎的初步使用

    在springboot中,推荐使用的模板引擎是Thymeleaf模板引擎,它提供了完美的Spring MVC的支持.下面就简单的介绍一下Thymeleaf模板引擎的使用. 在controller层中, ...

  7. spring boot: thymeleaf模板引擎使用

    spring boot: thymeleaf模板引擎使用 在pom.xml加入thymeleaf模板依赖 <!-- 添加thymeleaf的依赖 --> <dependency> ...

  8. SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染

    在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们 ...

  9. (二)SpringBoot2.0基础篇- 静态资源的访问及Thymeleaf模板引擎的使用

    一.描述 在应用系统开发的过程中,不可避免的需要使用静态资源(浏览器看的懂,他可以有变量,例:HTML页面,css样式文件,文本,属性文件,图片等): 并且SpringBoot内置了Thymeleaf ...

随机推荐

  1. C#扫盲篇(二)依赖倒置•控制反转•依赖注入•面向接口编程--满腹经纶的说

    扫盲系列的文章收到了广大粉丝朋友的支持,十分感谢,你们的支持就是我最大动力. 我的扫盲系列还会继续输出,本人也是一线码农,有什么问题大家可以一起讨论.也可以私信或者留言您想要了解的知识点,我们一起进步 ...

  2. Java中定时器Timer致命缺点(附学习方法)

    简介 这篇文章我一直在纠结到底要不要写,不想写一来因为定时器用法比较简单,二来是面试中也不常问.后来还是决定写了主要是想把自己分析问题思路分享给大家,让大家在学习过程中能够参考,学习态度我相信大部分人 ...

  3. 单细胞分析实录(8): 展示marker基因的4种图形(一)

    今天的内容讲讲单细胞文章中经常出现的展示细胞marker的图:tsne/umap图.热图.堆叠小提琴图.气泡图,每个图我都会用两种方法绘制. 使用的数据来自文献:Single-cell transcr ...

  4. ICMP协议概述

    • ICMP是三层协议,和IP.ARP.ICMP同属三层    • IP协议中的6是代表上层的TCP协议,17代表UDP协议,1代表同层的ICMP协议    • ICMP协议主要用来探测       ...

  5. shelll中test命令的使用【转】

    Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值.字符和文件三个方面的测试. 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于 ...

  6. 【SpringBoot1.x】SpringBoot1.x 检索

    SpringBoot1.x 检索 文章源码 概念 Elasticsearch 是一个分布式的开源搜索和分析引擎,适用于所有类型的数据,包括文本.数字.地理空间.结构化和非结构化数据.Elasticse ...

  7. wpf 中用 C# 代码创建 PropertyPath ,以对间接目标进行 Storyboard 动画.

    如图,一个 Rectangle 一个 Button ,点击按钮时要通过动画完成对 Rectangle填充色的渐变动画. Xaml: 1 <Window 2 x:Class="WpfAp ...

  8. Kaggle泰坦尼克-Python(建模完整流程,小白学习用)

    参考Kernels里面评论较高的一篇文章,整理作者解决整个问题的过程,梳理该篇是用以了解到整个完整的建模过程,如何思考问题,处理问题,过程中又为何下那样或者这样的结论等! 最后得分并不是特别高,只是到 ...

  9. 【Docker】Docker启动停止重启 Redirecting to /bin/systemctl start docker.service

    [root@liuawen local]# docker -v Docker version 1.13.1, build cccb291/1.13.1 [root@liuawen local]# 启动 ...

  10. linux线程库

    linux 提供两个线程库,Linux Threads 和新的原生的POSIX线程库(NPTL),linux threads在某些情况下仍然使用,但现在的发行版已经切换到NPTL,并且大部分应用已经不 ...