SpringBoot2--Web模板引擎Thymeleaf

最新推荐文章于 2022-10-19 10:54:48 发布

笔记整理

最新推荐文章于 2022-10-19 10:54:48 发布

阅读量229

点赞数

分类专栏： Springboot

原文链接：https://blog.csdn.net/qq_34598667/article/details/94462934

版权

Springboot 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

前言

Spring Boot采用jar包的形式，并且是内嵌式的HTTP服务器，不支持JSP，所以要想获得动态页面必须引入模板引擎。常用的模板引擎有FreeMarker、Thymeleaf、jsp、veocity。本文以Thymeleaf为例，了解一下模板引擎的引入

一、引入Thymeleaf

在pom.xml文件中导入即可

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

在ThymeleafProperties类中，可以看到以下代码，即我们只需要把HTML页面放置在classpath:/templates/"下即可渲染，当然也可以在全局文件修改

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;

下面来测试一下哎，我们写一个Controller

	@RequestMapping("/success")
	public String success(Map<String,Object> map){

		map.put("hello","<h1>你好</h1>");
		map.put("users", Arrays.asList("zhangsan","lisi","wangwu"));
		//只要我们把HTML页面放在classpath:/templates/ html结尾
		return "success";
	}

将以下代码命名为success并且放在类路径的templates文件夹下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h4>成功！！</h4>
  <!‐‐th:text 将div里面的文本内容设置为 ‐‐>
  <div th:text="${hello}">这里显示欢迎信息</div>
  <hr/>
  <div th:text="${hello}"></div>
  <div th:utext="${hello}"></div>
  <hr/>
  <h4 th:text="${user}" th:each="user:${users}"></h4>
  <hr/>
  <h4>
      <span th:each="user:${users}">[[${user}]]</span>
  </h4>

</body>
</html>

通过http://localhost:8080/success访问，结果如下
在这里插入图片描述

二、Thymeleaf语法

1.th属性

html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个。其中th属性执行的优先级从1~8，数字越低优先级越高。

th:text：设置当前元素的文本内容，相同功能的还有th:utext，两者的区别在于前者不会转义html标签，后者会。优先级不高：order=7
th:value：设置当前元素的value值，类似修改指定属性的还有th:src，th:href。优先级不高：order=6
th:each：遍历循环元素，和th:text或th:value一起使用。注意该属性修饰的标签位置，th:each=“e : ${emps}”，其中e为循环的每一项。优先级很高：order=2
th:if：条件判断，类似的还有th:unless，th:switch，th:case。优先级较高：order=3
th:insert：代码块引入，类似的还有th:replace，th:include，三者的区别较大，若使用不恰当会破坏html结构，常用于公共代码块提取的场景。优先级最高：order=1
th:fragment：定义代码块，方便被th:insert引用。优先级最低：order=8
th:object：声明变量，一般和*{}一起配合使用，达到偷懒的效果。优先级一般：order=4
th:attr：修改任意属性，实际开发中用的较少，因为有丰富的其他th属性帮忙，类似的还有th:attrappend，th:attrprepend。优先级一般：order=5

使用Thymeleaf属性需要注意点以下五点：

若要使用Thymeleaf语法，首先要声明名称空间： <html lang="en" xmlns:th="http://www.thymeleaf.org">
设置文本内容 th:text，设置input的值 th:value，循环输出 th:each，条件判断 th:if，插入代码块th:insert，定义代码块 th:fragment，声明变量 th:object
th:each
的用法需要格外注意，打个比方：如果你要循环一个div中的p标签，则th:each属性必须放在p标签上。若你将th:each属性放在div上，则循环的是将整个div。
变量表达式中提供了很多的内置方法，该内置方法是用#开头，请不要与#{}消息表达式弄混。
th:insert，th:replace，th:include 三种插入代码块的效果相似，但区别很大。

2.标准表达式语法

变量表达式使用频率最高，其功能也是非常的丰富。所以我们先从简单的代码块表达式开始，然后是消息表达式，再是链接表达式，最后是变量表达式，随带介绍选择变量表达式。

~{…} 代码块表达式

支持两种语法结构：

