SpringBoot簡單項目學習筆記05（員工信息提交、員工信息修改、員工信息刪除）

時間 2020-07-06

標籤 springboot 簡單項目學習筆記員工信息提交修改刪除欄目 Spring 简体版

原文原文鏈接

github項目地址：https://github.com/H-Designer/SpringBootjavascript

上一節總結的是：頁面列表選項的高亮設置、員工信息的添加頁面設定（http://www.javashuo.com/article/p-aacfmqew-kd.html）css

這一節要總結的是：員工信息提交、員工信息修改html

##11、添加員工信息進行提交
填寫form表單
<form th:method="post" th:action="${/emp}}">
而後在後臺的controller進行提交的數據的接受
//員工信息提交到後臺進行接受
//SpringMvc自動將請求參數和入參對象的屬性進行一一綁定，要求請求參數的名稱和Javabean和入參對象的名稱保持一致
@PostMapping("/emp")
public String addEmp(Employee employee){
System.out.println("保存的信息"+employee);
//保存員工信息
employeeDao.save(employee);
//來到員工列表頁面
//redirect:表示重定向到一個地址 /表明的是當前項目的路徑
//forward:表示轉發到一個地址
return "redirect:/emps";
}
}
在後臺將信息接收以後，經過dao裏面的save函數，將信息進行保存，而且將地址進行重定向，重定向到「/emps」，而後仍是會經過
@GetMapping("/emps")
public String list(Model model){
Collection<Employee> employee = employeeDao.getAll();
//放在請求域中
model.addAttribute("emps",employee);
//thymeleaf會自動進行拼接
//classpath:/tempaltes/xxx.html
return "emp/list";
}
這個controller中的解析器進行解析，而後控制跳轉的狀況，在這裏再次根據controller而後employeeDao.getAll();獲得全部的信息，而後將信息存儲到model中，在emp/下的list進行接收和顯示。
這裏就是在controller先進行數據的保存，而後進行地址的重定向，在進行獲取全部的員工信息，而後返回到list界面進行顯示

##十二、將員工的信息進行修改操做

首先就是將list裏面的按鈕進行連接的修改，將button改爲是a標籤進行傳遞

這裏面的href連接，傳遞的不單單是emp請求，同時在後面還跟着id參數的傳遞，可是在地址欄裏面，也顯示

將id參數傳遞到後臺，在controller中，
在這裏首先在修改的時候，在add的雙重界面，首先就是會進行查詢該員工的信息，根據id進行查詢，而後將查詢到的信息進行封裝，
@GetMapping("/emp/{id}")
public String toEditPage(@PathVariable("id") Integer id,Model model){
Employee employee = employeeDao.get(id);
model.addAttribute("emp",employee);
System.out.println("這裏是員工信息修改（先查出員工的信息）的模塊"+employee);
//修改頁面要顯示全部的部門信息進行修改的選擇
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
//回到修改頁面（add是一個修改添加合爲一體的界面）
return "emp/add";
} 

