好的，下面是对应的代码：
TbUser Entity类：
```java
@Entity
@Table(name = "tb_user")
public class TbUser {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "user_id")
private Integer userId;
@Column(name = "user_name")
private String userName;
@Column(name = "user_password")
private String userPassword;
// 省略getter和setter方法
}
```
TbUserRepository接口：
```java
@Repository
public interface TbUserRepository extends JpaRepository<TbUser, Integer> {
}
```
TbUserService接口：
```java
public interface TbUserService {
Page<TbUser> findUsers(int pageNum);
TbUser updateUser(TbUser user);
}
```
TbUserServiceImpl类：
```java
@Service
public class TbUserServiceImpl implements TbUserService {
@Autowired
private TbUserRepository userRepository;
@Override
public Page<TbUser> findUsers(int pageNum) {
Pageable pageable = PageRequest.of(pageNum - 1, 10);
return userRepository.findAll(pageable);
}
@Override
public TbUser updateUser(TbUser user) {
return userRepository.save(user);
}
}
```
UserController类：
```java
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private TbUserService userService;
@GetMapping("/
alterListUsers")
public String
alterListUsers(@RequestParam(defaultValue = "1") int pageNum, Model model) {
Page<TbUser> page = userService.findUsers(pageNum);
List<TbUser> userList = page.getContent();
model.addAttribute("userList", userList);
model.addAttribute("currentPage", pageNum);
model.addAttribute("totalPages", page.getTotalPages());
return "management/user-
alter";
}
@PostMapping("/updateUser")
@ResponseBody
public TbUser updateUser(@RequestBody TbUser user) {
return userService.updateUser(user);
}
}
```
user-
alter.html页面：
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>User
Alter</title>
</head>
<body>
<div th:each="user : ${userList}">
<div>
<span th:text="${user.userId}"></span>
<span th:text="${user.userName}"></span>
<span th:text="${user.userPassword}"></span>
<button onclick="editUser(this)" th:data-userId="${user.userId}"
th:data-userName="${user.userName}" th:data-userPassword="${user.userPassword}">Edit
</button>
</div>
</div>
<!-- 弹窗表单 -->
<div id="editUserDialog" style="display: none">
<form id="editUserForm">
<input type="hidden" name="userId" id="editUserId">
User Name: <input type="text" name="userName" id="editUserName"><br>
Password: <input type="password" name="userPassword" id="editUserPassword"><br>
<button type="submit">Submit</button>
</form>
</div>
<!-- 引入jQuery和Ajax -->
<
script th:src="@{/webjars/jquery/jquery.min.js}"></
script>
<
script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></
script>
<
script>
function editUser(button) {
var userId = $(button).data("userid");
var userName = $(button).data("username");
var userPassword = $(button).data("userpassword");
$("#editUserId").val(userId);
$("#editUserName").val(userName);
$("#editUserPassword").val(userPassword);
// 弹出表单
$("#editUserDialog").dialog({
modal: true,
width: 400,
buttons: {
"Submit": function () {
var userId = $("#editUserId").val();
var userName = $("#editUserName").val();
var userPassword = $("#editUserPassword").val();
// 发送Ajax请求保存用户信息
$.ajax({
url: "/user/updateUser",
type: "POST",
contentType: "application/json",
data: JSON.stringify({
userId: userId,
userName: userName,
userPassword: userPassword
}),
success: function (data) {
// 更新页面信息
$(button).data("username", userName);
$(button).data("userpassword", userPassword);
$(button).siblings("span").eq(1).text(userName);
$(button).siblings("span").eq(2).text(userPassword);
alert("Update user successfully!");
$("#editUserDialog").dialog("close");
},
error: function () {
alert("Update user failed!");
}
});
},
"Cancel": function () {
$("#editUserDialog").dialog("close");
}
}
});
}
</
script>
</body>
</html>
```
注：需要在pom.xml文件中添加以下依赖：
```xml
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.6.0</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.0.2</version>
</dependency>
```
905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
