SpringBoot--Thymeleaf

aruba 2023-03-28 原文

Thymeleaf也是一款模板引擎，但它不依赖标签库，是SpringBoot官方推荐的模板引擎，使用也比较广泛

一、项目配置

1. 导入依赖

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

2. 新建html

在templates目录下新建html：

内容为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  hello thymeleaf
</body>
</html>

3. Controller中新建接口

和FreeMarker一样，Thymeleaf不支持直接访问

@Controller
public class MyController {

    @RequestMapping("hello")
    public String hello() {
        return "hello";
    }
    
}

浏览器访问：

二、标准变量表达式

标准变量表达式就是Thpmeleaf完成数据的展示和处理的方式，必须在标签中使用，使用th命名空间，语法为：<tag th:xx="${key}"></tag>

新建test.html:

1. th:text

对应text属性，从Controller层返回一个数据：

    @RequestMapping("test")
    public String test(Model model) {
        model.addAttribute("msg","controller msg");
        return "test";
    }

html修改为：

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<span th:text="123"></span>
</body>
</html>

访问结果：

2. th:value

对应input的value属性

<input th:value="${msg}">

3. th:if

可以进行if判断来是否显示该标签

<p th:if="${name}!='张三'">hello</p>

4. th:each

用于遍历list集合，语法为：th:each="obj,index:${listName}"

index ：索引对象，包含索引、数据量大小、序号等
obj：遍历到的单个对象
listName：controller层传递的集合参数名

内部标签就可以使用上面对象

使用之前SpringBoot--配置MyBatis、Logback、PagerHelper、Druid中的员工集合代码，将员工显示到页面上

controller层代码和之前一样：

    @RequestMapping("showEmpList")
    public ModelAndView showEmpList(ModelAndView modelAndView) {
        List<Emp> allEmpList = empService.findAllEmp();
        modelAndView.setViewName("showEmpList");
        Map<String, Object> model = modelAndView.getModel();
        model.put("empList", allEmpList);

        return modelAndView;
    }

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #empTable {
            margin: 0 auto;
            border: 1px solid antiquewhite;
            width: 80%;
        }

        #empTable th, td {
            border: 1px solid bisque;
            text-align: center;
        }

    </style>
</head>
<body>
<table id="empTable" cellpadding="0px" cellspacing="0px">
    <tr>
        <th>索引</th>
        <th>员工编号</th>
        <th>姓名</th>
        <th>职位</th>
        <th>上级</th>
        <th>薪水</th>
        <th>奖金</th>
        <th>部门编号</th>
    </tr>

    <tr th:each="emp,i:${empList}">
        <td th:text="${i.index}"></td>
        <td th:text="${emp.empno}"></td>
        <td th:text="${emp.ename}"></td>
        <td th:text="${emp.job}"></td>
        <td th:text="${emp.mgr}"></td>
        <td th:text="${emp.sal}"></td>
        <td th:text="${emp.comm}"></td>
        <td th:text="${emp.deptno}"></td>
    </tr>
</table>
</body>
</html>

效果：

5. 运算符

5.1 基本运算符

标准表达式中支持基本的运算符：+、-、*、/、%

<td th:text="${i.index + 1}"></td>

5.2 关系运算符

关系运算符还是推荐使用转义：

符号	转义后
>	gt
>=	ge
<	lt
<=	le
==	eq
!=	ne

5.3 逻辑运算符

并且：&&、and
或者： ||、or

5.4 三目运算符

和java相同的写法：[expression]?value1:value2

5.5 动态修改style属性

结合上面的运算符，动态修改style属性：

<td th:text="${emp.sal}" th:style="${emp.sal} ne null and ${emp.sal} gt 2000? 'color:red':''"></td>

效果：

6. th:href

用于设置a标签的href属性，语法：th:href="@{function(param1=${},param2=${}, ..)}"

实现删除员工的功能

定义Mapper：

@Mapper
public interface EmpMapper {
 ...
    int deleteEmp(Integer empno, String ename);
}

映射文件：

    <!--int deleteEmp(Integer empno, String ename);-->
    <delete id="deleteEmp">
        delete from emp where empno = #{empno} and ename = #{ename}
    </delete>

service对应的进行编写，这边就不贴出代码了，controller新增处理单元：

    @RequestMapping("deleteEmpByNoAndName")
    public String deleteEmpByNoAndName(Integer empno, String ename) {
        boolean success = empService.deleteEmpByNoAndName(empno, ename);
        return "redirect:/showEmpList";
    }

html中使用：

<a th:href="@{deleteEmpByNoAndName(empno=${emp.empno},ename=${emp.ename})}">删除</a>

效果：

7. th:onclick

绑定点击事件，语法：th:onclick="function( [[param1]], [[param2]], ..)"

实现点击删除后有一个提示

html:

<a href="javascript:void(0)" th:onclick="removeEmpByNoAndName([[${emp.empno}]],[[${emp.ename}]])">删除</a>

