本文所属【知识林】:http://www.zslin.com/web/article/detail/31

只要对MVC框架和JSTL有所了解的,在学习Thymeleaf时都不会觉得太难。

这篇文章主要讲述Thymeleaf的一些比较常用的使用方法:

  1. 非表单数据显示(字符串拼接)
  2. 表单数据显示
  3. 三目运算
  4. if判断
  5. switch选择及case应用
  6. each循环(循环中状态对象的各属性)

下面依次做下介绍:

  • 简单对比

在JSP的表单中是这样:

<form:input name="userName" value="${user.name}" />

Thymeleaf中是这样:

<input type="text" name="userName" value="zslin" th:value="${user.name}" />

注意:
Thymeleaf中必须要有结尾,如JSP可以是:<input>Thymeleaf则必须是:<input/>

上面那种方式无法在静态环境的浏览器中打开,或打开后无法正常显示,而下面这种方式可以在静态环境的浏览器中打开,在input框中显示的内容是zslin

  • 数据传递

服务端:

@RequestMapping(value = "index", method = RequestMethod.GET)
public String index(Model model) {
    model.addAttribute("name", "知识林");
    model.addAttribute("age", 29);
    return "/web/index";
}

html页面:

<h1>你好 : <b th:text="${name}">姓名</b>!</h1>
<p>现在年龄:<span th:text="${age}"></span></p>

将显示:

你好 : 知识林!

现在年龄:29

说明:在非表单标签中显示内容使用:th:text

字符串拼接:<h2 th:text="'姓名:'+${name}"></h2>

  • 三目运算及表单显示
<input th:value="${name}"/>
<input th:value="${age gt 30 ? '中年':'年轻'}"/>

说明:在表单标签中显示内容使用:th:value${age gt 30 ? '中年':'年轻'}表示如果age大于30则显示中年,否则显示年轻

gt:great than(大于)

ge:great equal(大于等于)

eq:equal(等于)

lt:less than(小于)

le:less equal(小于等于)

ne:not equal(不等于)

  • if判断
<h1>
    <b th:text="${name}"></b>:
    <span th:if="${age gt 30}">中年</span>
    <span th:unless="${age gt 30}">年轻</span>
</h1>

说明:如果age大于30显示中年,否则显示年轻,跟上面的三目运算效果一样。使用th:if做判断,用th:unless做否则的判断。

  • switch选择
<p th:switch="${age}">
    <p th:case="29">奔三</p>
    <p th:case="*">其他年龄</p>
</p>

说明:和Java中的switch语句差不多,th:case="*"表示除其他指定值之外的情况。

  • each循环

DTO数据类:

public class WebDto {

    private String name;

    private String url;

    public String getName() {
        return name;
    }

    public String getUrl() {
        return url;
    }

    public void setName(String name) {
        this.name = name;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public WebDto(String name, String url) {
        this.name = name;
        this.url = url;
    }

    public WebDto() {}
}

服务端Controller:

@RequestMapping(value = "list", method = RequestMethod.GET)
public String list(Model model) {
    List<WebDto> list = new ArrayList<WebDto>();
    list.add(new WebDto("知识林", "http://www.zslin.com"));
    list.add(new WebDto("项目基础", "http://basic.zslin.com"));
    model.addAttribute("datas", list);
    return "/web/list";
}

html页面:

<table style="width:100%">
    <tr>
        <th>网站名称</th>
        <th>网址</th>
    </tr>
    <tr th:each="obj : ${datas}">
        <td th:text="${obj.name}">名称</td>
        <td th:text="${obj.url}">网址</td>
    </tr>
</table>

说明:使用th:each循环,注意循环是将当前标签一起循环,也就是这里的tr也一起被循环。

  • 循环中的state(状态对象)
<table style="width:100%">
    <tr>
        <th>网站名称</th>
        <th>网址</th>
        <th>state:index</th>
        <th>state:count</th>
        <th>state:size</th>
        <th>state:current</th>
        <th>state:even</th>
        <th>state:odd</th>
        <th>state:first</th>
        <th>state:last</th>
    </tr>
    <tr th:each="obj, objVs : ${datas}">
        <td th:text="${obj.name}">名称</td>
        <td th:text="${obj.url}">网址</td>
        <td th:text="${objVs.index}">状态序号,从0开始</td>
        <td th:text="${objVs.count}">状态序号,从1开始</td>
        <td th:text="${objVs.size}">状态size</td>
        <td th:text="${objVs.current.name}">状态 当前对象</td>
        <td th:text="${objVs.even}">状态 奇数</td>
        <td th:text="${objVs.odd}">状态 偶数</td>
        <td th:text="${objVs.first}">状态 是否第一条</td>
        <td th:text="${objVs.last}">状态 是否最后一条</td>
    </tr>
</table>

说明:

index:列表状态的序号,从0开始;

count:列表状态的序号,从1开始;

size:列表状态,列表数据条数;

current:列表状态,当前数据对象

even:列表状态,是否为奇数,boolean类型

odd:列表状态,是否为偶数,boolean类型

first:列表状态,是否为第一条,boolean类型

last:列表状态,是否为最后一条,boolean类型

示例代码:https://github.com/zsl131/thymeleaf-study/tree/master/study03

本文所属【知识林】:http://www.zslin.com/web/article/detail/31
文章点评共:2 条
点评内容: 提交点评

06-22 点评:赞

03-06 点评:内容是初学者的福音...