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>

说明:

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

本文章来自【知识林】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值