Thymeleaf模板引擎---SpringBoot

Thymeleaf模板引擎

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

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

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ot8opUFX-1610023324140)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20210107181430546.png)]

模板引擎的作用就是我们来写一个页面模板，比如有些值呢，是动态的，我们写一些表达式。而这些值，从哪来呢，就是我们在后台封装一些数据。然后把这个模板和这个数据交给我们模板引擎，模板引擎按照我们这个数据帮你把这表达式解析、填充到我们指定的位置，然后把这个数据最终生成一个我们想要的内容给我们写出去，这就是我们这个模板引擎，不管是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.4.1.RELEASE/reference/htmlsingle/#using-boot-starter

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

        <!--thymeleaf--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.thymeleaf</groupId><artifactId>thymeleaf-spring5</artifactId></dependency><dependency><groupId>org.thymeleaf.extras</groupId><artifactId>thymeleaf-extras-java8time</artifactId></dependency>

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

Thymeleaf使用

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

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

我们去找一下Thymeleaf的自动配置类：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";private Charset encoding;
}

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

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

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

测试

1、编写一个TestController

@Controllerpublic class TestController {        @RequestMapping("/t1")    public String test1(){        //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、修改测试请求，增加数据传输；

package com.kuang.controller;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
public class IndexController {@RequestMapping("/test")public String test1(Model model){//存入数据model.addAttribute("msg","Hello,Thymeleaf");// classpath:/templates/test.htmlreturn "test";}
}

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

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

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

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

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

4、启动测试！

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

1、我们可以使用任意的 th:attr 来替换Html中原生属性的值！[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dWGLFL0-1610023324142)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]

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

Simple expressions:（表达式语法）
Variable Expressions: ${...}：获取变量值；OGNL；1）、获取对象的属性、调用方法2）、使用内置的基本对象：#18#ctx : the context object.#vars: the context variables.#locale : the context locale.#request : (only in Web Contexts) the HttpServletRequest object.#response : (only in Web Contexts) the HttpServletResponse object.#session : (only in Web Contexts) the HttpSession object.#servletContext : (only in Web Contexts) the ServletContext object.3）、内置的一些工具对象：#execInfo : information about the template being processed.#uris : methods for escaping parts of URLs/URIs#conversions : methods for executing the configured conversion service (if any).#dates : methods for java.util.Date objects: formatting, component extraction, etc.#calendars : analogous to #dates , but for java.util.Calendar objects.#numbers : methods for formatting numeric objects.#strings : methods for String objects: contains, startsWith, prepending/appending, etc.#objects : methods for objects in general.#bools : methods for boolean evaluation.#arrays : methods for arrays.#lists : methods for lists.#sets : methods for sets.#maps : methods for maps.#aggregates : methods for creating aggregates on arrays or collections.
==================================================================================Selection Variable Expressions: *{...}：选择表达式：和${}在功能上是一样；Message Expressions: #{...}：获取国际化内容Link URL Expressions: @{...}：定义URL；Fragment Expressions: ~{...}：片段引用表达式Literals（自变量）Text literals: 'one text' , 'Another one!' ,…Number literals: 0 , 34 , 3.0 , 12.3 ,…Boolean literals: true , falseNull literal: nullLiteral tokens: one , sometext , main ,…Text operations:（文本操作）String concatenation: +Literal substitutions: |The name is ${name}|Arithmetic operations:（数学运算）Binary operators: + , - , * , / , %Minus sign (unary operator): -Boolean operations:（布尔运算）Binary operators: and , orBoolean negation (unary operator): ! , notComparisons and equality:（比较运算）Comparators: > , < , >= , <= ( gt , lt , ge , le )Equality operators: == , != ( eq , ne )Conditional operators:条件运算（三元运算符）If-then: (if) ? (then)If-then-else: (if) ? (then) : (else)Default: (value) ?: (defaultvalue)Special tokens:No-Operation: _

练习测试：

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

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

2、测试页面取出数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>狂神说</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、启动项目测试！

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yZzGcXh3-1610023324144)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t1L4jRqB-1610023324148)(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==)]

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/327617.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

FinTech浪潮已到，五大金融场景将迎变革

FinTech浪潮已到，五大金融场景将迎变革

FinTech是FinanceTechnology的缩写&#xff0c;可译为“金融科技”&#xff0c;与“互联网金融”一词相比&#xff0c;它更能突出科技的重要性。FinTech所带来的&#xff0c;不仅仅是升级金融领域的各种服务&#xff0c;而是一场革命&#xff0c;是金融领域的颠覆性未来。 FinT…
阅读更多...
linux下q和q 的区别,linux命令中q、wq、q!的区别

