SpringBoot集成Thymeleaf模板引擎_springboot thymelead pom-CSDN博客

本文链接：https://blog.csdn.net/an8695001/article/details/121229688

首先，pom.xml中导入thymeleaf的依赖：

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

application.yml配置

#ThymeLeaf配置
  thymeleaf:
    #模板的模式，支持 HTML, XML TEXT JAVASCRIPT
    mode: HTML5
    #编码 可不用配置
    encoding: UTF-8
    #内容类别,可不用配置
    content-type: text/html
    #开发配置为false,避免修改模板还要重启服务器
    cache: false
    #配置模板路径，默认是templates，可以不用配置
    prefix: classpath:/templates/
    # 后缀
    suffix: .html

User代码

import lombok.Data;
import java.util.Date;

@Data
public class User {
    private Long id;      //id
    private Integer age; //年龄
    private String name;//用户名
    private String password;//密码
    private String role; //角色

}

HelloController 代码

import com.example.springsecuritydemo.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

@Controller
public class HelloController {

    @RequestMapping("/index")
    public String index(ModelMap map) {
        map.addAttribute("name","张三");
        return "index";
    }

    @RequestMapping("/test")
    public String test(ModelMap map){
        User u = new User();
        u.setName("张三");
        u.setAge(24);

        User u1 = new User();
        u1.setName("李四");
        u1.setAge(35);

        User u2 = new User();
        u2.setName("nami");
        u2.setAge(27);

        List<User> userList = new ArrayList<>();
        userList.add(u);
        userList.add(u1);
        userList.add(u2);
        map.addAttribute("user",u);
        map.addAttribute("userList",userList);
        return "test";
    }


    @PostMapping("/postform")
    public String postform(User u){
        System.out.println(u.getName());
        return "redirect:/index.html";
    }

}

resources目录下新建templates目录，templates目录下新建index.html，代码如下

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   index.html in templates
   <h1 th:text="${name}">hello ${name}</h1>
</body>
</html>

templates目录下新建test.html，代码如下

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <body>
    <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}"/>
        <br/>
        用户生日:<input th:value="${#dates.format(user.birthday,'yyyy-MM-dd')}"/><!--时间格式转换-->
        <br/>
    </div>
    <br/>
    <div th:object="${user}"><!--定义一个对象,指定为user,下面的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')}"/><!--时间格式转换-->
        <br/>
    </div>
    <br/>
    URL:<br/>
    <a th:href="@{https://www.baidu.com}" th:target="_blank">多多关照</a>
    <br/>
    <br/>
    <form th:action="@{/th/postform}" th:object="${user}" th:method="post"><!--表单提交-->
        <input type="text" th:field="*{name}"/><!--th:field="*{name}"相当于id="name" name="name" value="具体的name值"-->
        <input type="submit"/>
    </form>
    <br/>
    <br/>
    <div th:if="${user.age lt 25}">young</div><!--lt 小于-->
    <div th:if="${user.age ge 25}">old</div><!--ge 大于等于-->
    <br/>
    <br/>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>备注</th>
            <th>生日</th>
        </tr>
        <tr th:each="person:${userList}"><!--循环userList,以person作为形参-->
            <td th:text="${person.name}"></td>
            <td th:text="${person.age}"></td>
            <td th:text="${person.age ge 25} ? old : young"></td>
            <td th:text="${#dates.format(person.birthday,'yyyy-MM-dd hh:mm:ss')}"></td>
        </tr>
    </table>
    </body>
</html>

resources下新建static目录，static下新建index.html,内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   index.html in static
</body>
</html>