余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

Thymeleaf

xiyangw 2023-09-28 15:02 25 浏览 0 评论

一、Thymeleaf简介

  • Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎
  • Spring官方支持的服务的渲染模板中,并不包含jsp。而是Thymeleaf和Freemarker等,而Thymeleaf与SpringMVC的视图技术,及SpringBoot的自动化配置集成非常完美,几乎没有任何成本,你只用关注Thymeleaf的语法即可。

二、Thymeleaf的特点

  • 动静结合:Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。
  • 开箱即用:它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
  • 多方言支持:Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速地实现表单绑定、属性编辑器、国际化等功能。
  • 与SpringBoot完美整合,SpringBoot提供了Thymeleaf的默认配置,并且为Thymeleaf设置了视图解析器,我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别,就是在模板语法上有区别。

三.ssm中添加thymeleaf

1.导入jar包

<dependency>
  <groupId>org.thymeleaf</groupId>
  <artifactId>thymeleaf</artifactId>
  <version>3.0.9.RELEASE</version>
</dependency>

<dependency>
  <groupId>org.thymeleaf</groupId>
  <artifactId>thymeleaf-spring4</artifactId>
  <version>3.0.9.RELEASE</version>
</dependency>

2.在springmvc.xml文件中设置视图解析器为thymeleaf解析

<!-- 使用thymeleaf解析 -->

<bean id="templateResolver"

      class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">

    <property name="prefix" value="/WEB-INF/views/" />

    <property name="suffix" value=".html" />

    <property name="templateMode" value="HTML" />

    <property name="cacheable" value="false" />

    <property name="characterEncoding" value="UTF-8"/><!--不加会乱码-->

</bean>

<bean id="templateEngine"

      class="org.thymeleaf.spring4.SpringTemplateEngine">

    <property name="templateResolver" ref="templateResolver" />

</bean>

<bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">

    <property name="templateEngine" ref="templateEngine" />

    <!--解决中文乱码-->

    <property name="characterEncoding" value="UTF-8"/>

</bean>

3.删除之前视图解析器为jsp的配置信息,如果两个都配置,谁在前面,用谁

<!-- 配置视图解析器 -->

<!--<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">-->
    <!--<property name="prefix" value="/WEB-INF/" />-->
    <!--<property name="suffix" value=".jsp" />-->
<!--</bean>-->

4.配置web.xml文件中thymeleaf部分

 
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:applicationContext-ioc.xml</param-value>
  </context-param>
  
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
 
 <servlet>
  <servlet-name>springMVC</servlet-name>
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

  <!--SpringMVC配置文件的名字  <servlet-name>-servlet.xml
      默认位置:src / resources
    如果放在了 src/resources(maven)
          contextConfigLocation:classpath:文件名即可!
          Web-INF/xx.xml
          contextConfigLocation:/WEB-INF/xx.xml
  -->

  <init-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:springmvc.xml</param-value>
  </init-param>

  <load-on-startup>1</load-on-startup>
</servlet>
<!-- 访问DispatcherServlet对应的路径 -->
<servlet-mapping>
  <servlet-name>springMVC</servlet-name>
  <url-pattern>/</url-pattern> <!--/不过滤jsp防止死循环-->
</servlet-mapping>

<!--配置thymeleaf  -->

<servlet-mapping>

  <servlet-name>springMVC</servlet-name>

  <url-pattern>*.html</url-pattern>

</servlet-mapping>

5.创建控制器

package com.test.action;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("thymeleaf")
public class ThymeleafAction {

    @RequestMapping("/testThymeleaf")
    public String testThymeleaf(Model model)
    {
        model.addAttribute("uname","zhangsan");

        return "testThymeleaf";// WEB-INF/views/testThymeleaf.html
    }
}

6.创建html页面

根据之前设置的前缀

在web-inf/views/文件夹下创建html文件

访问传递过来的数据,注意声明Thymeleaf命名空间

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 th:text="${uname}">aaaa</h1>
</body>
</html>