linux下q和q 的区别,linux命令中q、wq、q!的区别

Linux中没这个命令&#xff1b;只是在vi中有这个指令&#xff1b;q表示退出&#xff1b;w表示保存退出&#xff1b;q!表示强制退出。linux命令是对Linux系统进行管理的命令&#xff0c;对于Linux系统来说&#xff0c;无论是中央处理器、内存、磁盘驱动器、键盘、鼠标&#xff0…
阅读更多...
spingmvc 通过xml配置redis jedispol 有密码 通过xml配置redis中的 jedispool(有密码)

spingmvc 通过xml配置redis jedispol 有密码 通过xml配置redis中的 jedispool(有密码)

https://blog.csdn.net/programmer_hard/article/details/103700334 通过xml配置redis中的 jedispool(有密码) programmer_hard 2019-12-25 15:55:16 209 收藏 分类专栏&#xff1a; java 版权 从git上拉了个项目一直报错, 看了下原因是因为redis一直没连接上. 于是看了下…
阅读更多...
常用的字符串加密解密工具类

常用的字符串加密解密工具类

提前声明一下:此工具类忘记出处了&#xff0c;很抱歉&#xff0c;如果原创遇上了我立马上您的链接&#xff1a; 加密解密的工具类DataEncryptUtil&#xff1a; package org.util;import java.security.MessageDigest; import javax.crypto.KeyGenerator; import javax.cryp…
阅读更多...
深入Java集合学习系列：LinkedHashSet的实现原理

深入Java集合学习系列：LinkedHashSet的实现原理

转载自 深入Java集合学习系列&#xff1a;LinkedHashSet的实现原理 1. LinkedHashSet概述&#xff1a; LinkedHashSet是具有可预知迭代顺序的Set接口的哈希表和链接列表实现。此实现与HashSet的不同之处在于&#xff0c;后者维护着一个运行于所有条目的双重链接列表。此链接…
阅读更多...
MVC自动配置原理---SpringBoot

MVC自动配置原理---SpringBoot

MVC自动配置原理 官网阅读 在进行项目编写前&#xff0c;我们还需要知道一个东西&#xff0c;就是SpringBoot对我们的SpringMVC还做了哪些配置&#xff0c;包括如何扩展&#xff0c;如何定制。 只有把这些都搞清楚了&#xff0c;我们在之后使用才会更加得心应手。途径一&…
阅读更多...
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Emp实体类和对应的配置信息

struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Emp实体类和对应的配置信息

easyui是jquery中很强大的插件&#xff0c;我们开发人员经常会遇到比较复杂的布局&#xff0c;或者在实现某个功能的时候要写好多的代码&#xff0c;比如说分页&#xff0c;那么easyui的datagrid就把他给代替了&#xff0c;现在我简要的分享几个案例。 我们先创建一个员工的实体…
阅读更多...
idea合并分支 idea git 合并分支

idea合并分支 idea git 合并分支

当前在dev上面 将dev_yjb合并到dev上面 idea git 合并分支 awesome_go 2018-07-12 16:22:20 50149 收藏 52 分类专栏&#xff1a; git idea git的使用&#xff08;四&#xff09;git建立分支与合并分支 作者&#xff1a;马育民 • 2017-11-10 17:05 • 阅读&#xff1a;10…
阅读更多...
.NET Core New csproj 如何发布可执行文件

.NET Core New csproj 如何发布可执行文件

一、前言 .NET工具链在最新的Preview3版本中&#xff0c;引入了新的MSBuild项目系统&#xff0c;项目文件又回归了.csproj的XML文件来管理&#xff0c;项目文件、包引用、程序集引用、.NET Core工具集、发布内容定义等内容。本文主要将主要讨论&#xff0c;如何在新的项目系统中…
阅读更多...
xshell linux cmd命令大全,Linux(Xshell)命令大全

xshell linux cmd命令大全,Linux(Xshell)命令大全

对Linux的操作经常是使用Xshell工具&#xff0c;这里特地整理了一些Linux比较常用的快捷键和命令&#xff0c;分享给大家&#xff0c;希望对大家有所帮助^ _ ^一、Linux常用快捷键Ctrl Z &#xff1a;退出Ctrl insert &#xff1a;复制Shift insert &#xff1a;粘贴Tab &am…
阅读更多...
java.util.Stack类简介

java.util.Stack类简介

