Thymeleaf 之 初步使用

本文章来自【知识林】

只要对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>

说明：

未完……，点击这里查看全文

本文章来自【知识林】