7.测试

? http://localhost:8080/testssm/thymeleaf/testThymeleaf

? 成功

?

张三

四.常用th属性解读

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

一、th:text :设置当前元素的文本内容,相同功能的还有th:utext,两者的区别在于前者不会转义html标签,后者会。优先级不高:order=7

二、th:value:设置当前元素的value值,类似修改指定属性的还有th:srcth:href。优先级不高:order=6

三、th:each:遍历循环元素,和th:text或th:value一起使用。注意该属性修饰的标签位置,详细往后看。优先级很高:order=2

四、th:if:条件判断,类似的还有th:unlessth:switchth:case。优先级较高:order=3

五、th:insert:代码块引入,类似的还有th:replaceth:include,三者的区别较大,若使用不恰当会破坏html结构,常用于公共代码块提取的场景。优先级最高:order=1

六、th:fragment:定义代码块,方便被th:insert引用。优先级最低:order=8

七、th:object:声明变量,一般和*{}一起配合使用,达到偷懒的效果。优先级一般:order=4

八、th:attr:修改任意属性,实际开发中用得较少,因为有丰富的其他th属性帮忙,类似的还有th:attrappend,th:attrprepend。优先级一般:order=5

五.基础使用语法

1.创建HTML

由上文也可以知道需要在html中添加:

<html xmlns:th="http://www.thymeleaf.org">

这样,下文才能正确使用th:*形式的标签!

2.获取变量值${…}

通过**${…}进行取值,这点和ONGL表达式语法一致!**

  <h1 th:text="${uname}"></h1>
  <input type="text" th:value="${uname}" />
  

选择变量表达式*{…}


<div th:object="${items}">
    <p th:text="*{name}" >产品名</p>
    <p th:text="*{detail}" >产品名</p>
</div>


至于p里面的原有的值只是为了给前端开发时做展示用的.这样的话很好地做到了前后端分离。

这也是Thymeleaf非常好的一个特性:在无网络的情况下也能运行,也就是完全可以前端先写出页面,模拟数据展现效果,后端人员再拿此模板修改即可!

3.链接表达式: @{…}

用来配合link src href使用的语法,类似的标签有:th:hrefth:src

链接表达式结构

