Thymeleaf基础语法

2023-11-13 23:31:10

Thymeleaf通过标准变量表达式完成数据的展示和处理

  • 标准变量表达式必须依赖标签，不能独立使用。
  • 标准变量表达式一般在开始标签中，以 th开头。
  • 语法为: <tag th:***="${key}"   ></tag>
  • 表达式中可以通过${}取出域中的值并放入标签的指定位置。
  • ${}在这里不能单独使用，必须在 th:后面的双引号里使用。

为了有提示，修改html页面中<html>标签为：

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

目录

1、th:text属性

（1）index.html

（2）controller层

（3）响应页面 

2、th:value属性

（1）index.html

（2）controller层

（3）响应页面

3、th:if属性 

（1）showEmp.html

（2）controller层

（3）响应页面

4、th:each属性 

（1）showEmp.html

（2）controller层

（3）响应页面

5、标准变量表达式支持的运算符 

（1）算数运算符：

（2）关系运算符：

（3）逻辑运算符

（4）三目运算符 

6、对空值作出处理 

（1）showEmp.html

（2）controller层 

（3）响应页面

7、 th:href属性

（1）showEmp.html

（2）controller层

（3） service层

（4）mapper层 

（5）mapper.xml

（7）响应页面

 8、th:onclick属性

（1）showEmp.html

（2）controller层 

（3）响应页面

1、th:text属性

向HTML标签内部输出信息。

（1）index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    this is index page
    <!--向span双标签内部添加文本-->
    <span th:text="pageMessage"></span> <br/>
    <!--从域中根据参数名取出参数值放在双标签中-->
    <span th:text="${msg}"></span>      <br/>
</body>
</html>

（2）controller层

@Controller
public class ThymeleafController {
    @RequestMapping("showIndex")
    public String  showIndex(Map<String,Object> map){
        map.put("msg", "testMessage");
        return "index";
    }
}

（3）响应页面 

Thymeleaf基础语法

2、th:value属性

表单元素，设置HTML标签中表单元素value属性时使用。

（1）index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    this is index page
    <!--向span双标签内部添加文本-->
    <span th:text="pageMessage"></span> <br/>
    <!--从域中根据参数名取出参数值放在双标签中-->
    <span th:text="${msg}"></span>      <br/>
    <!--向input标签中的value属性赋值-->
    <input type="text"  th:value="pageMessage"/>
    <!--从域中根据参数名取出参数值 向input标签中的value属性赋值-->
    <input type="text"  th:value="${msg}"/>
</body>
</html>

（2）controller层

@Controller
public class ThymeleafController {
    @RequestMapping("showIndex")
    public String  showIndex(Map<String,Object> map){
        map.put("msg", "testMessage");
        return "index";
    }
}

（3）响应页面

Thymeleaf基础语法

3、th:if属性 

（1）showEmp.html

<span th:if="${emp}!=null"></span>判断emp对象是否为空

<span  th:if="${empList}!=null"> <span  th:if="${empList.size()}!=0"></span></spqn>

先判断empList集合是否为空，再判断empList集合的长度是否为0.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #empTable{
            width: 80%;
            border: 1px solid blue;
            margin: 0px auto;
        }
        #empTable th,td{
            border: 1px solid green;
            text-align: center;
        }
    </style>
</head>
<body>
展示单个员工信息:
<span th:if="${emp}!=null">
    工号:<span th:text="${emp.empno}"></span><br/>
    姓名:<span th:text="${emp.ename}"></span><br/>
    职务:<span th:text="${emp.job}"></span><br/>
    上级:<span th:text="${emp.mgr}"></span><br/>
    入职日期:<span th:text="${emp.hiredate}"></span><br/>
    工资:<span th:text="${emp.sal}"></span><br/>
    补助:<span th:text="${emp.comm}"></span><br/>
    部门号:<span th:text="${emp.deptno}"></span><br/>
</span>
<hr/>
<span  th:if="${empList}!=null">
    <span  th:if="${empList.size()}!=0">
        工号:<span th:text="${empList[0].empno}"></span><br/>
        姓名:<span th:text="${empList[0].ename}"></span><br/>
        职务:<span th:text="${empList[0].job}"></span><br/>
        上级:<span th:text="${empList[0].mgr}"></span><br/>
        入职日期:<span th:text="${empList[0].hiredate}"></span><br/>
        工资:<span th:text="${empList[0].sal}"></span><br/>
        补助:<span th:text="${empList[0].comm}"></span><br/>
        部门号:<span th:text="${empList[0].deptno}"></span><br/>
    </span>