根據員工的id進行查詢該員工的全部的信息，而後在封裝在model中進行addAttribute，除此以外，要修改員工的信息，還要查到全部的部門信息供員工修改信息時候進行選擇，因此就涉及到了
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
將部門的信息也進行封裝，而後進行addAttribute，而後進行頁面的轉向，轉向到add的添加和修改的雙重界面
而且在add的界面要顯示當前員工的信息，因此在界面就要進行數據的接受，還要判斷這是添加頁面仍是修改頁面;
<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="asserts/css/bootstrap.min.css" rel="stylesheet">
<link href="../asserts/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="asserts/css/dashboard.css" rel="stylesheet">
<link href="../asserts/css/dashboard.css" rel="stylesheet">
<style type="text/css">
/* Chart.js */
@-webkit-keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
}
@keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
}
.chartjs-render-monitor {
-webkit-animation: chartjs-render-animation 0.001s;
animation: chartjs-render-animation 0.001s;
}
</style>
</head>
<body>
<!--引入抽取到的topbar-->
<!--模版名會使用thymeleaf的配置命名規則進行解析-->
<div th:replace="commons/bar::topbar"></div>
</div>
<div class="container-fluid">
<div class="row">
<!--引入側邊欄-->
<!--引入sidebar-->
<div th:replace="commons/bar::#sidebar(activeuri='emps')"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<!--須要區分是添加功能仍是修改功能，根據不一樣的功能進行顯示不一樣的效果-->
<form method="post" th:action="@{/emp}">
<!--發送put請求修改員工信息-->
<!--
1、SpringMVC中進行配置HiddenHttpMethodFilter（SpringBoot自動配置）
2、頁面建立一個post表單
三、建立一個input項，name="_method",值就是咱們指定的請求方式
-->
<input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
<input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}"/>
<div class="form-group">
<label>LastName</label>
<input type="text" name="lastName" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="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>
<!--提交的收拾部門信息的id-->
<select class="form-control" name="department.id">
<option th:selected="${emp!=null}?${dept.id==emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">部門</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 HH:mm')}" >
</div>
<!--${emp!=null}?${#dates.format(emp.birth,'yyyy-mm-dd')}-->
<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
</form>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="asserts/js/popper.min.js"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>
<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js"></script>
<script>
feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
lineTension: 0,
backgroundColor: 'transparent',
borderColor: '#007bff',
borderWidth: 4,
pointBackgroundColor: '#007bff'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false,
}
}
});
</script>
</body>
</html>
在這裏面，在填寫欄，要默認顯示的是員工 的信息，
<input type="text" name="lastName" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
placeholder="zhangsan"當th:value="${emp!=null}?${emp.lastName}"
當emp不爲空的時候說明是在員工的修改頁面過來的，在emp不爲空的時候，在這個欄塊就要默認的顯示emp的lastname的屬性，若是emp爲空，則顯示的就是placeholder="zhangsan"
在員工信息進行提交的時候，提交的是put請求，須要從post轉化爲put請求
這時候就須要進行三個步驟將post轉化位put
<!--
1、SpringMVC中進行配置HiddenHttpMethodFilter（SpringBoot自動配置）
2、頁面建立一個post表單
三、建立一個input項，name="_method",值就是咱們指定的請求方式
-->
在form表單中<form method="post" th:action="@{/emp}">
使用的就是post請求，而後咱們將post進行轉化便可
<input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
這個就是咱們轉化的步驟，能夠設置一個隱藏的input屬性，name="_method" value="put" 在th:if="${emp!=null}"成立的狀況下，就能夠將post請求轉化位put請求
將數據進行提交，而後在後臺進行接受和分析//員工修改信息;須要將員工的id信息也提交過來
@PutMapping("/emp")
public String updateEmployee(Employee employee){
System.out.println("修改的員工信息是"+employee);
employeeDao.save(employee);
return "redirect:/emps";
}
將員工的信息進行接受，而後進行save進行保存，而後再次重定向到emps請求，而後
@GetMapping("/emps")
public String list(Model model){
Collection<Employee> employee = employeeDao.getAll();
//放在請求域中
model.addAttribute("emps",employee);
//thymeleaf會自動進行拼接
//classpath:/tempaltes/xxx.html
return "emp/list";
}
根據這個解析器進行解析，而後繼續跳轉到了list界面，這跳轉以前，先會將全部的員工信息進行查詢，而後再次封裝到emps的model中，而後在前端進行接受，而後將list進行顯示

##13員工信息的刪除
在列表頁面，除了修改操做還有刪除操做，
爲了解決界面的佈局的好看，選擇就是在建立一個表單，而後進行提交
寫一個button<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">刪除</button>
在新的form裏面將post的請求轉化位delete的請求
<form id="deleteEmpForm" method="post">
<input type="hidden" name="_method" th:value="delete">
</form>
寫一個js
<script>
$(".deleteBtn").click(function(){
//刪除當前員工的我的信息
$("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
return false;
});
</script>
在這裏面當deleteBtn進行點擊以後，就要進行提交刪除的表單，經過attr的方法將del_uri的地址連接進行提交，而後在後臺進行接受
//刪除員工信息
@DeleteMapping("/emp/{id}")
public String deleteEmployee(@PathVariable("id") Integer id){
System.out.println("這裏是刪除員工信息模塊"+id);
employeeDao.delete(id);
return "redirect:/emps";
}
刪除員工的信息，就要經過獲取員工信息裏面的id，而後經過id進行刪除該員工的全部的信息，而後在進行重定向，定向到emps請求，而後再次返回到list的界面進行新的員工列表信息的顯示