springboot入门系列教程|第四篇：thymeleaf使用详解之常见属性以及常用字面量

前言

上一篇我们讲解了thymeleaf的标准表达式，了解了常用的3种表达式，接下来我们要讲的就是thymeleaf最常用的属性，学完本章，基本上你开发要涉及的基本都会使用。

环境

jdk1.8
maven 3.3.9
IDEA

thymeleaf常见属性

th:action

//跟上一章@{}URL表达式一个道理
//会返回这种格式：/coderV/person/info/ 
<form  th:action="@{/person/info/}">......</form>
//会返回这种格式：/person/info 不会动态变化
<form  th:action="/person/info">......</form>

th:each —–元素遍历，非常常用

第一种常见情景list：
后端代码：

@RequestMapping(value = "/personList")
    public String testList(Model model){
        List<Person> personList = new ArrayList<>();
        for (int i = 0; i < 5 ; i++) {
            Person person = new Person() ;
            person.setAge(i);
            person.setName(i+"xxx");
            person.setWxCode("coldStone");
            personList.add(person);
        }
        model.addAttribute("personList", personList);
        return "index";
    }

前端代码：

<table border="1" style="border: aliceblue">
    <tr>
    <th>列表索引</th>
    <th>年龄</th>
    <th>名称</th>
    <th>微信公众号</th>
    <th>当前已经遍历的个数</th>
    <th>集合的总数目</th>
    <th>当前遍历的对象</th>
    </tr>
<tr th:each="person : ${personList}">
    <td th:text="${personStat.index}"></td>
    <td th:text="${person.age}"></td>
    <td th:text="${person.name}"></td>
    <td th:text="${person.wxCode}"></td>
    <td th:text="${personStat.count}"></td>
    <td th:text="${personStat.size}"></td>
    <td th:text="${personStat.current}"></td>
</tr>
</table>

结果显示：
这里写图片描述

第二种常见情景map:
后端代码：

 @RequestMapping(value = "/personMap")
    public String testMap(Model model){
        Map<String,Object >  personMap = new HashMap<>();
        for (int i = 0; i < 5 ; i++) {
            Person person = new Person() ;
            person.setAge(i);
            person.setName(i+"xxx");
            person.setWxCode("coldStone");
            personMap.put(String.valueOf(i),person);
        }
        model.addAttribute("personMap",personMap);
        model.addAttribute("wxCode","coldStone");

        return "index";
    }

前端代码：

//注意这边是map，所以map集合的每个元素都是一个键值对，
要获取值通过,object.value,获取键通过object.key
<table border="1" style="border: aliceblue">
    <tr>
    <th>每个map元素的键</th>
    <th>年龄</th>
    <th>名称</th>
    <th>微信公众号</th>
    </tr>
<tr th:each="person : ${personMap}">
    <td th:text="${person.key}"></td>
    <td th:text="${person.value.age}"></td>
    <td th:text="${person.value.name}"></td>
    <td th:text="${person.value.wxCode}"></td>
</tr>
</table>

前端展示：
这里写图片描述

th:if

条件判断：
后端代码：

 @RequestMapping(value = "/testIf")
    public String testIf(Model model){
        Person person = new Person() ;
        person.setSex(1);
        model.addAttribute("person", person);
        return "index";
    }

前端代码：

<span th:if="${person.sex eq 1}">
    男
</span>
<span th:if="${person.sex eq 2}">
    女
</span>

结果展示：
这里写图片描述

th:switch/th:case
switch case判断语句
后端代码：

 @RequestMapping(value = "/testIf")
    public String testIf(Model model){
        Person person = new Person() ;
        person.setSex(1);
        model.addAttribute("person", person);
        return "index";
    }

前端代码：

<div th:switch="${person.sex}">
    <p th:case="1">性别：男</p>
    <p th:case="2">性别：女</p>
    <p th:case="*">性别：你猜</p>
</div>

结果展示：
这里写图片描述

接下来的常见属性我直接贴上前端一般的写法，跟后台无大关。

th:href

<a  class="login" th:href="@{/register}">登录</a>

th:object

<p th:object="*{person}"></>

th:src

用于外部资源引入，比如<script>标签的src属性，
<img>标签的src属性，常与@{}表达式结合使用；
<script th:src="@{/static/js/bootstrap-1.1.min.js}"></script>

th:text

//用于文本显示
<input type="text" th:text="${wxCode}">

th:value

//能对某元素的value属性进行赋值
<input th:value="${wxCode}">

记住一个关键的点，就是thymeleaf的很多标签都会配合标准表达式使用，所以一定要熟练使用并理解标准表达式，不会的童鞋请看上篇：thymeleaf使用详解之标准表达式

接下来介绍常用字面量：

文本字面量

说明：用单引号’…’包围的字符串为文本字面量，比如：

<p>我的微信公众号是：<span th:text="coldStone"></span></p>

数字字面量

说明：会进行数字计算

<p>我今年<span th:text="99+1"></span>岁</p>
我今年100岁

boolean字面量

<p th:if="${isFlag} == false">
false在花括号外面，解析识别由Thymleaf自身完成
</p>

<p th:if="${isFlag == true}">
false写在花括号里面，解析识别由SpringEL完成
</p>

null字面量

<p th:if="${personList== null}">
personList为空
</p>

上一篇：thymeleaf使用详解之标准表达式

下一篇：springboot入门系列教程|第五篇：thymeleaf使用详解之表达式对象以及常用配置
获取本章源码：springBoot-study-thymeleaf
希望大家支持一下我的微信公众号:coldStone，主要会分享分布式系统相关的一系列技术，目前会推出springboot、springcloud和docker系列教程，后期会有关于中间件以及各个层面的性能优化的文章，同时还会分享一些赚钱理财的小套路哦，欢迎大家来支持，一起学习成长，程序员不仅仅是搬瓦工！
这里写图片描述