本文已参与「新人创作礼」活动，一起开启掘金创作之路。

thymeleaf使用案例

搭建一个SpringBoot项目

简单使用thymeleaf来进行案例使用在这里插入图片描述

目录结构

在这里插入图片描述

静态资源页

在这里插入图片描述

引入thymeleaf

<html lang="en" xmlns:th="http://www.thymeleaf.org">

login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #container{
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content:center;
      align-content: center;
    }
    #form_wrap{
      height: 500px;
      width: 350px;
      margin: 50px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="form_wrap">
      <form th:action="@{/login}" method="post">
        username:<input type="text" name="username"/><br><br>
        password:<input type="text" name="password"/><br><br>
        <input type="submit" value="login"><br>
        <label style="color: orangered" th:text="${msg}"></label>
      </form>
    </div>
  </div>
</body>
</html>

main.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>main</h2>
    <div>[[${session.loginUser.username}]]</div><br>
    <a th:href="@{/basic_table}">basic_table</a><br>
    <a th:href="@{/dynamic_table}">dynamic_table</a><br>
    <a th:href="@{/response_table}">response_table</a><br>
    <a th:href="@{/editable_table}">editable_table</a><br>
</body>
</html>

basic table

主要用到就这一个（实现功能）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            height: 34px;
            width: 100px;
        }
    </style>
</head>
<body>
  <h2>basic table</h2>

    <table>
        <thead>
            <tr>
                <td>id</td>
                <td>username</td>
                <td>password</td>
            </tr>
        </thead>
        <tbody>
            <tr th:each="user,index:${users}">
                <td th:text="${index.count}">1</td>
                <td th:text="${user.username}">zhansan</td>
                <td th:text="${user.password}">5438</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

thymeleaf的遍历功能

使用th：each进行遍历

<tr th:each="user,index:${users}">
       <td th:text="${index.count}">1</td>
       <td th:text="${user.username}">zhansan</td>
       <td th:text="${user.password}">5438</td>
</tr>

解释：

user：自定义遍历的变量名 index：遍历得到的索引 ${users}：需要遍历的对象名在tableController类中定义了一个List来构建表格中的内容 List的类型是自建类User 在这里插入图片描述 index.count：获取遍历数量从1开始其中索引是有一个.index，不过索引肯定是从0开始的所以用count

Java类

在这里插入图片描述

bean

在这里插入图片描述

User

package com.example.day3.bean;

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

@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {

    private String username;
    private String password;

}

controller

在这里插入图片描述

IndexController

package com.example.day3.controller;

import com.example.day3.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.thymeleaf.util.StringUtils;

import javax.servlet.http.HttpSession;

/**
 * 进入首页进行页面跳转至登录页
 */
@Controller
public class IndexController {

    /**
     * 发送请求/或/login跳转至登录页
     * @return
     */
    @GetMapping(value = {"/","/login"})
    public String loginPage(){
        return "login";
    }

    /**
     * 在login路径下发送post请求重定向跳转至main页面
     * @return
     */
    @PostMapping("/login")
    public String main(User user, HttpSession session, Model model){

        if (!StringUtils.isEmpty(user.getUsername())&&!StringUtils.isEmpty(user.getPassword())){
            //把登录成功的用户保存起来
            session.setAttribute("loginUser",user);
            //登录成功重定向到main.html
            return "redirect:/main.html";
        }else {
            model.addAttribute("msg","账号密码错误");
            return "login";
        }
    }

    /**
     * 处理表单重复提交问题
     * 真正跳转至main页面
     */
    @GetMapping("/main.html")
    public String mainPage(HttpSession session,Model model){
        //判断是否登录，使用拦截器或过滤器
        Object loginUser = session.getAttribute("loginUser");
        if (loginUser != null){
            return "main";
        }else {
            model.addAttribute("msg","账号未登录");
            return "login";
        }
    }
}

TableController

package com.example.day3.controller;

import com.example.day3.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import javax.servlet.http.HttpSession;
import java.util.Arrays;
import java.util.List;

/**
 * 进入table列表页的一系列跳转
 */
@Controller
public class TableController {

    @GetMapping("/basic_table")
    public String basic_table(HttpSession session, Model model) {
        //判断是否登录，拦截器，过滤器
        Object loginUser = session.getAttribute("loginUser");
        if (loginUser!=null){
        //动态渲染basic_table中的表格
            List<User> users = Arrays.asList(new User("韩金轮","123456"),
                    new User("大司马","456789"),
                    new User("韩金龙","111111"));
            model.addAttribute("users",users);
            return "table/basic_table";
        }else {
            model.addAttribute("msg","账号未登录");
            return "login";
        }
    }

    @GetMapping("/dynamic_table")
    public String dynamic_table() {
        return "table/dynamic_table";
    }

    @GetMapping("/response_table")
    public String response_table() {
        return "table/response_table";
    }

    @GetMapping("/editable_table")
    public String editable_table() {
        return "table/editable_table";
    }
}

结果展示

在这里插入图片描述

springboot学习[版本2.6.2]thymeleaf使用案例day3-1

thymeleaf使用案例

搭建一个SpringBoot项目

目录结构

静态资源页

引入thymeleaf

login.html

main.html

basic table

thymeleaf的遍历功能

解释：

Java类

bean

User

controller

IndexController

TableController

结果展示