原文： https://howtodoinjava.com/spring-boot2/crud-application-thymeleaf/

通过基于 Thymeleaf 和 spring mvc 支持的基于表单的 UI，学习构建支持 CRUD 操作的 Spring Boot Web 应用程序。

1. 概述

在本教程中，我们正在创建具有两个视图的 Web 应用程序：

  • 列出所有员工视图 – 以表格形式在 UI 中从数据库显示所有员工。 此外，还有指向“更新”或“删除”任何员工的链接。 该界面还具有一个单独的选项，可以导航到“创建”员工界面。
    Spring Boot – CRUD 应用程序 - 图1
    列出所有员工的界面

  • 创建/更新员工视图 – 此界面用于添加新员工或编辑现有员工的详细信息。
    Spring Boot – CRUD 应用程序 - 图2
    添加员工的界面

此示例中有两个主要组件需要重点关注-MVC 控制器和 UI 视图。

2. Spring MVC 控制器

控制器类具有 URL 映射及其处理器方法。 所有 CRUD 操作都有处理器方法，包括 POST 操作，以处理表单提交以创建/更新员工的过程。

注意给定的处理器方法如何将模型数据绑定到视图； 并且它们以字符串格式返回视图名称，该视图名称由 HTML 文件中的视图解析器解析。

EmployeeMvcController.java

  1. import java.util.List;
  2. import java.util.Optional;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.ui.Model;
  7. import org.springframework.web.bind.annotation.PathVariable;
  8. import org.springframework.web.bind.annotation.RequestMapping;
  9. import org.springframework.web.bind.annotation.RequestMethod;
  11. import com.howtodoinjava.demo.entity.EmployeeEntity;
  12. import com.howtodoinjava.demo.exception.RecordNotFoundException;
  13. import com.howtodoinjava.demo.service.EmployeeService;
  15. @Controller
  16. @RequestMapping("/")
  17. public class EmployeeMvcController 
  18. {
  19.     @Autowired
  20.     EmployeeService service;
  22.     @RequestMapping
  23.     public String getAllEmployees(Model model) 
  24.     {
  25.         List<EmployeeEntity> list = service.getAllEmployees();
  27.         model.addAttribute("employees", list);
  28.         return "list-employees";
  29.     }
  31.     @RequestMapping(path = {"/edit", "/edit/{id}"})
  32.     public String editEmployeeById(Model model, @PathVariable("id") Optional<Long> id) 
  33.                             throws RecordNotFoundException 
  34.     {
  35.         if (id.isPresent()) {
  36.             EmployeeEntity entity = service.getEmployeeById(id.get());
  37.             model.addAttribute("employee", entity);
  38.         } else {
  39.             model.addAttribute("employee", new EmployeeEntity());
  40.         }
  41.         return "add-edit-employee";
  42.     }
  44.     @RequestMapping(path = "/delete/{id}")
  45.     public String deleteEmployeeById(Model model, @PathVariable("id") Long id) 
  46.                             throws RecordNotFoundException 
  47.     {
  48.         service.deleteEmployeeById(id);
  49.         return "redirect:/";
  50.     }
  52.     @RequestMapping(path = "/createEmployee", method = RequestMethod.POST)
  53.     public String createOrUpdateEmployee(EmployeeEntity employee) 
  54.     {
  55.         service.createOrUpdateEmployee(employee);
  56.         return "redirect:/";
  57.     }
  58. }
  • getAllEmployees() – 返回所有员工的列表，并映射到路径/。 这是应用程序的默认视图。
  • editEmployeeById() – 用于添加新员工或编辑现有员工。 两种操作都使用相同的 HTML 视图。 如果上下文中有一个员工 ID，则将对该员工进行编辑-否则将创建一个新员工。
  • deleteEmployeeById() – 通过 ID 删除员工的简单 URL 请求。
  • createOrUpdateEmployee() – 此方法处理用于创建新雇员或更新雇员的 HTTP POST 请求。 创建或更新操作取决于模型中是否存在员工 ID。

3. Thymeleaf 模板

如前所述，我们在此示例中使用两个视图。

list-employees.html

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="x-ua-compatible" content="ie=edge">
  7.     <title>All Employees</title>
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  10.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
  11. </head>
  13. <body>
  14.     <div class="container my-2">
  15.     <div class="card">
  16.     <div class="card-body">
  17.         <div th:switch="${employees}" class="container my-5">
  18.             <p class="my-5">
  19.                 <a href="/edit" class="btn btn-primary">
  20.                 <i class="fas fa-user-plus ml-2"> Add Employee </i></a>
  21.             </p>
  22.             <div class="col-md-10">
  23.                 <h2 th:case="null">No record found !!</h2>
  24.                 <div th:case="*">
  25.                     <table class="table table-striped table-responsive-md">
  26.                         <thead>
  27.                             <tr>
  28.                                 <th>First Name</th>
  29.                                 <th>Last Name</th>
  30.                                 <th>Email</th>
  31.                                 <th>Edit</th>
  32.                                 <th>Delete</th>
  33.                             </tr>
  34.                         </thead>
  35.                         <tbody>
  36.                             <tr th:each="employee : ${employees}">
  37.                                 <td th:text="${employee.firstName}"></td>
  38.                                 <td th:text="${employee.lastName}"></td>
  39.                                 <td th:text="${employee.email}"></td>
  40.                                 <td>
  41.                                     <a th:href="@{/edit/{id}(id=${employee.id})}" 
  42.                                              class="btn btn-primary">
  43.                                         <i class="fas fa-user-edit ml-2"></i>
  44.                                     </a>
  45.                                 </td>
  46.                                 <td>
  47.                                     <a th:href="@{/delete/{id}(id=${employee.id})}" 
  48.                                               class="btn btn-primary">
  49.                                         <i class="fas fa-user-times ml-2"></i>
  50.                                     </a>
  51.                                 </td>
  52.                             </tr>
  53.                         </tbody>
  54.                     </table>
  55.                 </div>
  57.             </div>
  58.         </div>
  59.     </div>
  60.     </div>
  61.     </div>
  62. </body>
  64. </html>