<script>
    function removeEmpByNoAndName(empno, ename) {
        var ret = confirm("确定删除员工编号为：" + empno + "的" + ename)
        if (ret) {
            window.location.href = "deleteEmpByNoAndName?empno=" + empno + "&ename=" + ename
        }
    }
</script>

效果：

三、内置对象

Thymeleaf也内置了一些工具类：

作用：
#arrays：数组操作的工具；
#aggregates：操作数组或集合的工具；
#bools：判断boolean类型的工具；
#calendars：类似于#dates，但是是java.util.Calendar类的方法；
#ctx：上下文对象，可以从中获取所有的thymeleaf内置对象；
#dates：日期格式化内置对象，具体方法可以参照java.util.Date；
#numbers：数字格式化；#strings：字符串格式化，具体方法可以参照String，如startsWith、contains等；
#objects：参照java.lang.Object；
#lists：列表操作的工具，参照java.util.List；
#sets：Set操作工具，参照java.util.Set；#maps：Map操作工具，参照java.util.Map；
#messages：操作消息的工具。

1. string对象

方法名	描述
#string.isEmpty(key)	判断字符串是否为空，为空返回true，反之false
#string.contains(msg,'T')	判断字符串是否包含T的子串，包含返回true，反之false
#string.startsWith(msg,'a')	判断字符串是否以a子串为开始，为开始返回true，反之false
#string.endsWith(msg,'a')	判断字符串是否以a子串为结束，为结束返回true，反之false
#string.length(msg)	返回字符串大小
#string.indexOf(msg,'a')	查找字符串中包含a子串的第一个下标，包含返回下标，反之-1

2. dates对象

方法名	描述
#dates.format(key)	格式化日期，默认以浏览器语言为标准
#dates.format(key,'yyyy-MM-dd')	自定义格式化日期
#dates.year(key)	获取年
#dates.month(key)	获取月
#dates.day(key)	获取日

html中显示员工入职日期：

<td th:text="${!#strings.isEmpty(emp)?#dates.format(emp.hiredate,'yyyy-MM-dd'):''}"></td>

3. 域对象

controller中新增：

@RequestMapping("showEmpList")
    public ModelAndView showEmpList(ModelAndView modelAndView, HttpServletRequest req, HttpSession session) {
        List<Emp> allEmpList = empService.findAllEmp();
        modelAndView.setViewName("showEmpList");
        Map<String, Object> model = modelAndView.getModel();
        model.put("empList", allEmpList);

        // 向request域放数据
        req.setAttribute("msg", "requestMessage");
        // 向session域放数据
        session.setAttribute("msg", "sessionMessage");
        // 向application域放数据
        req.getServletContext().setAttribute("msg", "applicationMessage");

        return modelAndView;
    }

html中获取传递的域数据：

httpServletRequest:
<span th:text="${#httpServletRequest.getAttribute('msg')}"></span>
<span th:text="${#request.getAttribute('msg')}"></span>
<hr/>

httpSession:
<span th:text="${#httpSession.getAttribute('msg')}"></span>
<span th:text="${#session.getAttribute('msg')}"></span>
<span th:text="${session.msg}"></span>
<hr/>

servletContext:
<span th:text="${#servletContext.getAttribute('msg')}"></span>
<span th:text="${application.msg}"></span>
<hr/>

效果：

4. 其他对象

可以从官网查看：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expression-utility-objects

项目地址：

https://gitee.com/aruba/spring-boot-study.git

有关SpringBoot--Thymeleaf的更多相关文章