无参:@{/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>
<a href="details.html" th:href="@{/thymeleaf/showItemsById(id=${items.id})}">view</a>
    

4.${…}变量表达式

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

变量表达式功能

一、可以获取对象的属性和方法

二、可以使用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等

五、listssets:集合方法,常用的方法有:toList,size,isEmpty,contains,containsAll,sort等

六、maps:对象方法,常用的方法有:size,isEmpty,containsKey,containsValue等

七、dates:日期方法,常用的方法有:format,year,month,hour,createNow等

文章底部提供了对应的官网链接

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ITDragon Thymeleaf 内置方法</title>
</head>
<body>
    <h2>ITDragon Thymeleaf 内置方法</h2>
    <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>

    <h3>#numbers </h3>
    <div>
        <p>formatDecimal 整数部分随意,小数点后保留两位,四舍五入: <span th:text="${#numbers.formatDecimal(itdragonNum, 0, 2)}"/></p>
        <p>formatDecimal 整数部分保留五位数,小数点后保留两位,四舍五入: <span th:text="${#numbers.formatDecimal(itdragonNum, 5, 2)}"/></p>
    </div>

    <h3>#bools </h3>
    <div th:if="${#bools.isTrue(itdragonBool)}">
        <p th:text="${itdragonBool}"></p>
    </div>

    <h3>#arrays </h3>
    <div th:if="${not #arrays.isEmpty(itdragonArray)}">
        <p>length : <span th:text="${#arrays.length(itdragonArray)}"/></p>
        <p>contains : <span th:text="${#arrays.contains(itdragonArray, 5)}"/></p>
        <p>containsAll : <span th:text="${#arrays.containsAll(itdragonArray, itdragonArray)}"/></p>
    </div>
    <h3>#lists </h3>
    <div th:if="${not #lists.isEmpty(itdragonList)}">
        <p>size : <span th:text="${#lists.size(itdragonList)}"/></p>
        <p>contains : <span th:text="${#lists.contains(itdragonList, 0)}"/></p>
        <p>sort : <span th:text="${#lists.sort(itdragonList)}"/></p>
    </div>
    <h3>#maps </h3>
    <div th:if="${not #maps.isEmpty(itdragonMap)}">
        <p>size : <span th:text="${#maps.size(itdragonMap)}"/></p>
        <p>containsKey : <span th:text="${#maps.containsKey(itdragonMap, 'thName')}"/></p>
        <p>containsValue : <span th:text="${#maps.containsValue(itdragonMap, '#maps')}"/></p>
    </div>
    <h3>#dates </h3>
    <div>
        <p>format : <span th:text="${#dates.format(itdragonDate)}"/></p>
        <p>custom format : <span th:text="${#dates.format(itdragonDate, 'yyyy-MM-dd HH:mm:ss')}"/></p>
        <p>day : <span th:text="${#dates.day(itdragonDate)}"/></p>
        <p>month : <span th:text="${#dates.month(itdragonDate)}"/></p>
        <p>monthName : <span th:text="${#dates.monthName(itdragonDate)}"/></p>
        <p>year : <span th:text="${#dates.year(itdragonDate)}"/></p>
        <p>dayOfWeekName : <span th:text="${#dates.dayOfWeekName(itdragonDate)}"/></p>
        <p>hour : <span th:text="${#dates.hour(itdragonDate)}"/></p>
        <p>minute : <span th:text="${#dates.minute(itdragonDate)}"/></p>
        <p>second : <span th:text="${#dates.second(itdragonDate)}"/></p>
        <p>createNow : <span th:text="${#dates.createNow()}"/></p>
    </div>
</body>
</html>

后台给负责给变量赋值,和跳转页面。

@RequestMapping("varexpressions")
public String varexpressions(ModelMap map) {
  map.put("itdragonStr", "itdragonBlog");
  map.put("itdragonBool", true);
  map.put("itdragonArray", new Integer[]{1,2,3,4});
  map.put("itdragonList", Arrays.asList(1,3,2,4,0));
  Map itdragonMap = new HashMap();
  itdragonMap.put("thName", "${#...}");
  itdragonMap.put("desc", "变量表达式内置方法");
  map.put("itdragonMap", itdragonMap);
  map.put("itdragonDate", new Date());
  map.put("itdragonNum", 888.888D);
  return "grammar/varexpressions";
}

?

5.运算符

数学运算

  • 二元操作:+, - , * , / , %
  • 一元操作: - (负)

逻辑运算

  • 一元 : and or
  • 二元 : !,not

比较运算(为避免转义尴尬,可以使用括号中的英文进行比较运算!)

  • 比较:> , < , >= , <= ( gt , lt , ge , le )
  • 等于:== , != ( eq , ne )

条件运算

  • If-then: (if) ? (then)
  • If-then-else: (if) ? (then) : (else)
  • Default: (value) ?: (defaultvalue)

6.选择

if/unless

使用th:if和th:unless属性进行条件判断,th:unless于th:if恰好相反,只有表达式中的条件不成立,才会显示其内容。

 <td ><span th:if="${items.price gt 1000}" >精品</span></td>
 
 <td ><span th:unless="${items.price gt 1000}" >次品</span></td>

switch

<div th:switch="${items.name}">
  <p th:case="'aa'">aaaaaaaaa</p>
  <p th:case="'bb'">bbbbbbb</p>
  <p th:case="'cc'">cccccccc</p>
</div>

7.循环

th:each

thymeleaf的th:each常见用法
一.th:eath迭代集合用法:
<table border="1" id="stuTable">
    <tr>
        <td>是否选中</td>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr th:each="stu,userStat:${studentList}" >
        <td><input th:type="checkbox" th:name="id" th:value="${stu.id}"></td>
        <td th:text="${stu.id}">编号</td>
        <td th:text="${stu.name}">姓名</td>
        <td th:text="${stu.age}">年龄</td>
    </tr>
</table>
二.迭代下标变量用法:
状态变量定义在一个th:每个属性和包含以下数据:

1.当前迭代索引,从0开始。这是索引属性。index

2.当前迭代索引,从1开始。这是统计属性。count

3.元素的总量迭代变量。这是大小属性。 size

4.iter变量为每个迭代。这是目前的财产。 current

5.是否当前迭代是奇数还是偶数。这些even/odd的布尔属性。

6.是否第一个当前迭代。这是first布尔属性。

7.是否最后一个当前迭代。这是last布尔属性。

用法实例:

<table border="1" id="stuTable">
    <tr>
        <td>是否选中</td>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr th:each="stu,userStat:${studentList}" th:class="${userStat.odd}?'odd':'even'">
        <td th:text="${userStat.index}"></td>
        <td><input th:type="checkbox" th:name="id" th:value="${stu.id}"></td>
        <td th:text="${stu.id}">编号</td>
        <td th:text="${stu.name}">姓名</td>
        <td th:text="${stu.age}">年龄</td>
    </tr>
</table>

控制器端代码:

package com.test.action;

import com.test.pojo.Items;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

@Controller
@RequestMapping("thymeleaf")
public class ThymeleafAction {

    @RequestMapping("/testThymeleaf")
    public String testThymeleaf(Model model)
    {
        model.addAttribute("uname","zhangsan");

        Items items=new Items();

        items.setId(1);

        items.setName("iphone");

        items.setDetail("9999");

        items.setPrice(6000);

        model.addAttribute("items",items);

        List<Items> itemsList=new ArrayList<Items>();

        itemsList.add(new Items(101,"aa",1000,"aaa","1.jpg",new Date()));
        itemsList.add(new Items(102,"bb",1000,"aaa","1.jpg",new Date()));
        itemsList.add(new Items(103,"cc",1000,"aaa","1.jpg",new Date()));

        model.addAttribute("itemsList",itemsList);



        return "testThymeleaf";
    }

    @RequestMapping("/showItemsById")
    public String showItemsById(Model model,int id)
    {
        model.addAttribute("id",id);

         return "showItemsById";

    }



}

tems);

    List<Items> itemsList=new ArrayList<Items>();

    itemsList.add(new Items(101,"aa",1000,"aaa","1.jpg",new Date()));
    itemsList.add(new Items(102,"bb",1000,"aaa","1.jpg",new Date()));
    itemsList.add(new Items(103,"cc",1000,"aaa","1.jpg",new Date()));

    model.addAttribute("itemsList",itemsList);



    return "testThymeleaf";
}

