展示单个数据

控制器代码

package com.rennen.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

@Controller
@RequestMapping("user")
public class UserController {
    @GetMapping("findAll")
    public String findAll(HttpServletRequest request, Model model) {
        System.out.println("查询所有");
        model.addAttribute("name", "小夏");

        return "index"; // 逻辑名
    }
}

页面代码

<!DOCTYPE html>
<html lang="en" xmlns:th="<http://www.thymeleaf.org>">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
    <h1>This is Thymeleaf HTML!</h1>
    <h1>展示单个数据</h1>
    欢迎：<span th:text="${name}"></span>
    <h1>展示对象数据</h1>
    <h1>有条件展示数据</h1>
    <h1>展示多个数据</h1>
</body>
</html>

<aside> ⚠️ span 标签内部不能有内容，否则会覆盖 th:text

</aside>

分析过程

通过 URL 访问到了控制器类下的 findAll() 方法，Model 可以理解为一组封装的数据，return 语句目的是返回视图，视图用 HTML 呈现。Thymeleaf 的作用是将动态数据展现到静态页面上。

MVC 模型的理解暂时还有点不到位
补充
- 使用 th:text="${属性名}" 获取对应数据,获取数据时会将对应标签中数据清空,因此最好是空标签
- 使用 th:utext="${属性名}" 获取对应的数据,可以将数据中html先解析在渲染到页面
- 使用 th:value="${属性名}" 获取数据直接作为表单元素value属性
<aside> 💡 如果数据中有 HTML 标签的话，如何解析？

欢迎 <span th:text="${name}"/> username:<span th:utext="${username}"></span> text 改成 utext 就可以解析传输过来的 HTML 语法。

</aside>

展示对象数据

构建实体类

<aside> 💡 Lombok 是一个简化 Java 开发的工具，用注解就可以代替 Grtter/Setter, Constructer 等方法。

</aside>

package com.rennen.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

import java.util.Date;

@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class User {
    private String id;
    private String name;
    private Integer age;
    private Date bir;
}

新建对象

model.addAttribute("user", new User("21", "xiaoxia", 23, new Date()));

页面中取对象数据
```
<h1>展示对象数据</h1>
        <ul>
            id: <li th:text="${user.id}"/>
        </ul>
```
<aside> 💡 注意，前面的 user 对应的是 addAttribute() 方法的第一个参数

</aside>

有条件展示数据

<aside> 💡 Thymeleaf 中只有 if，没有 else。

</aside>

Thymeleaf 中的运算符

gt：great than（大于）>
ge：great equal（大于等于）>=
eq：equal（等于）==
lt：less than（小于）<
le：less equal（小于等于）<=
ne：not equal（不等于）!=

实例

<span th:if="${user.age} le 23" th:text="${user.name}"></span>

展示多个数据

封装数据

List<User> users = Arrays.asList(new User("21", "小夏", 21, new Date())
                                        , new User("22", "小张", 21, new Date()));
model.addAttribute("users", users);

页面中通过遍历得到多个数据

<h1>展示多个数据</h1>
        <ul th:each="user:${users}">
            <li th:text="${user.id}"/>
            <li th:text="${user.name}"/>
            <li th:text="${user.age}"/>
            <li th:text="${#dates.format(user.bir, 'yyyy年MM月dd日')}"/>
        </ul>

还可以获取遍历状态

<h1>展示多个数据</h1>
        <ul th:each="user, userStat:${users}">
            <li th:text="${user.id}"/>
            <li th:text="${user.name}"/>
            <li th:text="${user.age}"/>
            <li th:text="${#dates.format(user.bir, 'yyyy年MM月dd日')}"/>
            <li>集合中总记录数：<span th:text="${userStat.size}"/></li>
            
        </ul>

<ul th:each="user,userStat:${users}">
   <li><span th:text="${userStat.count}"/>-<span th:text="${user.id}"/></li>   获取遍历次数  count 从1开始 index 从0开始
   <li><span th:text="${userStat.odd}"/>-<span th:text="${user.name}"/></li>   获取当前遍历是否是奇数行
   <li><span th:text="${userStat.even}"/>-<span th:text="${user.age}"/></li>   获取当前遍历是否是偶数行
   <li><span th:text="${userStat.size}"/>-<span th:text="${user.bir}"/></li>   获取当前集合的总条数
</ul>

展示单个数据

展示对象数据

有条件展示数据

Thymeleaf 中的运算符

实例

展示多个数据

Thymeleaf 获取静态资源