add-edit-employee.html

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="x-ua-compatible" content="ie=edge">
  7.     <title>Add Employee</title>
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">
  9.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  10.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
  11. </head>
  13. <body>
  14.     <div class="container my-5">
  15.         <h3> Add Employee</h3>
  16.         <div class="card">
  17.             <div class="card-body">
  18.                 <div class="col-md-10">
  19.                     <form action="#" th:action="@{/createEmployee}" th:object="${employee}" 
  20.                                                                        method="post">
  21.                         <div class="row">
  22.                             <div class="form-group col-md-8">
  23.                                 <label for="name" class="col-form-label">First Name</label> 
  24.                                 <input type="text" th:field="*{firstName}" class="form-control" 
  25.                                             id="firstName" placeholder="First Name" />
  26.                             </div>
  27.                             <div class="form-group col-md-8">
  28.                                 <label for="name" class="col-form-label">Last Name</label> 
  29.                                 <input type="text" th:field="*{lastName}" class="form-control" 
  30.                                             id="lastName" placeholder="Last Name" />
  31.                             </div>
  32.                             <div class="form-group col-md-8">
  33.                                 <label for="email" class="col-form-label">Email</label> 
  34.                                 <input type="text" th:field="*{email}" class="form-control" 
  35.                                             id="email" placeholder="Email Id" />
  36.                             </div>
  38.                             <div class="col-md-6">
  39.                                 <input type="submit" class="btn btn-primary" value=" Submit ">
  40.                             </div>
  42.                             <input type="hidden" id="id" th:field="*{id}">
  44.                         </div>
  45.                     </form>
  46.                 </div>
  47.             </div>
  48.         </div>
  49.     </div>
  50. </body>
  52. </html>

4. 实体和存储库

我们已经将EmployeeEntity类作为模型绑定到 UI。

EmployeeEntity.java

  1. import javax.persistence.Column;
  2. import javax.persistence.Entity;
  3. import javax.persistence.GeneratedValue;
  4. import javax.persistence.Id;
  5. import javax.persistence.Table;
  7. @Entity
  8. @Table(name="TBL_EMPLOYEES")
  9. public class EmployeeEntity {
  11.     @Id
  12.     @GeneratedValue(strategy = GenerationType.IDENTITY)
  13.     private Long id;
  15.     @Column(name="first_name")
  16.     private String firstName;
  18.     @Column(name="last_name")
  19.     private String lastName;
  21.     @Column(name="email", nullable=false, length=200)
  22.     private String email;
  24.     //Setters and getters
  26.     @Override
  27.     public String toString() {
  28.         return "EmployeeEntity [id=" + id + ", firstName=" + firstName + 
  29.                 ", lastName=" + lastName + ", email=" + email   + "]";
  30.     }
  31. }

为了将数据持久存储在数据库中，我们使用 H2（内存中）数据库，并使用 Spring 数据的CrudRepository接口。 它为简单的 CRUD 操作提供了开箱即用的内置方法。

EmployeeRepository.java

  1. import org.springframework.data.repository.CrudRepository;
  2. import org.springframework.stereotype.Repository;
  4. import com.howtodoinjava.demo.entity.EmployeeEntity;
  6. @Repository
  7. public interface EmployeeRepository 
  8.             extends CrudRepository<EmployeeEntity, Long> {
  10. }

请注意，使用两个 SQL 文件初始化了存储库，这两个 SQL 文件创建数据库表并向其中填充默认数据。

schema.sql

  1. DROP TABLE IF EXISTS TBL_EMPLOYEES;
  3. CREATE TABLE TBL_EMPLOYEES (
  4.   id INT AUTO_INCREMENT  PRIMARY KEY,
  5.   first_name VARCHAR(250) NOT NULL,
  6.   last_name VARCHAR(250) NOT NULL,
  7.   email VARCHAR(250) DEFAULT NULL
  8. );

data.sql

  1. INSERT INTO 
  2.     TBL_EMPLOYEES (first_name, last_name, email) 
  3. VALUES
  4.       ('Lokesh', 'Gupta', 'howtodoinjava@gmail.com'),
  5.       ('John', 'Doe', 'xyz@email.com');

