给我写个springboot ajax可以实现增删改查的项目
时间: 2023-12-15 10:06:51 浏览: 170
好的,以下是一个简单的Spring Boot + Ajax实现增删改查的示例项目:
1. 创建一个Spring Boot项目,添加以下依赖:
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
```
2. 创建一个实体类和一个JPA Repository:
```java
@Entity
public class User {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;
private String name;
private String email;
// getters and setters
}
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}
```
3. 创建一个Controller类,定义增删改查的接口:
```java
@RestController
@RequestMapping("/users")
public class UserController {
@Autowired
private UserRepository userRepository;
@GetMapping
public List<User> getUsers() {
return userRepository.findAll();
}
@PostMapping
public User addUser(@RequestBody User user) {
return userRepository.save(user);
}
@PutMapping("/{id}")
public User updateUser(@PathVariable Long id, @RequestBody User user) {
User existingUser = userRepository.findById(id).orElse(null);
if (existingUser != null) {
existingUser.setName(user.getName());
existingUser.setEmail(user.getEmail());
return userRepository.save(existingUser);
} else {
return null;
}
}
@DeleteMapping("/{id}")
public void deleteUser(@PathVariable Long id) {
userRepository.deleteById(id);
}
}
```
4. 创建一个HTML页面,使用Ajax调用接口实现增删改查:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>User Management</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id="id"></td>
<td><input type="text" id="name"></td>
<td><input type="text" id="email"></td>
<td><button onclick="addUser()">Add</button></td>
</tr>
<tr>
<td colspan="4"><hr></td>
</tr>
<tr id="users">
</tr>
</tbody>
</table>
<script>
function getUsers() {
$.ajax({
url: "/users",
type: "GET",
success: function(users) {
$("#users").empty();
users.forEach(function(user) {
$("#users").append("<td>" + user.id + "</td>");
$("#users").append("<td>" + user.name + "</td>");
$("#users").append("<td>" + user.email + "</td>");
$("#users").append("<td><button onclick='updateUser(" + user.id + ")'>Update</button> <button onclick='deleteUser(" + user.id + ")'>Delete</button></td>");
$("#users").append("</tr><tr>");
});
}
});
}
function addUser() {
var user = {
name: $("#name").val(),
email: $("#email").val()
};
$.ajax({
url: "/users",
type: "POST",
data: JSON.stringify(user),
contentType: "application/json",
success: function() {
getUsers();
}
});
}
function updateUser(id) {
var user = {
name: $("#name").val(),
email: $("#email").val()
};
$.ajax({
url: "/users/" + id,
type: "PUT",
data: JSON.stringify(user),
contentType: "application/json",
success: function() {
getUsers();
}
});
}
function deleteUser(id) {
$.ajax({
url: "/users/" + id,
type: "DELETE",
success: function() {
getUsers();
}
});
}
getUsers();
</script>
</body>
</html>
```
以上就是一个简单的Spring Boot + Ajax实现增删改查的示例项目,希望能帮到你。
阅读全文