Spring Boot H2数据库jQuery AJAX CRUD 示例

向右看齐 2023-10-01 02:14 12阅读 0赞

### 介绍 ###

在本示例中，我将向您展示有关 Spring Boot jQuery AJAX CRUD 的示例。CRUD 是 Create、Read、Update 和 Delete 等四种操作的缩写。我将对公司详细信息执行 CRUD 操作。我将在这里使用H2数据库来存储公司详细信息。我将通过 AJAX 技术在客户端使用 jQuery 和在服务器端使用 Spring Data JPA 的 Spring Boot 异步执行每个操作。

我将在这里使用 Spring Boot 创建 REST API，并通过前端的 jQuery AJAX 调用这些 REST API。我将在这里创建服务器和客户端应用程序并将它们部署到单独的服务器中。

使用 Spring Boot 的服务器应用程序将部署到嵌入式 Tomcat 服务器和使用 jQuery 的客户端应用程序，HTML 将部署到 Apache http Web 服务器。您可以使用任何技术或 Web 服务器来部署客户端应用程序。

我将在 UI 或前端以表格格式或 HTML 表格显示公司信息。我将对一行执行内联编辑。在单击删除按钮时，将显示一个警告框，无论用户是否想要真正删除记录。我将在弹出窗口中添加新的公司详细信息。

### 先决条件 ###

Java 至少 8, Maven 3.6.3, Spring Boot 2.2.1 – 2.4.2, Spring Data JPA, jQuery 3.4.1 – 3.5.1

### 服务器应用程序——Spring Boot ###

我将创建服务器应用程序，然后是客户端应用程序。

#### 项目设置 ####

您可以在自己喜欢的 IDE 或工具中创建基于 gradle 或 maven 的项目。该项目的名称是 **spring-boot-ajax-crud**。

您需要在 **pom.xml** 脚本中包含所需的依赖项，以便使用 Spring Boot JPA 处理此应用程序。

<?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.3</version>
    		<relativePath /> 
    	</parent>
    	<groupId>com.spring.js</groupId>
    	<artifactId>Spring-Js-CRUD</artifactId>
    	<version>0.0.1-SNAPSHOT</version>
    	<name>Spring-Js-CRUD</name>
    	<description>spring boot and and bus experiment</description>
    	<properties>
    		<java.version>11</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-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>
    		<dependency>
    			<groupId>com.h2database</groupId>
    			<artifactId>h2</artifactId>
    			<scope>runtime</scope>
    		</dependency>
    	</dependencies>
    
    	<build>
    		<plugins>
    			<plugin>
    				<groupId>org.springframework.boot</groupId>
    				<artifactId>spring-boot-maven-plugin</artifactId>
    			</plugin>
    		</plugins>
    	</build>
    
    </project>

请注意在上面的构建脚本中我添加了 `jaxb-api`. Java 应用程序需要此 API。在 Java 8 版本之前，您不需要在构建脚本中显式添加此 API，因为此 API 在 Java 8 之前默认可用。在 Java 9 之后，您必须在构建脚本中添加它或手动构建文件以避免JAXB 相关异常。

#### 实体类 ####

JPA 实体类是一个 POJO（Plain Old Java Object）类，带有注解标记，`@Entity`具有表示数据库中对象的能力。

这里的实体类实现 `Serializable` 接口，以便将数据直接存储到数据库中。

假设我们有以下名为`Company`.

package com.roytuts.spring.boot.ajax.crud.entity;
    
    import javax.persistence.Column;
    import javax.persistence.Entity;
    import javax.persistence.GeneratedValue;
    import javax.persistence.GenerationType;
    import javax.persistence.Id;
    import javax.persistence.Table;
    
    @Entity
    @Table(name = "company")
    public class Company {
    
    	@Id
    	@Column(name = "id")
    	@GeneratedValue(strategy = GenerationType.IDENTITY)
    	private Integer id;
    
    	@Column(name = "name")
    	private String name;
    
    	public Company() {
    	}
    
    	public Company(Integer id, String name) {
    		this.id = id;
    		this.name = name;
    	}
    
    	//getters and setters
    
    }

#### Spring Data JPA 存储库 ####