springboot定时任务 - 2
如果您希望在Spring中启用定时任务功能，则需要在主类上添加 @EnableScheduling 注解。这样Spring才会扫描 @Scheduled 注解并执行定时任务。在大多数情况下，只需要在主类上添加 @EnableScheduling 注解即可，不需要在Service层或其他类中再次添加。以下是一个示例，演示如何在SpringBoot中启用定时任务功能：@SpringBootApplication@EnableSchedulingpublicclassApplication{publicstaticvoidmain(String[]args){SpringApplication.ru
基于SpringBoot的线上日志阅读器 - 2
软件特点部署后能通过浏览器查看线上日志。支持Linux、Windows服务器。采用随机读取的方式，支持大文件的读取。支持实时打印新增的日志（类终端）。支持日志搜索。使用手册基本页面配置路径配置日志所在的目录，配置后按回车键生效，下拉框选择日志名称。选择日志后点击生效，即可加载日志。windows路径E:\java\project\log-view\logslinux路径/usr/local/XX历史模式历史模式下，不会读取新增的日志。针对历史文件可以分页读取，配置分页大小、跳转。历史模式下，支持根据关键词搜索。目前搜索引擎使用的是jdk自带类库，搜索速度相对较低，优点是比较简单。2G日志全文搜
springboot使用validator进行参数校验 - 2
1.依赖导入org.springframework.bootspring-boot-starter-weborg.springframework.bootspring-boot-starter-validation2.validation常用注解@Null被注释的元素必须为null@NotNull被注释的元素不能为null，可以为空字符串@AssertTrue被注释的元素必须为true@AssertFalse被注释的元素必须为false@Min(value)被注释的元素必须是一个数字，其值必须大于等于指定的最小值@Max(value)被注释的元素必须是一个数字，其值必须小于等于指定的最大值@D
停车系统源码-基于springboot+uniapp开源项目 - 2
Iparking停车收费管理系统-可商用介绍Iparking是一款基于springBoot的停车收费管理系统，支持封闭车场和路边车场，支持微信支付宝多种支付渠道，支持多种硬件，涵盖了停车场管理系统的所有基础功能。技术栈Springboot,MybatisPlus,Beetl,Mysql,Redis,RabbitMQ，UniApp功能云端功能序号模块功能描述1系统管理菜单管理配置系统菜单2系统管理组织管理管理组织机构3系统管理角色管理配置系统角色，包含数据权限和功能权限配置4系统管理用户管理管理后台用户5系统管理租户管理多租户管理6系统管理公众号配置租户公众号配置7系统管理操作日志审计日志8系统
优化大数据量查询方案——SpringBoot（Cloud）整合ES - 2
一、Elasticsearch简介实际业务场景中，多端的查询功能都有很大的优化空间。常见的处理方式有：建索引、建物化视图简化查询逻辑、DB层之上建立缓存、分页…然而随着业务数据量的不断增多，总有那么一张表或一个业务，是无法通过常规的处理方式来缩短查询时间的。在查询功能优化上，作为开发人员应该站在公司的角度，本着优化客户体验的目的去寻找解决方案。本人有幸做过Tomcat整合solr，今天一起研究一下当前比较火热的Elasticsearch搜索引擎。Elasticsearch是一个非常强大的搜索引擎。它目前被广泛地使用于各个IT公司。Elasticsearch是由Elastic公司创建。它的代码位
javascript - Spring MVC 和 Thymeleaf 资源版本控制 - 2
我正在尝试使用SpringMvc4进行资源版本控制。我使用thymeleaf模板引擎。但不适用于以下代码。加载页面时，我在查看页面源代码时看不到新版本的Url。那么我的问题是什么代码？我想念什么？@OverridepublicvoidaddResourceHandlers(finalResourceHandlerRegistryregistry){registry.addResourceHandler("/static/theme*//**").addResourceLocations("/resources/static/theme/").setCacheControl(CacheC
SpringBoot+Netty实现TCP客户端实现接收数据按照16进制解析并存储到Mysql以及Netty断线重连检测与自动重连 - 2
场景在SpringBoot项目中需要对接三方系统，对接协议是TCP，需实现一个TCP客户端接收服务端发送的数据并按照16进制进行解析数据，然后对数据进行过滤，将指定类型的数据通过mybatis存储进mysql数据库中。并且当tcp服务端断连时，tcp客户端能定时检测并发起重连。全流程效果注：博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主实现1、SpringBoot+Netty实现TCP客户端本篇参考如下博客，在如下博客基础上进行修改Springboot+Netty搭建基于TCP协议的客户端（二）:https://www.cnblogs.com/haolb
Java面试--SpringBoot启动流程 - 2
一、SpringBoot是什么SpringBoot是依赖于Spring的，比起Spring，除了拥有Spring的全部功能以外，SpringBoot无需繁琐的Xml配置，这取决于它自身强大的自动装配功能；并且自身已嵌入Tomcat、Jetty等web容器，集成了SpringMvc，使得SpringBoot可以直接运行，不需要额外的容器，提供了一些大型项目中常见的非功能性特性，如嵌入式服务器、安全、指标，健康检测、外部配置等，其实Spring大家都知道，Boot是启动的意思。所以，SpringBoot其实就是一个启动Spring项目的一个工具而已，总而言之，SpringBoot是一个服务于框架的
springboot Socket 通信 - 2
一、引入依赖：dependency>groupId>org.springframework.bootgroupId>artifactId>spring-boot-starter-websocketartifactId>2.7.1-->dependency>二、准备工具类：/***@authorWeiDaPang*/@ConfigurationpublicclassScheduledConfiguration{@BeanpublicTaskSchedulertaskScheduler(){ThreadPoolTaskSchedulertaskScheduler=newThreadPoolTask
使用postman访问springboot项目，出现Unsupported Media Type 415错误以及 Field ‘userId‘ doesn‘t have a default value - 2
使用postman访问springboot项目，出现UnsupportedMediaType415错误以及java.sql.SQLException:Field‘userId’doesn’thaveadefaultvalueidea控制台显示Resolved[org.springframework.web.HttpMediaTypeNotSupportedException:Contenttype‘multipart/form-data;boundary=--------------------------508983844580882655519308;charset=UTF-8’notsu