5. 服务类

另一个重要的类是EmployeeService类，控制器通过该类与存储库进行交互。 它包含要执行的其他业务逻辑。

EmployeeService.java

  1. import java.util.ArrayList;
  2. import java.util.List;
  3. import java.util.Optional;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Service;
  8. import com.howtodoinjava.demo.entity.EmployeeEntity;
  9. import com.howtodoinjava.demo.exception.RecordNotFoundException;
  10. import com.howtodoinjava.demo.repository.EmployeeRepository;
  12. @Service
  13. public class EmployeeService {
  15.     @Autowired
  16.     EmployeeRepository repository;
  18.     public List<EmployeeEntity> getAllEmployees()
  19.     {
  20.         List<EmployeeEntity> result = (List<EmployeeEntity>) repository.findAll();
  22.         if(result.size() > 0) {
  23.             return result;
  24.         } else {
  25.             return new ArrayList<EmployeeEntity>();
  26.         }
  27.     }
  29.     public EmployeeEntity getEmployeeById(Long id) throws RecordNotFoundException 
  30.     {
  31.         Optional<EmployeeEntity> employee = repository.findById(id);
  33.         if(employee.isPresent()) {
  34.             return employee.get();
  35.         } else {
  36.             throw new RecordNotFoundException("No employee record exist for given id");
  37.         }
  38.     }
  40.     public EmployeeEntity createOrUpdateEmployee(EmployeeEntity entity) 
  41.     {
  42.         if(entity.getId()  == null) 
  43.         {
  44.             entity = repository.save(entity);
  46.             return entity;
  47.         } 
  48.         else 
  49.         {
  50.             Optional<EmployeeEntity> employee = repository.findById(entity.getId());
  52.             if(employee.isPresent()) 
  53.             {
  54.                 EmployeeEntity newEntity = employee.get();
  55.                 newEntity.setEmail(entity.getEmail());
  56.                 newEntity.setFirstName(entity.getFirstName());
  57.                 newEntity.setLastName(entity.getLastName());
  59.                 newEntity = repository.save(newEntity);
  61.                 return newEntity;
  62.             } else {
  63.                 entity = repository.save(entity);
  65.                 return entity;
  66.             }
  67.         }
  68.     } 
  70.     public void deleteEmployeeById(Long id) throws RecordNotFoundException 
  71.     {
  72.         Optional<EmployeeEntity> employee = repository.findById(id);
  74.         if(employee.isPresent()) 
  75.         {
  76.             repository.deleteById(id);
  77.         } else {
  78.             throw new RecordNotFoundException("No employee record exist for given id");
  79.         }
  80.     } 
  81. }

6. 添加 Spring Boot 和 Thymeleaf Maven 依赖项

在 spring boot 项目中，我们只需要添加spring-boot-starter-thymeleaf依赖项，并使用默认配置为项目本身自动配置 thymeleaf。 它从/src/main/resources/templates文件夹中读取 HTML 模板。

pom.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0"
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  5.     <modelVersion>4.0.0</modelVersion>
  6.     <parent>
  7.         <groupId>org.springframework.boot</groupId>
  8.         <artifactId>spring-boot-starter-parent</artifactId>
  9.         <version>2.1.5.RELEASE</version>
  10.         <relativePath /> <!-- lookup parent from repository -->
  11.     </parent>
  12.     <groupId>com.howtodoinjava</groupId>
  13.     <artifactId>demo</artifactId>
  14.     <version>0.0.1-SNAPSHOT</version>
  15.     <name>demo</name>
  16.     <description>Demo project for Spring Boot</description>
  18.     <properties>
  19.         <java.version>1.8</java.version>
  20.     </properties>
  22.     <dependencies>
  23.         <dependency>
  24.             <groupId>org.springframework.boot</groupId>
  25.             <artifactId>spring-boot-starter-web</artifactId>
  26.         </dependency>
  27.         <dependency>
  28.             <groupId>org.springframework.boot</groupId>
  29.             <artifactId>spring-boot-starter-data-jpa</artifactId>
  30.         </dependency>
  31.         <dependency>
  32.             <groupId>org.springframework.boot</groupId>
  33.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
  34.         </dependency>
  35.         <dependency>
  36.             <groupId>com.h2database</groupId>
  37.             <artifactId>h2</artifactId>
  38.             <scope>runtime</scope>
  39.         </dependency>
  40.         <dependency>
  41.             <groupId>org.springframework.boot</groupId>
  42.             <artifactId>spring-boot-starter-test</artifactId>
  43.             <scope>test</scope>
  44.         </dependency>
  45.     </dependencies>
  46. </project>

7. Spring Boot thymeleaf Crud 教程演示

以 Spring Boot 应用程序的形式启动此应用程序，该应用程序将在嵌入式 tomcat 服务器中启动 Web 应用程序。

点击网址：http://localhost:8080/

验证是否使用data.sql文件中的两个默认员工详细信息渲染了屏幕。

玩应用程序。 创建几个新员工，编辑现有员工。 删除一些员工。

如果在上述 spring boot mvc 示例中遇到任何错误，请告诉我。

下载源码

学习愉快！