Spring Data JPA API 为 Java Persistence API (JPA) 提供存储库支持，它简化了需要访问 JPA 数据源的应用程序的开发。

Spring Data JPA 是对 JPA 的抽象，JPA 是对 JDBC 的抽象。使用 Spring Data JPA Repository API 有很多优点：

*  Spring Data JPA 提供了开箱即用的查找方法。因此，基于命名约定 `findByXyyy()` 将由 Spring Data JPA 动态提供，并将产生一个实体结果，其中所有实体的字段都将具有相应的参数值。
 *  搜索屏幕所需的其他有用功能，例如分页、排序、Criteria API。

我将创建存储库接口，您不需要在此接口中创建任何方法，因为 Spring 提供了执行基本 CRUD 操作的方法。

package com.roytuts.spring.boot.ajax.crud.repository;
    
    import org.springframework.data.jpa.repository.JpaRepository;
    
    import com.roytuts.spring.boot.ajax.crud.entity.Company;
    
    public interface CrudRepository extends JpaRepository<Company, Integer> {
    
    }

#### 服务类 ####

服务类位于控制器和 DAO 层之间，并相应地发送响应。通常，您在此服务层中执行业务逻辑。

您从存储库获取连接查询的结果并传递给 REST 控制器类。

我使用相同的方法分别保存或更新新的或现有的公司信息。

package com.roytuts.spring.boot.ajax.crud.service;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import com.roytuts.spring.boot.ajax.crud.entity.Company;
    import com.roytuts.spring.boot.ajax.crud.repository.CrudRepository;
    
    @Service
    public class CrudService {
    
    	@Autowired
    	private CrudRepository crudRepository;
    
    	public List<Company> getCompanyList() {
    		return crudRepository.findAll();
    	}
    
    	public Company getCompanyById(Integer id) {
    		return crudRepository.findById(id).get();
    	}
    
    	public void saveOrUpdateCompany(Company company) {
    		crudRepository.save(company);
    	}
    	
    	public void deleteCompany(Integer id) {
    		crudRepository.deleteById(id);
    	}
    
    }

#### REST 控制器类 ####

Spring 提供了出色的 API 来轻松构建 REST 资源。我将类标记为， `@RestController` 并为带有端点的 http 方法使用适当的注释标记方法。

此控制器层类处理来自/到客户端或最终用户的传入请求和传出响应。

我在不同的端点上执行 CRUD 操作。我使用相同的端点来创建新的公司信息或更新现有的公司信息。

package com.roytuts.spring.boot.ajax.crud.rest.controller;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.http.HttpStatus;
    import org.springframework.http.ResponseEntity;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.DeleteMapping;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RestController;
    
    import com.roytuts.spring.boot.ajax.crud.entity.Company;
    import com.roytuts.spring.boot.ajax.crud.service.CrudService;
    
    @RestController
    @CrossOrigin(origins = "*")
    public class CrudRestController {
    
    	@Autowired
    	private CrudService crudService;
    
    	@GetMapping("/companyList")
    	public ResponseEntity<List<Company>> getCompanyList() {
    		return new ResponseEntity<List<Company>>(crudService.getCompanyList(), HttpStatus.OK);
    	}
    
    	@GetMapping("/company/{id}")
    	public ResponseEntity<Company> getCompany(@PathVariable Integer id) {
    		return new ResponseEntity<Company>(crudService.getCompanyById(id), HttpStatus.OK);
    	}
    
    	@PostMapping("/company/save")
    	public ResponseEntity<Void> saveOrUpdateCompany(@RequestBody Company company) {
    		crudService.saveOrUpdateCompany(company);
    		return new ResponseEntity<Void>(HttpStatus.OK);
    	}
    
    	@DeleteMapping("/company/delete/{id}")
    	public ResponseEntity<Void> deleteCompany(@PathVariable Integer id) {
    		crudService.deleteCompany(id);
    		return new ResponseEntity<Void>(HttpStatus.OK);
    	}
    
    }

### 主类 ###

Spring Boot 应用程序的美妙之处在于创建一个主类并标记 `@SpringBootApplication` 并执行该主类将您的应用程序部署到嵌入式 Tomcat 服务器中。