@RequestMapping("/showItemsById")
public String showItemsById(Model model,int id)
{
    model.addAttribute("id",id);

     return "showItemsById";

}

}



相关推荐

排序算法--归并排序_归并排序例题讲解

原理如图所示(先分割再合并):归并排序代码工作原理:1、申请空间,使其大小为两个已经排序序列之和,该空间用来存放合并后的序列2、设定两个指针,最初位置分别为两个已经排序序列的起始位置3、比较两个指针所...

八大排序算法-归并排序_归并排序 算法

算法思想归并排序分为三个步骤:1.分解:将数列分解成n个子数列。(如果是将数列分成2个子数列则为2路归并)2.治理:对每个子数列进行排序操作3.合并:将两个排好序的子数列进行合并生成新的数列算法实现P...

高级排序之归并排序、希尔排序_希尔排序和归并排序区别

前言继上次排序算法简单排序算法之冒泡、插入和选择排序-Java实现版后,本文学习高级排序算法——归并排序、希尔排序,快速排序将在后续更新。本文实现代码调用方法,部分来自前一个文章:简单排序算法之冒泡、...

Excel办公应用:按合并单元格排序的三大方法

1.按姓名对科目排序重点:在"C2"中输入公式=IF(A2<>"",1,C1+1),然后下拉填充。2.按姓名添加连续序号(方法一)重点:选择"A2:A11"单元格区域,在编辑栏中输入公...

