Thymeleaf 常用标签的使用

2018-08-29 10:24:04

thymeleaf 常用标签的使用方法

html 文件如下所示

<div>
    用户姓名： <input th:id="${user.name}" th:name="${user.name}" th:value="${user.name}" /> <br />
    用户年龄： <input th:value="${user.age}" /> <br />
    用户生日: <input th:value="${user.birthday}" />
</div>

java 文件如下所示

package com.nosay.demo.Controller;

import com.nosay.demo.Pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.Date;

@Controller
@RequestMapping("th")
public class ThymeleafController {
    
    @RequestMapping("/user")
    public String user(ModelMap map) {

        User u = new User();
        u.setName("nosay");
        u.setAge(18);
        u.setPassword("123456");
        u.setBirthday(new Date());
        u.setDesc("<font color='green'><b>Hello</b></font>");
        map.addAttribute("user",u);
        return "thymeleaf/user";
    }

}

注意到用户的生日信息显示不是很友好，我们可以通过 thymeleaf 的时间类型转换

用户生日： <input th:value="${#dates.format(user.birthday, 'yyyy/MM/dd')}" />

我们还可以通过一种简化的方式去书写 html ，从而使代码看着更加简洁，如下：

<div th:object="${user}">
    用户姓名： <input th:id="*{name}" th:name="*{name}" th:value="*{name}" /> <br />
    用户年龄： <input th:value="*{age}" /> <br />
    用户生日： <input th:value="*{#dates.format(birthday, 'yyyy/MM/dd')}" />
</div>

在 java 文件中，有这样的一行代码

u.setDesc("<font color='green'><b>Hello</b></font>");

此时在 html 文件中加入

<div>
    text 与 utext : <br />
    <span th:text="${user.desc}">abc</span> <br />
    <span th:utext="${user.desc}">abc</span>
</div>

我们发现，text 标签把 html 直接输出了，而 utext 则把 html 渲染输出了，从而文字变成了绿色

thymeleaf 标签的使用

<a href="" th:href="@{http://www.baidu.com}">百度一下，你就知道</a>

关于 javascript 和 css 文件在 thymeleaf 中的引入

首先需要在 application.properties 文件中加入

spring.mvc.static-path-pattern=/static/**

然后，在资源文件夹中，新建static文件夹，然后建立 javascript文件夹，最后建立 javascript 测试文件，内容为

alert('hello')

这样，只需要在html文件中，这样引入就可以了

<script th:src="@{/static/javascript/test.js}"></script>

from 表单构造，以及后端接收示例

<form th:action="@{/th/postform}" th:object="${user}" method="post" th:method="post">
        <input type="text" th:field="*{name}" />
        <input type="submit">
</form>
@PostMapping("postform")
    public String postform(User u) {
        System.out.println(u.getName());
        return "redirect:/th/user";
    }

If 标签的使用

<div>
    <div th:if="${user.age} == 18">你十八岁了</div>
    <div th:if="${user.age} gt 18">你超过18岁了</div>
    <div th:if="${user.age} lt 18">你还未满18岁</div>
    <div th:if="${user.age} ge 18">大于等于18岁</div>
    <div th:if="${user.age} le 18">小于等于18岁</div>
</div>

selected 标签的使用

<div>
    <select>
        <option>选择框</option>
        <option th:selected="${user.name eq 'lee'}">lee</option>
        <option th:selected="${user.name eq 'imooc'}">imooc</option>
        <option th:selected="${user.name eq 'nosay'}">nosay</option>
    </select>
</div>

循环的使用

在java文件中定义list，如下

        User u = new User();
        u.setName("nosay");
        u.setAge(21);
        u.setPassword("123456");
        u.setBirthday(new Date());
        u.setDesc("<font color='green'><b>Hello</b></font>");

        User u1 = new User();
        u1.setName("nosay");
        u1.setAge(21);
        u1.setPassword("123456");
        u1.setBirthday(new Date());
        u1.setDesc("<font color='green'><b>Hello</b></font>");

        User u2 = new User();
        u2.setName("nosay");
        u2.setAge(21);
        u2.setPassword("123456");
        u2.setBirthday(new Date());
        u2.setDesc("<font color='green'><b>Hello</b></font>");

        List<User> userList = new ArrayList<>();
        userList.add(u);
        userList.add(u1);
        userList.add(u2);
        map.addAttribute("userList",userList);
<table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>备注</th>
            <th>生日</th>
        </tr>
        <tr th:each="person:${userList}">
            <td th:text="${person.name}"></td>
            <td th:text="${person.age}"></td>
            <td th:text="${person.age gt 18} ? 超过18岁:未满18岁"></td>
            <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd hh:mm:ss')}"></td>
        </tr>
    </table>

Swith 用法

<div th:switch="${user.name}">
    <p th:case="'Lee'">超级管理员</p>
    <p th:case="'nosay'">普通管理员</p>
    <p th:case="*">普通用户</p>
</div>