package com.roytuts.spring.boot.ajax.crud;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication(scanBasePackages = "com.roytuts.spring.boot.ajax.crud")
    public class SpringBootAjaxCrudApp {
    
    	public static void main(String[] args) {
    		SpringApplication.run(SpringBootAjaxCrudApp.class, args);
    	}
    
    }

### 应用程序配置 ###

我在这里使用 MySQL 数据库服务器来存储记录。因此，我需要连接到 MySQL 数据库以从表中查询数据。

因此，使用以下内容创建 application.properties 文件。不要忘记根据您的更新数据库配置值。

spring.jpa.hibernate.ddl-auto=update

我完成了服务器应用程序的编码。如果您愿意，您可以使用任何 REST 客户端（如 Postman）并测试功能。但正如我在开始时所说的，我将从客户端应用程序调用 REST 服务，所以我现在将创建客户端应用程序。

### 客户端应用程序 ###

为了部署客户端应用程序，我在这里使用了 Apache http 服务器。我将使用 jQuery 和 AJAX 技术来调用 REST API。

我假设您具有运行 Apache Web 服务器所需的配置。

#### 项目目录 ####

第一件事是在您机器的任何位置或HTTP Apache 服务器的**htdocs**文件夹下创建一个项目根目录（如果您可以使用 HTTP Apache 服务器运行此客户端应用程序）。项目根目录的名称是**ajax-crud-client**。

#### 查看文件 ####

下一步是创建视图文件，该文件将具有在 UI（用户界面）上显示和执行公司数据操作所需的所有配置。这个应用程序使用 jQuery 版本 3.4.1 到 3.5.1 进行了测试。

