Spring Boot – Thymeleaf 示例

allway2

已于 2022-05-08 12:24:58 修改

阅读量792

点赞数

于 2022-05-08 10:49:54 首次发布

本文链接：https://blog.csdn.net/allway2/article/details/124644998

版权

Thymeleaf是一个基于 Java 的服务器端模板引擎，适用于 Web 和独立环境，能够处理 HTML、XML、JavaScript、CSS 甚至纯文本。它比 JPS 更强大，负责 UI 上的动态内容渲染。该引擎允许后端和前端开发人员在同一视图上并行工作。它可以直接访问 java 对象和 spring bean 并将它们与 UI 绑定。当我们创建任何 Web 应用程序时，它主要与 Spring MVC 一起使用。因此，让我们从一个示例开始，了解 Thymeleaf 如何与 Spring 框架一起工作。

项目设置

在这里，我们将对 Employee 数据集执行 crud 操作。因此，为了构建它，我们必须添加某些以项目符号形式或也在 pom.xml 中列出的依赖项。

Spring Web（使用 Spring MVC 构建 Web，包括 RESTful 应用程序。使用 Apache Tomcat 作为默认嵌入式容器。）
Spring Data JPA（使用 Spring Data 和 Hibernate 使用 Java Persistence API 在 SQL 存储中持久化数据。）
Spring Boot Devtools（提供快速应用程序重启、LiveReload 和配置以增强开发体验）
MySQL 驱动程序（MySQL JDBC 和 R2DBC 驱动程序）
Thymeleaf（用于 Web 和独立环境的服务器端 Java 模板引擎。允许 HTML 在浏览器中正确显示并作为静态原型。）

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https:/
						/maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.2</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>thymeleaf</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <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>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

application.properties 文件

spring.jpa.hibernate.ddl-auto=update
spring.datasource.url=jdbc:mysql://localhost:3306/emp
spring.datasource.username=root
spring.datasource.password=root
spring.jpa.properties.hibrenate.dialect=org.hibernate.dialect.MySQLInnoDBDialect
logging.level.org.hibrenate.SQL=DEBUG
logging.level.org.hibrenate.type=TRACE

Employee pojo

这是一个简单的 pojo 类，用于存储 Employee 的数据。

