spring-boot-thymeleaf模板

最新推荐文章于 2021-07-21 19:13:21 发布

转载最新推荐文章于 2021-07-21 19:13:21 发布 · 304 阅读

spring boot 专栏收录该内容

81 篇文章

订阅专栏

本文介绍如何在SpringBoot项目中配置并使用Thymeleaf模板引擎，包括Maven依赖配置、Controller编写及HTML页面展示数据的方法。

spring boot 使用thymeleaf模板

maven工程项目结构

这里写图片描述

引入thymeleaf模板

pom.xml文件

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

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>

    <!-thymeleaf模板->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

修改application.yml

spring:
  thymeleaf:
    cache: false
    mode: HTML5
    content-type: text/html
    encoding: UTF-8

ThymeLeafController.java文件

@Controller
public class ThymeLeafController {

    @RequestMapping("/index")
    public String index(Model model){

        List<User> userList = new ArrayList<>();
        for (int i=0; i < 9; i++){
            User user = new User();
            user.setFirstName("Mark-"+i);
            user.setLastName("Otto-"+i);
            user.setEmail(i+"-@mdo");
            userList.add(user);
        }
        model.addAttribute("userList", userList);
        model.addAttribute("tableName","用户信息表");
        return "home/index";
    }

}

User.java文件

public class User implements Serializable {
    private static final long serialVersionUID = -8247895014315042187L;

    private String firstName;
    private String lastName;
    private String email;
    //getter and setter...
}

index.html文件

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>spring boot 使用thymeleaf模板</title>

    <!-- Bootstrap -->
    <link th:href="@{/assets/bootstrap-3.3.5-dist/css/bootstrap.css}" rel="stylesheet" />
    <script th:src="@{/js/jquery-3.2.1.js}"></script>
    <script th:src="@{/assets/bootstrap-3.3.5-dist/js/bootstrap.js}"></script>

</head>
<body>

<div style="width: 400px; height: 300px; margin-left: 300px; margin-top: 100px;">
    <h1 th:text="${tableName}"></h1>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="user, iterRow: ${userList}">
                <td th:text="${iterRow.odd} ? '奇数': '偶数'"></td>
                <td th:text="${iterRow.index}"></td>
                <td th:text="${user.firstName}"></td>
                <td th:text="${user.lastName}"></td>
                <td th:text="${user.email}"></td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>