<!doctype html>
    <html>
    <head>
    	<title>Spring Boot AJAX jQuery CRUD</title>
    	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    	
    	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    	
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
    	<style>
    		.modal p { margin: 1em 0; }
    		
    		.add_form.modal {
    		  border-radius: 0;
    		  line-height: 18px;
    		  padding: 0;
    		  font-family: "Lucida Grande", Verdana, sans-serif;
    		}
    
    		.add_form.modal p { padding: 20px 30px; border-bottom: 1px solid #ddd; margin: 0;
    		  background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #eee),color-stop(1, #fff));
    		  overflow: hidden;
    		}
    		.add_form.modal p:last-child { border: none; }
    		.add_form.modal p label { float: left; font-weight: bold; color: #333; font-size: 13px; width: 110px; line-height: 22px; }
    		.add_form.modal p input[type="text"],
    		.add_form.modal p input[type="submit"]		{
    		  font: normal 12px/18px "Lucida Grande", Verdana;
    		  padding: 3px;
    		  border: 1px solid #ddd;
    		  width: 200px;
    		}
    		
    		#msg {
    		  margin: 10px;
    		  padding: 30px;
    		  color: #fff;
    		  font-size: 18px;
    		  font-weight: bold;
    		  background: -moz-linear-gradient(top, #2e5764, #1e3d47);
    		  background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1e3d47),color-stop(1, #2e5764));
    		}
    	</style>
    	<script type="text/javascript">
    		$(document).ready(function() {
    			$.getJSON('http://localhost:8080/companyList', function(json) {
    				var tr=[];
    				for (var i = 0; i < json.length; i++) {
    					tr.push('<tr>');
    					tr.push('<td>' + json[i].id + '</td>');
    					tr.push('<td>' + json[i].name + '</td>');
    					tr.push('<td><button class=\'edit\'>Edit</button>  <button class=\'delete\' id=' + json[i].id + '>Delete</button></td>');
    					tr.push('</tr>');
    				}
    				$('table').append($(tr.join('')));
    			});
    			
    			$(document).delegate('#addNew', 'click', function(event) {
    				event.preventDefault();
    				
    				var name = $('#name').val();
    				
    				$.ajax({
    					type: "POST",
    					contentType: "application/json; charset=utf-8",
    					url: "http://localhost:8080/company/save",
    					data: JSON.stringify({'name': name}),
    					cache: false,
    					success: function(result) {
    						$("#msg").html( "<span style='color: green'>Company added successfully</span>" );
    						window.setTimeout(function(){location.reload()},1000)
    					},
    					error: function(err) {
    						$("#msg").html( "<span style='color: red'>Name is required</span>" );
    					}
    				});
    			});
    			
    			$(document).delegate('.delete', 'click', function() { 
    				if (confirm('Do you really want to delete record?')) {
    					var id = $(this).attr('id');
    					var parent = $(this).parent().parent();
    					$.ajax({
    						type: "DELETE",
    						url: "http://localhost:8080/company/delete/" + id,
    						cache: false,
    						success: function() {
    							parent.fadeOut('slow', function() {
    								$(this).remove();
    							});
    							location.reload(true)
    						},
    						error: function() {
    							$('#err').html('<span style=\'color:red; font-weight: bold; font-size: 30px;\'>Error deleting record').fadeIn().fadeOut(4000, function() {
    								$(this).remove();
    							});
    						}
    					});
    				}
    			});
    			
    			$(document).delegate('.edit', 'click', function() {
    				var parent = $(this).parent().parent();
    				
    				var id = parent.children("td:nth-child(1)");
    				var name = parent.children("td:nth-child(2)");
    				var buttons = parent.children("td:nth-child(3)");
    				
    				name.html("<input type='text' id='txtName' value='" + name.html() + "'/>");
    				buttons.html("<button id='save'>Save</button>  <button class='delete' id='" + id.html() + "'>Delete</button>");
    			});
    			
    			$(document).delegate('#save', 'click', function() {
    				var parent = $(this).parent().parent();
    				
    				var id = parent.children("td:nth-child(1)");
    				var name = parent.children("td:nth-child(2)");
    				var buttons = parent.children("td:nth-child(3)");
    				
    				$.ajax({
    					type: "POST",
    					contentType: "application/json; charset=utf-8",
    					url: "http://localhost:8080/company/save",
    					data: JSON.stringify({'id' : id.html(), 'name' : name.children("input[type=text]").val()}),
    					cache: false,
    					success: function() {
    						name.html(name.children("input[type=text]").val());
    						buttons.html("<button class='edit' id='" + id.html() + "'>Edit</button>  <button class='delete' id='" + id.html() + "'>Delete</button>");
    					},
    					error: function() {
    						$('#err').html('<span style=\'color:red; font-weight: bold; font-size: 30px;\'>Error updating record').fadeIn().fadeOut(4000, function() {
    							$(this).remove();
    						});
    					}
    				});
    			});
    
    		});
    	</script>
    </head>
    <body>
    
    	<h2>Spring Boot AJAX jQuery CRUD</h2>
    	
    	<p><a class='btn' href="#add" rel="modal:open">Add New Company</a></p>
    
    	<table border="1" cellspacing="0" cellpadding="5">
    		<tr>
    			<th>Id</th>
    			<th>Name</th>
    			<th>Actions</th>
    		</tr>
    	</table>
    	
    	<form id="add" action="#" class="add_form modal" style="display:none;">
    		<div id='msg'/>
    		<h3>Add a New Company</h3>
    		<p>
    			<label>Name</label>
    			<input type="text" id="name" name="name">
    		</p>
    		<p>
    			<input type="submit" id="addNew" value="Submit">
    		</p>
    	</form>
    
    </body>
    </html>

在上面的文件中，我包含了来自 CDN 的所需 jQuery 库。

接下来，我为模态窗口包含了库和 css。然后我在模态窗口上应用一些基本样式。

下一节包含用于执行 CRUD 操作的 jQuery AJAX 编程。我在删除或添加记录后重新加载窗口，因为 AJAX 技术默认是异步的，您在页面上的更改不会反映。

### 测试应用程序 ###

现在执行主类会将您的应用程序部署到 Tomcat 服务器中。

现在运行您的 Apache Web 服务器，您的应用程序将自动部署，因为它位于**htdocs**文件夹中。

现在点击主页 URL **http://localhost/ajax-crud-client/ajax\_crud.html**会给你以下屏幕。因为我最初存储了一些数据，所以它会在主页上显示这些数据。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

现在您可以使用此页面上的相应按钮和链接执行编辑、删除和添加新公司。

### 源代码 ###

[下载][Link 1]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/8ce61b9eab4243e8a82da086f3fb97af.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 1]: https://github.com/roytuts/spring-ajax/tree/master/spring-boot-ajax-crud-example