</span>
</body>
</html>

（2）controller层

 @Autowired
    private EmpService empService;

    @RequestMapping("/showEmp")
    public String showEmp(Map<String, Object> map) {
        List<Emp> empList = empService.findAll();
        map.put("empList", empList);
        map.put("emp", empList.get(0));
        return "showEmp";
    }

（3）响应页面

Thymeleaf基础语法

4、th:each属性 

th:each="u,i :${list}"     其中u为迭代遍历，i表示迭代状态，i可以使用以下状态

  • index：当前迭代器的索引从0开始。
  • count：当前迭代对象的计数从1开始。
  • size：被迭代对象的长度。
  • even/odd：布尔值，当前循环是否是奇数/偶数从0开始。
  • first：布尔值，当前循环的是否是第一条，如果是返回true，否则返回false。
  • last：布尔值，当前循环的是否是最后一条，如果是则返回true，否则返回false。

（1）showEmp.html

<tr th:each="emp,i:${empList}">   empList集合中的单个对象赋给emp，

                                                      相当于for(Emp emp:empList);
        <td th:text="${i.index}"></td>
        <td th:text="${i.count}"></td>
        <td th:text="${i.size}"></td>
        <td th:text="${i.odd}"></td>
        <td th:text="${i.even}"></td>
        <td th:text="${i.first}"></td>
        <td th:text="${i.last}"></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.hiredate}"></td>
        <td th:text="${emp.sal}"></td>
        <td th:text="${emp.comm}"></td>
        <td th:text="${emp.deptno}"></td>
    </tr>

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #empTable{
            width: 80%;
            border: 1px solid blue;
            margin: 0px auto;
        }
        #empTable th,td{
            border: 1px solid green;
            text-align: center;
        }
    </style>
</head>
<body>
展示单个员工信息:
<span th:if="${emp}!=null">
    工号:<span th:text="${emp.empno}"></span><br/>
    姓名:<span th:text="${emp.ename}"></span><br/>
    职务:<span th:text="${emp.job}"></span><br/>
    上级:<span th:text="${emp.mgr}"></span><br/>
    入职日期:<span th:text="${emp.hiredate}"></span><br/>
    工资:<span th:text="${emp.sal}"></span><br/>
    补助:<span th:text="${emp.comm}"></span><br/>
    部门号:<span th:text="${emp.deptno}"></span><br/>
</span>
<hr/>
<span  th:if="${empList}!=null">
    <span  th:if="${empList.size()}!=0">
        工号:<span th:text="${empList[0].empno}"></span><br/>
        姓名:<span th:text="${empList[0].ename}"></span><br/>
        职务:<span th:text="${empList[0].job}"></span><br/>
        上级:<span th:text="${empList[0].mgr}"></span><br/>
        入职日期:<span th:text="${empList[0].hiredate}"></span><br/>
        工资:<span th:text="${empList[0].sal}"></span><br/>
        补助:<span th:text="${empList[0].comm}"></span><br/>
        部门号:<span th:text="${empList[0].deptno}"></span><br/>
    </span>
</span>
<table  id="empTable" cellpadding="0px" cellspacing="0px">
    <tr>
        <th>索引</th>
        <th>序号</th>
        <th>总人数</th>
        <th>偶数索引?</th>
        <th>奇数索引?</th>
        <th>第一?</th>
        <th>最后?</th>
        <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="${i.count}"></td>
        <td th:text="${i.size}"></td>
        <td th:text="${i.odd}"></td>
        <td th:text="${i.even}"></td>
        <td th:text="${i.first}"></td>
        <td th:text="${i.last}"></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.hiredate}"></td>
        <td th:text="${emp.sal}"></td>
        <td th:text="${emp.comm}"></td>
        <td th:text="${emp.deptno}"></td>
    </tr>
    
</table>
</body>
</html>

（2）controller层

@Controller
public class ThymeleafController {
    @Autowired
    private EmpService empService;
    @RequestMapping("/showEmp")
    public String showEmp(Map<String, Object> map) {
        List<Emp> empList = empService.findAll();
        map.put("empList", empList);
        map.put("emp", empList.get(0));
        return "showEmp";
    }

（3）响应页面

Thymeleaf基础语法

5、标准变量表达式支持的运算符 

（1）算数运算符：

算术运算：+ , - , * , / , %

<span th:text="1+1"></span>              //2
<span th:text="'1'+1"></span>            //11
<span th:text="${emp.empno}+1"></span>   //7370   其中emp.empno==7369
<span th:text="${emp.empno+1}"></span>   //7370   其中emp.empno==7369