转载自 java.util.Stack类简介 Stack是一个后进先出&#xff08;last in first out&#xff0c;LIFO&#xff09;的堆栈&#xff0c;在Vector类的基础上扩展5个方法而来 Deque&#xff08;双端队列&#xff09;比起Stack具有更好的完整性和一致性&#xff0c;应该被优先使用…
阅读更多...
作为 IT 行业的过来人，你有什么话想对后辈说的？2

作为 IT 行业的过来人，你有什么话想对后辈说的？2

1 本人本硕机械工程&#xff0c;目前就职于阿里巴巴淘宝无线事业群&#xff0c;摸爬滚打三年还是能给大家提供点建议。 1、至少每周坚持复盘。这是最重要的习惯&#xff0c;可能大家在学校都有这种印象&#xff0c;明明一本书看过/一道题做过&#xff0c;重新复习的时候感觉什…
阅读更多...
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Dept实体类和对应的配置信息

struts+hibernate+oracle+easyui实现lazyout组件的简单案例——Dept实体类和对应的配置信息

现在请大家看看Dept的实体类和对应的映射信息&#xff1a; Dept实体类 package org.entity;import java.util.HashSet; import java.util.Set;/*** Dept entity. author MyEclipse Persistence Tools*/public class Dept implements java.io.Serializable {// Fieldsprivate I…
阅读更多...
.NET Core 首例 Office 开源跨平台组件（NPOI Core）

.NET Core 首例 Office 开源跨平台组件（NPOI Core）

前言 最近项目中&#xff0c;需要使用到 Excel 导出&#xff0c;找了一圈发现没有适用于 .NET Core的&#xff0c;不依赖Office和操作系统限制的 Office 组件&#xff0c;于是萌生了把 NPOI 适配并移植到 .NET Core 的想法。 NPOI 的介绍不多说了&#xff0c;不了解的可以看一下…
阅读更多...
员工管理系统---SpringBoot

员工管理系统---SpringBoot

目录结构 全部代码 package com.kuang.config;import org.springframework.web.servlet.HandlerInterceptor;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;//拦截器 public class LoginHandlerInterceptor implements Hand…
阅读更多...
深入Java集合系列之五：PriorityQueue

深入Java集合系列之五：PriorityQueue

转载自 深入Java集合系列之五&#xff1a;PriorityQueue 前言 今天继续来分析一下PriorityQueue的源码实现&#xff0c;实际上在Java集合框架中&#xff0c;还有ArrayDeque&#xff08;一种双端队列&#xff09;&#xff0c;这里就来分析一下PriorityQueue的源码。PriorityQu…
阅读更多...
linux系统操作大全,Linux系统的常用操作命令大全

linux系统操作大全,Linux系统的常用操作命令大全

From:http://www.xiaoxiaozi.com/2010/11/09/1985/摘自&#xff1a;http://hi.baidu.com/jackywdx/blog/item/393ccf4b64268bf482025cde.html系统# uname -a # 查看内核/操作系统/CPU信息# head -n 1 /etc/issue # 查看操作系统版本# cat /proc/cpuinfo # 查看CPU信息# hostnam…
阅读更多...
抹掉所有内容和设置 连接到icloud时出错 iphone还原出厂设置

抹掉所有内容和设置 连接到icloud时出错 iphone还原出厂设置

设置-》抹掉所有内容和设置 点击设置 在顶部输入框中 输入抹掉 2个子就可以找到 1&#xff0c;点通用&#xff0c;存储用量&#xff0c;如果icloud为不可用&#xff0c; 设置--蜂窝数据-网络为无线网和蜂窝数据&#xff0c;成功的点个赞吧~&#xff01;&#xff08;这个过…
阅读更多...
struts+hibernate+oracle+easyui实现lazyout组件的简单案例——hibernate的config文件（hibernate.cfg.xml）

struts+hibernate+oracle+easyui实现lazyout组件的简单案例——hibernate的config文件（hibernate.cfg.xml）

hibernate.cfg.xml文件&#xff0c;必不可少的一个xml文件&#xff0c;上面附有数据库的用户名&#xff0c;密码&#xff0c;链接字符串&#xff0c;方言等信息&#xff0c;还包含映射的文件路径&#xff1a; <?xml version1.0 encodingUTF-8?> <!DOCTYPE hibernate…
阅读更多...
微服务的前世今生

微服务的前世今生

译者&#xff1a;周元昊 与许多人认为的不同&#xff0c;微服务的概念已有相当长的历史&#xff0c;SOA&#xff08;面向服务的体系架构&#xff09;也不是90年代才被提出的。在最近举办的伦敦微服务大会上&#xff0c;Greg Young就微服务核心概念的前世今生进行了演讲。其中他…
阅读更多...
最新文章

Copyright @ 2022~2023