4. thymeleaf模板引擎
4.1 引入thymeleaf
-
Thymeleaf 官网:Thymeleaf
-
Thymeleaf 在Github 的主页:https://github.com/thymeleaf/thymeleaf
-
在pox.xml文件中引入thymeleaf的依赖
-
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
4.2 thymeleaf分析
我们先按照SpringBoot的自动配置原理看一下Thymeleaf的自动配置规则,按照这个规则,我们再进行使用。
找一下Thymeleaf的自动配置类:ThymeleafProperties
-
@ConfigurationProperties(prefix = "spring.thymeleaf") public class ThymeleafProperties { private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8; 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 = DEFAULT_PREFIX; private String suffix = DEFAULT_SUFFIX; private String mode = "HTML"; private Charset encoding = DEFAULT_ENCODING; private boolean cache = true; //...... }
可以在其中看到默认的前缀(prefix)和后缀(suffix)!
只需要把我们的html页面放在类路径下的templates目录下,thymeleaf就可以帮我们自动渲染了。
-
4.3 语法学习
学习thymeleaf语法,参考官网文档最为准确,Thymeleaf 官网:Thymeleaf ,可以下载Thymeleaf的官方文档进行学习!
1、入门测试
1、测试请求,增加数据传输;
-
@RequestMapping("/thymeleaf") public String test1(Model model){ //存入数据 model.addAttribute("msg","Hello,Thymeleaf"); //classpath:/templates/test.html return "test"; }
2、我们要使用thymeleaf,需要在html文件中导入命名空间的约束,方便提示。
-
xmlns:th="http://www.thymeleaf.org"
3、编写前端页面(classpath:/templates/test.html)
-
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>dengzj</title> </head> <body> <h1>thymeleaf测试页面</h1> <!-- th:text就是将div中的内容设置为它指定的值,和Vue一样--> <div th:text="${msg}"></div> </body> </html>
启动测试,显示结果:
1 thymeleaf测试页面
2 3 Hello,Thymeleaf
2、语法使用
替换元素属性的值
thymeleaf表达式
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 , false
Null literal: null
Literal 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 , or
Boolean negation (unary operator): ! , not
Comparisons 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: _
4.4 提取公共页面
步骤一
在 templates 目录下新建一个commons文件夹,并在其中创建一个commons.html文件,把公共页面部分提取到该文件中。
提取方法—>在最外层标签中加上 th:fragment="xxx"
th:class="${active=='main.html'?'nav-link active':'nav-link'}"
接受传递的参数,判断是否点击了该链接,用于改变点击后链接的样式
!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--头部导航栏 th:fragment="topbar" -->
<nav class="" th:fragment="topbar">
<!-- 内容部分 -->
</nav>
<!--侧边栏-->
<!-- th:class="${active=='main.html'?'nav-link active':'nav-link'}" 接受传递的参数,用于改变点击后链接的样式-->
<nav class="" th:fragment="sidebar">
<a th:class="${active=='main.html'?'nav-link active':'nav-link'}" th:href="@{/main.html}">
首页
</a>
</nav>
</html>
引用公共部分
<body>
<!--头部导航栏 -->
<div th:replace="~{commons/commons::topbar}"></div>
<!--侧边栏 (active='main.html') 进行参数传递-->
<div th:replace="~{commons/commons::sidebar(active='main.html')}"></div>
</body>