SpringBoot——web开发之增删改

95 阅读 0 评论 63 点赞

我是靠谱客的博主从容小松鼠，这篇文章主要介绍SpringBoot——web开发之增删改，现在分享给大家，希望可以做个参考。

1、增

进入页面请求：

复制代码

1
<a class="btn btn-sm btn-success" href="/emp" th:href="@{emp}">员工添加</a>

处理方法：

复制代码

1
2
3
4
5
6
@GetMapping("/emp")
public String toAddPage(Model model){
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
return "emp/add";
}

页面展示：

复制代码

1
2
3
<select class="form-control" name="department.id">
<option th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option>
</select>

表单：属性名要和后台的对象的属性名一致(不需要加对象名)，若有级联使用.

复制代码

<form th:action="@{/emp}" method="post">
<div class="form-group">
<label>LastName</label>
<input name="lastName" type="text" class="form-control" placeholder="zhangsan">
</div>
<div class="form-group">
<label>Email</label>
<input name="email" type="email" class="form-control" placeholder="zhangsan@atguigu.com">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="1">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<option th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input name="birth" type="text" class="form-control" placeholder="yyyy/MM/dd">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<form th:action="@{/emp}" method="post">
<div class="form-group">
<label>LastName</label>
<input name="lastName" type="text" class="form-control" placeholder="zhangsan">
</div>
<div class="form-group">
<label>Email</label>
<input name="email" type="email" class="form-control" placeholder="zhangsan@atguigu.com">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="1">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<option th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input name="birth" type="text" class="form-control" placeholder="yyyy/MM/dd">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>

处理方法：

复制代码

1
2
3
4
5
6
@PostMapping("/emp")
public String addEmp(Employee employee){
employeeDao.save(employee);
//保存完之后重定向至列表页
return "redirect:/emps";
}

这里需要注意的是在向后台提交日期数据的时候(比如此处的生日)，可能会由于日期格式的问题导致报400的错误，这是因为SpringBoot中默认的日期的格式是yyyy/MM/dd，若页面以其他格式提交日期数据，就会报错，可以在主配置文件中配置日期的格式：此时只能以yyyy-MM-dd的格式提交日期数据

复制代码

1
spring.mvc.date-format=yyyy-MM-dd

2、改

进入修改页面请求：使用+将两个不同表达式的值拼接，表达式不能套用，比如写为@{/emp/${emp.id}}

复制代码

1
<a class="btn btn-sm btn-primary" th:href="@{/emp/} + ${emp.id}">编辑</a>

处理去修改页面请求：@PathVariable从请求路径中获取参数

复制代码

1
2
3
4
5
6
7
8
@GetMapping("/emp/{id}")
public String toEditPage(@PathVariable("id") Integer id,Model model){
Employee employee = employeeDao.get(id);
model.addAttribute("emp",employee);
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
return "emp/add";
}

表单：

复制代码

<form th:action="@{/emp}" method="post">
<input type="hidden" name="_method" value="put" th:if="${emp!=null}">
<input type="hidden" name="id" th:value="${emp.id}" th:if="${emp!=null}">
<div class="form-group">
<label>LastName</label>
<input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
</div>
<div class="form-group">
<label>Email</label>
<input name="email" type="email" class="form-control" placeholder="zhangsan@atguigu.com" th:value="${emp!=null}?${emp.email}">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp!=null}?${emp.gender==1}">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp!=null}?${emp.gender==0}">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<option th:selected="${emp!=null}?${emp.department.id == dept.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input name="birth" type="text" class="form-control" placeholder="yyyy/MM/dd" th:value="${emp!=null}?${#dates.format(emp.birth,'yyyy-MM-dd')}">
</div>
<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<form th:action="@{/emp}" method="post">
<input type="hidden" name="_method" value="put" th:if="${emp!=null}">
<input type="hidden" name="id" th:value="${emp.id}" th:if="${emp!=null}">
<div class="form-group">
<label>LastName</label>
<input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
</div>
<div class="form-group">
<label>Email</label>
<input name="email" type="email" class="form-control" placeholder="zhangsan@atguigu.com" th:value="${emp!=null}?${emp.email}">
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp!=null}?${emp.gender==1}">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp!=null}?${emp.gender==0}">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<option th:selected="${emp!=null}?${emp.department.id == dept.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input name="birth" type="text" class="form-control" placeholder="yyyy/MM/dd" th:value="${emp!=null}?${#dates.format(emp.birth,'yyyy-MM-dd')}">
</div>
<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
</form>

①由于修改和添加公用一个表单，但修改时页面需要由隐藏域保存后台传递来的id，而添加不需要此隐藏域，因此使用th:if属性，当满足条件时，使用th:if属性的标签才会被渲染

②表单只支持get和post两种提交方式，但根据Restful风格的要求，修改需要使用put方式提交，需要添加一个name="_method"，值为"put"的隐藏域告诉HiddenHttpMethodFilter提交方式为put，在SpringMVC中我们还需要配置HiddenHttpMethodFilter，但SpringBoot以自动为我们配置好了HiddenHttpMethodFilter，我们只需要一个提交方式为post且带有一个"_method"隐藏域的表单来改变提交方式：

复制代码

1
2
3
4
5
@Bean
@ConditionalOnMissingBean({HiddenHttpMethodFilter.class})
public OrderedHiddenHttpMethodFilter hiddenHttpMethodFilter() {
return new OrderedHiddenHttpMethodFilter();
}

处理修改：

复制代码

1
2
3
4
5
@PutMapping("/emp")
public String updateEmp(Employee employee){
employeeDao.save(employee);
return "redirect:/emps";
}

3、删

由于Restful风格的要求，我们删除时需要发送delete方式的请求给后台，而<a>中发送的请求为get方式的，因此不能使用<a>标签，我们可以借助表单来完成发送delete请求的操作：

复制代码

1
2
3
4
<form th:action="@{/emp/} + ${emp.id}" method="post">
<input type="hidden" name="_method" value="delete">
<button type="submit" class="btn btn-sm btn-danger">删除</button>
</form>

但如果是列表的话，这样会使页面中渲染出很多表单，我们还可以使用js的方式来达到此目的：

①给列表中的<button>自定义一个属性，并给该属性赋值：

复制代码

1
<button th:attr="btn_uri=@{/emp/} + ${emp.id}" class="btn btn-sm btn-danger subBtn">删除</button>

在页面中添加一个单独的表单：

复制代码

1
2
3
<form id="subForm" method="post">
<input type="hidden" name="_method" value="delete">
</form>

利用js的方式绑定事件：在点击每个按钮的时候提交该表单

复制代码

1
2
3
4
5
6
<script>
$('.subBtn').click(function(){
$('#subForm').attr('action',$(this).attr('btn_uri')).submit();
return false;
});
</script>

最后

以上就是从容小松鼠最近收集整理的关于SpringBoot——web开发之增删改的全部内容，更多相关SpringBoot——web开发之增删改内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：SpringBoot
浏览次数：95 次浏览
发布日期：2023-12-25 09:35:09
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_2_f5_13__7__10_w.html

SpringBoot——web开发之增删改

最后

评论列表共有 0 条评论

发表评论取消回复

SpringBoot——web开发之增删改

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

发表评论取消回复