快速排序 Vs. 归并排序 Vs. 堆排序——谁才是最强的排序算法

知乎上有一个问题是这样的:堆排序是渐进最优的比较排序算法,达到了O(nlgn)这一下界,而快排有一定的可能性会产生最坏划分,时间复杂度可能为O(n^2),那为什么快排在实际使用中通常优于堆排序?昨天刚...

归并排序思路图解 #归并排序_归并排序百度百科

排序算法1.图解。OK,让它排一下。看好了,要开始排了。能看出来像递归吗?肯定算法难,但是这个次数非常的多,不用管次数。这个是帝规,就是递归。这是并,这是并,这是两个有序数,组合成一个最后的大的有序数...

排序算法学习——归并排序_归并排序算法稳定吗

我们先看归并排序的定义归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(DivideandConquer)的一个非常典型的应用。将已有序的子序列合并,得到完全有序的序列;即先使每...

动画|经典的归并排序究竟怎么玩儿?

作者|菠了个菜责编|郭芮由于LeetCode上的算法题很多涉及到一些基础的数据结构,为了更好的理解后续更新的一些复杂题目的动画,推出一个新系列——《图解数据结构》,主要使用动画来描述常见的数据...

Excel中,多列数据统一排名,Rank函数直接搞定

Rank实现多列联合排序排序,那太简单啦,Excel中,升序降序,一个按键就可以。但,那是针对单列情况,若需要联合多列数据进行排序呢?如下图所示,需要对1、3、5列进行统一排序,咋弄嘞?联合排序案例先...

【数据结构与算法】归并排序_数据结构中归并排序

归并排序是建立在归并操作的一种高效的排序方法,该方法采用了分治的思想,比较适用于处理较大规模的数据,但比较耗内存,今天我们聊聊归并排序排序思想一天,小一尘和慧能坐在石头上,眺望着远方师傅,我听山下的柳...

C++基础算法:归并排序_经典排序算法-----归并排序(c语言实现)

归并排序(MergeSort)是建立在归并操作上的一种有效,稳定的排序算法,该算法是采用分治法(DivideandConquer)的一个非常典型的应用。将已有序的子序列合并,得到完全有序的序列。...

马士兵说之归并排序_马士兵教育的内推是真的

大家对于排序应该是挺熟悉的吧,马士兵老师特意为排序出了一波视频,当然文章是转自博客园的,马士兵老师的视频观看请点击下方的了解更多概要本章介绍排序算法中的归并排序。内容包括:1.归并排序介绍2.归并...

C++快速排序和归并排序_c++快速排序sort

快速排序每一轮挑选一个基准元素(随机选择,编程时一般选取第一个),并让比它大或小的元素移动到基准元素的两边,把数列拆解成了两个部分。而后对这两部分分别进行快速排序。时间复杂度:O(nlogn),辅助空...

经典的排序算法——归并排序_归并排序算法步骤

归并排序(MergeSort)是一种基于分治策略的高效排序算法。它将原始数组不断地分割成两个子数组,直到每个子数组只剩下一个元素为止(即基本有序),然后再通过合并已排序的子数组来最终得到完全有序的大...

归并排序_归并排序c++实现

归并排序概念:归并排序中涉及到一个概念就是分而治之,总序列化成小序列,将小序列排序好,利用排序好的小序列,再归并排序成原来要排序的序列。所以排序前先要分:functiondivide(arr){...

取消回复欢迎 发表评论: