框架 Spring Boot 技术入门到整合 6-3 thymeleaf 常用标签的使用方法

0　　　　课程地址

https://www.imooc.com/video/16722/0

 

1　　　　常用标签demo(注意可以F12查看html的源码进行对照)

1.1　　基本使用方式

见上节

 

1.2　　对象引用方式  时间格式转换

a　　对象的两种引用方式

b　　日期如何转换格式

test.html

<!-- 魏豆豆：注意 与el表达式类似，这些对象必须是对象里的属性，注意检查大小写-->
<!-- 包含知识点：1    html中 对象引用展示方式（两种方式）
                 2    日期如何进行转换格式 -->
<div>
    用户姓名：<input th:id="${user.userName}" th:name="${user.userName}" th:value="${user.userName}"/>
    <br/>
    用户年龄：<input th:value="${user.userAge}"/>
    <br/>
    用户生日：<input th:value="${user.birthDay}"/>
    <br/>
    用户生日：<input th:value="${#dates.format(user.birthDay, 'yyyy-MM-dd')}"/>
    <br/>
</div>

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

 

ThymeleafController.java

 @RequestMapping("test")
    public String test(ModelMap map) {
        User u = new User();
        u.setUserName("魏豆豆");
        u.setUserAge(10);
        u.setPassWord("123465");
        u.setBirthDay(new Date());
        u.setDesc("<font color='green'><b>hello imooc</b></font>");

        map.addAttribute("user", u);

        User u1 = new User();
        u1.setUserAge(19);
        u1.setUserName("imooc");
        u1.setPassWord("123456");
        u1.setBirthDay(new Date());

        User u2 = new User();
        u2.setUserAge(17);
        u2.setUserName("LeeCX");
        u2.setPassWord("123456");
        u2.setBirthDay(new Date());

        List<User> userList = new ArrayList<>();
        userList.add(u);
        userList.add(u1);
        userList.add(u2);

        map.addAttribute("userList", userList);

        return "thymeleaf/test";
    }

 

User.java

package com.example.demo.bean;

import com.fasterxml.jackson.annotation.*;

import java.util.Date;

/**
 * User
 *
 * @author 魏豆豆
 * @date 2020/11/15
 */
@JsonIgnoreProperties({"userAge","passWord"})
public class User {
    @JsonIgnore
    private String userID;
    private String userName;
    private int userAge;
    private String passWord;
    @JsonFormat(pattern = "yyyy/MM/dd hh:mm:ss a",locale = "zh",timezone = "GMT+8")//日期格式
    private Date birthDay;
    @JsonInclude(JsonInclude.Include.NON_NULL)//为空不显示 JsonInclude.Include.ALWAYS 总显示
    private String desc;

    public String getUserID() {
        return userID;
    }

    public void setUserID(String userID) {
        this.userID = userID;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public int getUserAge() {
        return userAge;
    }

    public void setUserAge(int userAge) {
        this.userAge = userAge;
    }

    public String getPassWord() {
        return passWord;
    }

    public void setPassWord(String passWord) {
        this.passWord = passWord;
    }

    public Date getBirthDay() {
        return birthDay;
    }

    public void setBirthDay(Date birthDay) {
        this.birthDay = birthDay;
    }

    public String getDesc() {
        return desc;
    }

    public void setDesc(String desc) {
        this.desc = desc;
    }
}

 

1.3　　text和utext的转换

text 与 utext ：<br/>
<!-- text 原封不动带过来，utext 去掉了相应的格式-->
<span th:text="${user.desc}">abc</span>
<br/>
<span th:utext="${user.desc}">abc</span>
<br/>
<br/>

 

1.4　　url的使用方式

test.html

URL:<br/>
<a href="" th:href="@{http://www.imooc.com}">网站地址</a>
<br/>

<br/>
<form th:action="@{/th2/postform}" th:object="${user}" method="post" th:method="post">
    <input type="text" th:field="*{userName}"/>
    <input type="text" th:field="*{userAge}"/>
    <input type="submit"/>
</form>
<br/>

 

ThymeleafController.java

 @PostMapping("postform")
    public String postform(User u) {

        System.out.println("姓名：" + u.getUserName());
        System.out.println("年龄：" + u.getUserAge());

        return "redirect:/th2/test";
    }

测似结果：

 

 

 

 

 

1.5　　条件判断 th:if  th:unless

test.html

<br/>
<div th:if="${user.userAge} == 18">十八岁的天空</div>
<div th:if="${user.userAge} gt 18">你老了</div>
<div th:if="${user.userAge} lt 18">你很年轻</div>
<div th:if="${user.userAge} ge 18">大于等于</div>
<div th:if="${user.userAge} le 18">小于等于</div>
<br/>

 

ThymeleafController.java

 @RequestMapping("test")
    public String test(ModelMap map) {
        User u = new User();
        u.setUserName("魏豆豆");
        u.setUserAge(10);
        u.setPassWord("123465");
        u.setBirthDay(new Date());
        u.setDesc("<font color='green'><b>hello imooc</b></font>");

        map.addAttribute("user", u);

        User u1 = new User();
        u1.setUserAge(19);
        u1.setUserName("imooc");
        u1.setPassWord("123456");
        u1.setBirthDay(new Date());

        User u2 = new User();
        u2.setUserAge(17);
        u2.setUserName("LeeCX");
        u2.setPassWord("123456");
        u2.setBirthDay(new Date());

        List<User> userList = new ArrayList<>();
        userList.add(u);
        userList.add(u1);
        userList.add(u2);

        map.addAttribute("userList", userList);

        return "thymeleaf/test";
    }

 

测试结果：

 

1.6　　选择下拉框

test.html

<select>
     <option >选择框</option>
     <option th:selected="${user.userName eq 'lee'}">lee</option>
     <option th:selected="${user.userName eq 'imooc'}">imooc</option>
     <option th:selected="${user.userName eq 'LeeCX'}">LeeCX</option>
     <option th:selected="${user.userName eq '魏豆豆'}">帅哥</option>
</select>

 

ThymeleafController.java

@RequestMapping("test")
    public String test(ModelMap map) {
        User u = new User();
        u.setUserName("魏豆豆");
        u.setUserAge(10);
        u.setPassWord("123465");
        u.setBirthDay(new Date());
        u.setDesc("<font color='green'><b>hello imooc</b></font>");

        map.addAttribute("user", u);

        User u1 = new User();
        u1.setUserAge(19);
        u1.setUserName("imooc");
        u1.setPassWord("123456");
        u1.setBirthDay(new Date());

        User u2 = new User();
        u2.setUserAge(17);
        u2.setUserName("LeeCX");
        u2.setPassWord("123456");
        u2.setBirthDay(new Date());

        List<User> userList = new ArrayList<>();
        userList.add(u);
        userList.add(u1);
        userList.add(u2);

        map.addAttribute("userList", userList);

        return "thymeleaf/test";
    }

 

测试结果：

 

1.7　　循环 th:each

test.html

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>年龄备注</th>
        <th>生日</th>
    </tr>
    <tr th:each="person:${userList}">
        <td th:text="${person.userName}"></td>
        <td th:text="${person.userAge}"></td>
        <td th:text="${person.userAge gt 18} ? 你老了 : 你很年轻">18岁</td>
        <td th:text="${#dates.format(user.birthDay, 'yyyy-MM-dd hh:mm:ss')}"></td>
    </tr>
</table>

 

ThymeleafController.java

 @RequestMapping("test")
    public String test(ModelMap map) {
        User u = new User();
        u.setUserName("魏豆豆");
        u.setUserAge(10);
        u.setPassWord("123465");
        u.setBirthDay(new Date());
        u.setDesc("<font color='green'><b>hello imooc</b></font>");

        map.addAttribute("user", u);

        User u1 = new User();
        u1.setUserAge(19);
        u1.setUserName("imooc");
        u1.setPassWord("123456");
        u1.setBirthDay(new Date());

        User u2 = new User();
        u2.setUserAge(17);
        u2.setUserName("LeeCX");
        u2.setPassWord("123456");
        u2.setBirthDay(new Date());

        List<User> userList = new ArrayList<>();
        userList.add(u);
        userList.add(u1);
        userList.add(u2);

        map.addAttribute("userList", userList);

        return "thymeleaf/test";
    }

 

测试结果：

 

 

 

 

1.8　　th:switch 和 th:case

test.html

<div th:switch="${user.UserName}">
  <p th:case="'lee'">lee</p>
  <p th:case="#{roles.manager}">普通管理员</p>
  <p th:case="#{roles.superadmin}">超级管理员</p>
  <p th:case="*">其他用户</p>
</div>

 

ThymeleafController.java