 （2）关系运算符：

1 gt:     great than（大于）>
2 ge：    great equal（大于等于）>=
3 eq：    equal（等于）==
4 lt：    less than（小于）<
5 le：    less equal（小于等于）<=
6 ne：    not equal（不等于）!= 
//emp.sal==800  emp.deptno==20

<div th:text="${emp.sal ge 800}"></div>                                //true
<div th:text="${emp.sal } ge 800"></div>                               //true
<div th:text="${emp.sal ge 800} and ${emp.deptno eq 20}"></div>        //true
<div th:text="(${emp.sal }ge 800) or (${emp.deptno } ne 20)"></div>    //true
<div th:text="${emp.sal ge 800 or emp.deptno ne 20 }"></div>           //true

（3）逻辑运算符

&&或and：表示并且

||或or ：表示或者
<div th:text="1>0 and 2<3"></div>        //true
<div th:text="1>0 and 2>3"></div>        //false
<div th:text="1>0 or 2<3"></div>         //true
<div th:text="1>0 or 2>3"></div>         //true

在早期的thymeleaf模板引擎框架中 逻辑运算符要写在${}的外边。 

（4）三目运算符 

<tr th:each="emp,i:${empList}" th:class="${i.odd}?a:b">

Thymeleaf基础语法

6、对空值作出处理 

（1）showEmp.html

<tr th:each="emp,i:${empList}" th:class="${i.odd}?a:b">
        <td th:text="${i.index}"></td>
        <td th:text="${i.count}"></td>
        <td th:text="${i.size}"></td>
        <td th:text="${i.odd}"></td>
        <td th:text="${i.even}"></td>
        <td th:text="${i.first}"></td>
        <td th:text="${i.last}"></td>
        <td th:text="${emp.empno}"></td>
        <td th:text="${emp.ename}"></td>
        <td th:text="${emp.job}"></td>
        <td th:text="${emp.mgr} eq null ?老板:${emp.mgr}"></td>
        <td th:text="${emp.hiredate}"></td>
        <td th:text="${emp.sal}"></td>
        <td th:text="${emp.comm} eq null ?0:${emp.comm}"></td>
        <td th:text="${emp.deptno}"></td>
    </tr>

（2）controller层 

@Controller
public class ThymeleafController {
    @Autowired
    private EmpService empService;
    @RequestMapping("/showEmp")
    public String showEmp(Map<String, Object> map) {
        List<Emp> empList = empService.findAll();
        map.put("empList", empList);
        map.put("emp", empList.get(0));
        return "showEmp";
    }

（3）响应页面

Thymeleaf基础语法

7、 th:href属性

（1）showEmp.html

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

  <tr th:each="emp,i:${empList}" th:class="${i.odd}?a:b">
        <td th:text="${i.index}"></td>
        <td th:text="${i.count}"></td>
        <td th:text="${i.size}"></td>
        <td th:text="${i.odd}"></td>
        <td th:text="${i.even}"></td>
        <td th:text="${i.first}"></td>
        <td th:text="${i.last}"></td>
        <td th:text="${emp.empno}"></td>
        <td th:text="${emp.ename}"></td>
        <td th:text="${emp.job}"></td>
        <td th:text="${emp.mgr} eq null ?老板:${emp.mgr}"></td>
        <td th:text="${emp.hiredate}"></td>
        <td th:text="${emp.sal}"></td>
        <td th:text="${emp.comm} eq null ?0:${emp.comm}"></td>
        <td th:text="${emp.deptno}"></td>
        <td>
            <a th:href="@{/removeEmp(empno=${emp.empno},ename=${emp.ename})}">删除</a>
        </td>
    </tr>

（2）controller层

return "redirect:showAllEmp"：重定向，重新走@RequestMapping("/showAllEmp")注解的方法。

return "showEmp"：直接走showEmp.html模板。

@Controller
public class ThymeleafController {
    @Autowired
    private EmpService empService;
    @RequestMapping("/showAllEmp")
    public String showEmp(Map<String, Object> map) {
        List<Emp> empList = empService.findAll();
        map.put("empList", empList);
        map.put("emp", empList.get(0));
        return "showEmp";
    }
    @RequestMapping("/removeEmp")
    public String removeEmp(Integer empno,String ename){
        boolean success =empService.removeEmp(empno,ename);
        return "redirect:showAllEmp";
    }
}

（3） service层

public interface EmpService {

    List<Emp> findAll();

