总结
--get查看数据,
post创建新数据行,
put更新数据,
delete删除数据行--
add和select功能都共用这一个页面, 需要进行区分显示 ,使用thymeleaf的三元选择,判断emp是否为空的警告, 即可;
举例:
发送put请求,再进行修改员工的数据,在页面的methd只支持post和get,需要三步:
1.在SpringMVC中配置HiddenHttpMethodFilter;(SpringBoot就自动配置好了,进入WebMvcAutoConfigure进行查看)
2.在页面进行创建一个post表单
3.创建一个input项, name="_method";值就是我们指定的请求方式"delete"/"put" ;
html页面的form表单举例 delete请求
<td>
<form method="post" th:action="@{/emp/}+${emp.id}">
<input name="_method" value="delete" type="hidden" />
<button class="btn btn-sm btn-danger" type="submit">删除</button>
</form>
</td>
控制器 举例 delete请求
/**
* 6: 员工删除
* @param id
* @return
*/
@DeleteMapping("/emp/{id}")
public String deleteEmployee(@PathVariable Integer id){
employeeDao.delete(id);
return "redirect:/emps";
}
html页面的form表单举例 delete请求 的优化
如上图,会存在大量重复的form表单代码,毕竟在遍历生成标签的时候,每个会随之生成一个form表单
页面显示后代码冗余过大,JS脚本优化如下
<td>
<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn" >删除</button>
</td>
-------------如下放到公共区------------
<form id="deleteEmpForm" method="post">
<input type="hidden" name="_method" value="delete" />
</form>
--------------- 如下jquery代码----------
<script>
$(".deleteBtn").click(function () {
//删除当前员工的功能
$("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
return false;
});
</script>