 @RequestMapping("test")
    public String test(ModelMap map) {
        User u = new User();
        u.setUserName("lee");
        u.setUserAge(10);
        u.setPassWord("123465");
        u.setBirthDay(new Date());
        u.setDesc("<font color='green'><b>hello imooc</b></font>");

        map.addAttribute("user", u);

        User u1 = new User();
        u1.setUserAge(19);
        u1.setUserName("imooc");
        u1.setPassWord("123456");
        u1.setBirthDay(new Date());

        User u2 = new User();
        u2.setUserAge(17);
        u2.setUserName("LeeCX");
        u2.setPassWord("123456");
        u2.setBirthDay(new Date());

        List<User> userList = new ArrayList<>();
        userList.add(u);
        userList.add(u1);
        userList.add(u2);

        map.addAttribute("userList", userList);

        return "thymeleaf/test";
    }

测试结果

 

 

 

1.9　　引入配置文件 i18n相关

国际化i18n 配置文件必须以message作为前缀，详细解析，见

https://www.cnblogs.com/kingsonfu/p/10396946.html

test.html

<div th:switch="${user.UserName}">
  <p th:case="'lee'">lee</p>
  <p th:case="#{roles.manager}">普通管理员</p>
  <p th:case="#{roles.superadmin}">超级管理员</p>
  <p th:case="*">其他用户</p>
</div>
<br/>

 

ThymeleafController.java

@RequestMapping("test")
    public String test(ModelMap map) {
        User u = new User();
        u.setUserName("superadmin");
        u.setUserAge(10);
        u.setPassWord("123465");
        u.setBirthDay(new Date());
        u.setDesc("<font color='green'><b>hello imooc</b></font>");

        map.addAttribute("user", u);

        User u1 = new User();
        u1.setUserAge(19);
        u1.setUserName("imooc");
        u1.setPassWord("123456");
        u1.setBirthDay(new Date());

        User u2 = new User();
        u2.setUserAge(17);
        u2.setUserName("LeeCX");
        u2.setPassWord("123456");
        u2.setBirthDay(new Date());

        List<User> userList = new ArrayList<>();
        userList.add(u);
        userList.add(u1);
        userList.add(u2);

        map.addAttribute("userList", userList);

        return "thymeleaf/test";
    }

 

application.properties 引入 i18n

############################################################
#
# 配置i18n 资源文件，供thymeleaf 读取
#
############################################################
spring.messages.basename=i18n/messages
spring.messages.cache-seconds=3600
spring.messages.encoding=UTF-8

 

message.properties（在i18n目录下)

############################################################
#
# 用户自定义权限
#
############################################################
# 普通管理员
roles.manager=manager
roles.superadmin=superadmin

 

 

 

测试结果：

 

 

 

 

1.A　　引入静态资源文件js/css

application.js  引入静态文件路径

#设定静态文件路径，js,css等
spring.mvc.static-path-pattern=/static/**

 

test.html

<head lang="en">
    <meta charset="UTF-8" />
    <title></title>

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

 

 

ThymeleafController.java

@RequestMapping("test")
    public String test(ModelMap map) {
        User u = new User();
        u.setUserName("superadmin");
        u.setUserAge(10);
        u.setPassWord("123465");
        u.setBirthDay(new Date());
        u.setDesc("<font color='green'><b>hello imooc</b></font>");

        map.addAttribute("user", u);

        User u1 = new User();
        u1.setUserAge(19);
        u1.setUserName("imooc");
        u1.setPassWord("123456");
        u1.setBirthDay(new Date());

        User u2 = new User();
        u2.setUserAge(17);
        u2.setUserName("LeeCX");
        u2.setPassWord("123456");
        u2.setBirthDay(new Date());

        List<User> userList = new ArrayList<>();
        userList.add(u);
        userList.add(u1);
        userList.add(u2);

        map.addAttribute("userList", userList);

        return "thymeleaf/test";
    }

 

 

测试结果