總結
--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>