    boolean removeEmp(Integer empno, String ename);
}
@Service
public class EmpServiceImpl implements EmpService{
    @Autowired
    private EmpMapper empMapper;
    @Override
    public List<Emp> findAll() {
        return empMapper.findAll();
    }

    @Override
    public boolean removeEmp(Integer empno, String ename) {
        return empMapper.removeEmp(empno,ename)>1;
    }

}

（4）mapper层 

@Mapper
public interface EmpMapper {
    List<Emp> findAll();

    int removeEmp(Integer empno, String ename);
}

（5）mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.msb.mapper.EmpMapper">

    <select id="findAll" resultType="emp">
        select * from emp
    </select>
    <!--int removeEmp(Integer empno, String ename);-->
    <delete id="removeEmp">
        delete from emp where empno=#{param1} and ename=#{param2}
    </delete>

</mapper>

（7）响应页面

点击删除后：删除第一个数据

Thymeleaf基础语法

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

点击删除后，获取当前遍历对象的empno和ename，传给注解为@RequestMapping("/removeEmp")的方法，走removeEmp方法，然后走注解为@RequestMapping("/showAllEmp")的方法。

@RequestMapping("/showAllEmp")
    public String showEmp(Map<String, Object> map) {
        List<Emp> empList = empService.findAll();
        map.put("empList", empList);
        map.put("emp", empList.get(0));
        return "showEmp";
    }
    @RequestMapping("/removeEmp")
    public String removeEmp(Integer empno,String ename){
        boolean success =empService.removeEmp(empno,ename);
        return "redirect:showAllEmp";
    }

 8、th:onclick属性

给元素绑定事件，单击事件并传递参数
写法1：仅仅支持数字和布尔类型参数的传递，字符串不支持。

<a href="javascript:viod(0)"  th:onclick="'del('+${emp.empno}+')'">删除</a>

 写法2：支持数字和文本类型的参数传递。

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

（1）showEmp.html

href="javascript:void(0)"相当于把href属性给去掉了。

<table  id="empTable" cellpadding="0px" cellspacing="0px">
    <tr>
        <th>索引</th>
        <th>序号</th>
        <th>总人数</th>
        <th>偶数索引?</th>
        <th>奇数索引?</th>
        <th>第一?</th>
        <th>最后?</th>
        <th>工号</th>
        <th>姓名</th>
        <th>职务</th>
        <th>上级</th>
        <th>入职日期</th>
        <th>工资</th>
        <th>补助</th>
        <th>部门号</th>
        <th>操作</th>
    </tr>
    <tr th:each="emp,i:${empList}" th:class="${i.odd}?a:b">
        <td th:text="${i.index}"></td>
        <td th:text="${i.count}"></td>
        <td th:text="${i.size}"></td>
        <td th:text="${i.odd}"></td>
        <td th:text="${i.even}"></td>
        <td th:text="${i.first}"></td>
        <td th:text="${i.last}"></td>
        <td th:text="${emp.empno}"></td>
        <td th:text="${emp.ename}"></td>
        <td th:text="${emp.job}"></td>
        <td th:text="${emp.mgr} eq null ?老板:${emp.mgr}"></td>
        <td th:text="${emp.hiredate}"></td>
        <td th:text="${emp.sal}"></td>
        <td th:text="${emp.comm} eq null ?0:${emp.comm}"></td>
        <td th:text="${emp.deptno}"></td>
        <td>
            <a href="javascript:void(0)" th:onclick="removeEmp([[${emp.empno}]],[[${emp.ename}]])">删除</a>
        </td>
    </tr>
    
</table>
<script>
    function removeEmp(empno,ename){
        var resulet =confirm("确定要删除编号为"+empno+"的"+ename);
        if(resulet){
            window.location.href="removeEmp?empno="+empno+"&ename="+ename;
        }
    }
</script>

（2）controller层 

@Controller
public class ThymeleafController {
    @Autowired
    private EmpService empService;
    @RequestMapping("/showAllEmp")
    public String showEmp(Map<String, Object> map) {
        List<Emp> empList = empService.findAll();
        map.put("empList", empList);
        map.put("emp", empList.get(0));
        return "showEmp";
    }
    @RequestMapping("/removeEmp")
    public String removeEmp(Integer empno,String ename){
        boolean success =empService.removeEmp(empno,ename);
        return "redirect:showAllEmp";
    }
}

（3）响应页面

Thymeleaf基础语法

上一篇：thymeleaf 模板使用 之 解决因HTML标签未闭合引起的错误


下一篇：8.Thymeleaf