推荐：~{templatename::fragmentname}
支持：~{templatename::#id}

templatename：模版名，Thymeleaf会根据模版名解析完整路径：/resources/templates/templatename.html，要注意文件的路径。

fragmentname：片段名，Thymeleaf通过th:fragment声明定义代码块，即：th:fragment=“fragmentname”

id：HTML的id选择器，使用时要在前面加上#号，不支持class选择器。

代码块表达式的使用：
代码块表达式需要配合th属性（th:insert，th:replace，th:include）一起使用。

th:insert：将代码块片段整个插入到使用了th:insert的HTML标签中
th:replace：将代码块片段整个替换使用了th:replace的HTML标签中
th:include：将代码块片段包含的内容插入到使用了th:include的HTML标签中
案例：

<!--th:fragment定义代码块标识-->
<footer th:fragment="copy">
&copy; 2019 The Good Thymes Virtual Grocery
</footer>

<!--三种不同的引入方式-->
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>

使用后的结果其实如下：

<!--th:insert是在div中插入代码块，即多了一层div-->
<div>
    <footer>
    &copy; 2019 The Good Thymes Virtual Grocery
    </footer>
</div>
<!--th:replace是将代码块代替当前div，其html结构和之前一致-->
<footer>
&copy; 2019 The Good Thymes Virtual Grocery
</footer>
<!--th:include是将代码块footer的内容插入到div中，即少了一层footer-->
<div>
&copy; 2019 The Good Thymes Virtual Grocery
</div>

#{…} 消息表达式

消息表达式一般用于国际化的场景。结构：th:text="#{msg}" 。下面有一块再详细介绍

@{…} 链接表达式

链接表达式好处：不管是静态资源的引用，form表单的请求，凡是链接都可以用@{…} 。这样可以动态获取项目路径，即便项目名变了，依然可以正常访问

#修改项目名，链接表达式会自动修改路径，避免资源文件找不到
server.context-path=/itdragon

链接表达式结构:

无参：@{/xxx}
有参：@{/xxx(k1=v1,k2=v2)} 对应url结构：xxx?k1=v1&k2=v2
引入本地资源：@{/项目本地的资源路径}
引入外部资源：@{/webjars/资源在jar包中的路径}

案例：

<!--引入外部资源-->
<link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">

<!--引入本地资源-->
<link th:href="@{/main/css/itdragon.css}" rel="stylesheet">

<!--表单提交路径-->
<form class="form-login" th:action="@{/user/login}" th:method="post" >

<!--超链接跳转路径附带参数-->
<a class="btn btn-sm" th:href="@{/login.html(l='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/login.html(l='en_US')}">English</a>

${…}变量表达式

变量表达式有丰富的内置方法，使其更强大，更方便。
变量表达式功能：

可以获取对象的属性和方法
可以使用ctx，vars，locale，request，response，session，servletContext内置对象
可以使用dates，numbers，strings，objects，arrays，lists，sets，maps等内置方法（重点介绍）
常用的内置对象：
ctx ：上下文对象。
vars ：上下文变量。
locale：上下文的语言环境。
request：（仅在web上下文）的 HttpServletRequest 对象。
response：（仅在web上下文）的 HttpServletResponse 对象。
session：（仅在web上下文）的 HttpSession 对象。
servletContext：（仅在web上下文）的 ServletContext 对象

这里以常用的Session举例，用户刊登成功后，会把用户信息放在Session中，Thymeleaf通过内置对象将值从session中获取。

// java 代码将用户名放在session中
session.setAttribute("userinfo",username);
// Thymeleaf通过内置对象直接获取
th:text="${session.userinfo}"

常用的内置方法:

strings：字符串格式化方法，常用的Java方法它都有。比如：equals，equalsIgnoreCase，length，trim，toUpperCase，toLowerCase，indexOf，substring，replace，startsWith，endsWith，contains，containsIgnoreCase等
numbers：数值格式化方法，常用的方法有：formatDecimal等
bools：布尔方法，常用的方法有：isTrue，isFalse等
arrays：数组方法，常用的方法有：toArray，length，isEmpty，contains，containsAll等
lists，sets：集合方法，常用的方法有：toList，size，isEmpty，contains，containsAll，sort等
maps：对象方法，常用的方法有：size，isEmpty，containsKey，containsValue等
dates：日期方法，常用的方法有：format，year，month，hour，createNow等
案例：
在controller中绑定字符串

 //5.绑定一个字符串
 model.addAttribute("itdragonStr","this is a DEMO");

在html中使用内置方法：

...
<h3>#strings </h3>
<div th:if="${not #strings.isEmpty(itdragonStr)}" >
    <p>Old Str : <span th:text="${itdragonStr}"/></p>
    <p>toUpperCase : <span th:text="${#strings.toUpperCase(itdragonStr)}"/></p>
    <p>toLowerCase : <span th:text="${#strings.toLowerCase(itdragonStr)}"/></p>
    <p>equals : <span th:text="${#strings.equals(itdragonStr, 'itdragonblog')}"/></p>
    <p>equalsIgnoreCase : <span th:text="${#strings.equalsIgnoreCase(itdragonStr, 'itdragonblog')}"/></p>
    <p>indexOf : <span th:text="${#strings.indexOf(itdragonStr, 'r')}"/></p>
    <p>substring : <span th:text="${#strings.substring(itdragonStr, 2, 8)}"/></p>
    <p>replace : <span th:text="${#strings.replace(itdragonStr, 'it', 'IT')}"/></p>
    <p>startsWith : <span th:text="${#strings.startsWith(itdragonStr, 'it')}"/></p>
    <p>contains : <span th:text="${#strings.contains(itdragonStr, 'IT')}"/></p>
</div>
...

笔记整理

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot2--Web模板引擎Thymeleaf

前言Spring Boot采用jar包的形式，并且是内嵌式的HTTP服务器，不支持JSP，所以要想获得动态页面必须引入模板引擎。常用的模板引擎有FreeMarker、Thymeleaf、jsp、veocity。本文以Thymeleaf为例，了解一下模板引擎的引入一、引入Thymeleaf在pom.xml文件中导入即可 <dependency> <groupId>org.springframework.boot</groupId&gt
复制链接

扫一扫