package com.microservice.modal;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Employee {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;
    private String name;
    private String email;

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

Employee Service 接口和 EmployeeServiceImpl 类

package com.microservice.service;

import java.util.List;

import com.microservice.modal.Employee;

public interface EmployeeServices {

    List<Employee> getAllEmployee();

    void save(Employee employee);

    Employee getById(Long id);

    void deleteViaId(long id);
}

实现 EmployeeSerivce 接口方法的 EmployeeServiceImpl 类

package com.microservice.service;

import com.microservice.modal.Employee;
import com.microservice.repository.EmployeeRepository;
import java.util.List;
import java.util.Optional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class EmployeeServiceImpl
        implements EmployeeServices {

    @Autowired
    private EmployeeRepository empRepo;

    @Override
    public List<Employee> getAllEmployee() {
        return empRepo.findAll();
    }

    @Override
    public void save(Employee employee) {
        empRepo.save(employee);
    }

    @Override
    public Employee getById(Long id) {
        Optional<Employee> optional = empRepo.findById(id);
        Employee employee = null;
        if (optional.isPresent()) {
            employee = optional.get();
        } else {
            throw new RuntimeException(
                    "Employee not found for id : " + id);
        }
        return employee;
    }

    @Override
    public void deleteViaId(long id) {
        empRepo.deleteById(id);
    }
}

EmployeeRepository 接口

在这里，我们使用 JPA 进行通信并将对象保存到数据库中。

package com.microservice.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

import com.microservice.modal.Employee;

@Repository
public interface EmployeeRepository extends JpaRepository<Employee, Long> {

}

EmployeeController类

这是控制器类，它基本上控制数据的流动。它控制数据流入模型对象并在数据更改时更新视图。所以在这里我们用 Thymeleaf 映射我们的对象数据。

当用户在浏览器上键入 URL localhost:8080/时，请求转到viewHomePage()方法，在此方法中，我们获取员工列表并将其添加到带有键、值对的模式中并返回index.html页面。在 index.html 页面中，键(allemplist)被标识为 java 对象，Thymeleaf 遍历列表并根据用户提供的模板生成动态内容。
/addNew – 当用户点击添加员工按钮时，请求转到addNewEmployee()方法。在这个方法中，我们只需创建员工的空对象并将其发送回newemployee.html以便用户可以在这个空对象中填充数据，当用户点击保存按钮时，/save映射运行并获取对象员工并将该对象保存到数据库中。
/showFormForUpdate/{id} –此映射用于更新现有员工数据。
/deleteEmployee/{id} –此映射用于删除现有员工数据。

package com.microservice.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;

import com.microservice.modal.Employee;
import com.microservice.service.EmployeeServiceImpl;

@Controller
public class EmployeeController {

    @Autowired
    private EmployeeServiceImpl employeeServiceImpl;

    @GetMapping("/")
    public String viewHomePage(Model model) {
        model.addAttribute("allemplist", employeeServiceImpl.getAllEmployee());
        return "index";
    }

    @GetMapping("/addnew")
    public String addNewEmployee(Model model) {
        Employee employee = new Employee();
        model.addAttribute("employee", employee);
        return "newemployee";
    }

    @PostMapping("/save")
    public String saveEmployee(@ModelAttribute("employee") Employee employee) {
        employeeServiceImpl.save(employee);
        return "redirect:/";
    }

    @GetMapping("/showFormForUpdate/{id}")
    public String updateForm(@PathVariable(value = "id") long id, Model model) {
        Employee employee = employeeServiceImpl.getById(id);
        model.addAttribute("employee", employee);
        return "update";
    }

    @GetMapping("/deleteEmployee/{id}")
    public String deleteThroughId(@PathVariable(value = "id") long id) {
        employeeServiceImpl.deleteViaId(id);
        return "redirect:/";

    }
}

index.html

此页面用于显示员工列表。在这里，我们正在遍历控制器从viewHomePage()方法发送的allemplist 对象。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="ISO-8859-1">
        <title>Employee</title>
        <link rel="stylesheet"
              href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
              integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
              crossorigin="anonymous">
    </head>
    <body>
        <div class="container my-2" align="center">

            <h3>Employee List</h3>
            <a th:href="@{/addnew}" class="btn btn-primary btn-sm mb-3" >Add Employee</a>
            <table style="width:80%" border="1"
                   class = "table table-striped table-responsive-md">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="employee:${allemplist}">
                        <td th:text="${employee.name}"></td>
                        <td th:text="${employee.email}"></td>
                        <td> <a th:href="@{/showFormForUpdate/{id}(id=${employee.id})}"
                                class="btn btn-primary">Update</a>
                            <a th:href="@{/deleteEmployee/{id}(id=${employee.id})}"
                               class="btn btn-danger">Delete</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

newemployee.html

此页面用于在数据库中添加新员工。在这里，我们只需在空字段中提供值并单击提交按钮。然后员工的数据转到saveEmployee()方法并将数据保存到数据库中。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="ISO-8859-1">
        <title>Employee Management System</title>
        <link rel="stylesheet"
              href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
              integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
              crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <h1>Employee Management System</h1>
            <hr>
            <h2>Save Employee</h2>

            <form action="#" th:action="@{/save}" th:object="${employee}"
                  method="POST">
                <input type="text" th:field="*{name}" placeholder="Employee Name"
                       class="form-control mb-4 col-4"> <input type="text"
                       th:field="*{email}" placeholder="Employee Email"
                       class="form-control mb-4 col-4">

                <button type="submit" class="btn btn-info col-2">Save
                    Employee</button>
            </form>

            <hr>

            <a th:href="@{/}"> Back to Employee List</a>
        </div>
    </body>
</html>

update.html

此页面用于更新现有员工的数据。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="ISO-8859-1">
        <title>Employee Management System</title>

        <link rel="stylesheet"
              href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <h1>Employee Management System</h1>
            <hr>
            <h2>Update Employee</h2>

            <form action="#" th:action="@{/save}" th:object="${employee}"
                  method="POST">

                <!-- Add hidden form field to handle update -->
                <input type="hidden" th:field="*{id}" />

                <input type="text" th:field="*{Name}" class="form-control mb-4 col-4">

                <input type="text" th:field="*{email}" class="form-control mb-4 col-4">

                <button type="submit" class="btn btn-info col-2"> Update Employee</button>
            </form>

            <hr>

            <a th:href = "@{/}"> Back to Employee List</a>
        </div>
    </body>
</html>

输出：