SpringBoot+MyBatis+thymeleaf 实现弹出层更新详细代码
时间: 2023-07-02 08:13:17 浏览: 134
好的,以下是一个简单的示例代码,仅供参考:
1. 前端代码
```
<!-- 弹出层模板 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">更新信息</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="updateForm">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="number" class="form-control" id="age" name="age">
</div>
<input type="hidden" id="id" name="id">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="update()">更新</button>
</div>
</div>
</div>
</div>
<!-- 列表 -->
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 使用thymeleaf循环渲染数据 -->
<tr th:each="user : ${users}">
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
<td>
<button type="button" class="btn btn-primary" onclick="showUpdateModal([[${user.id}]], '[[${user.name}]]', [[${user.age}]]);">编辑</button>
</td>
</tr>
</tbody>
</table>
<!-- JavaScript代码 -->
<script>
// 显示弹出层,并将数据填充到表单中
function showUpdateModal(id, name, age) {
$('#id').val(id);
$('#name').val(name);
$('#age').val(age);
$('#updateModal').modal('show');
}
// 更新数据
function update() {
$.ajax({
type: 'POST',
url: '/update',
data: $('#updateForm').serialize(),
success: function(result) {
// 更新成功后刷新页面
location.reload();
},
error: function(xhr, status, error) {
// 处理错误
console.log(error);
}
});
}
</script>
```
2. 后端代码
```
// 实体类
public class User {
private Long id;
private String name;
private Integer age;
// getter和setter方法省略
}
// DAO接口
public interface UserMapper {
int update(User user);
}
// Service层
@Service
public class UserService {
@Autowired
private UserMapper userMapper;
public void update(User user) {
userMapper.update(user);
}
}
// Controller层
@Controller
public class UserController {
@Autowired
private UserService userService;
// 更新数据接口
@PostMapping("/update")
@ResponseBody
public String update(User user) {
userService.update(user);
return "success";
}
}
```
以上代码仅为示例,实际使用时需要根据具体业务需求进行修改和完善。同时,需要注意安全性和并发性等问题,例如添加CSRF防护和乐观锁等措施。
阅读全文