Spring Boot学习，修改、删除员工

先纠正一下前面博客的错误

在 《Spring Boot学习，引入资源和国际化》中，引入静态资源的时候弄错了。之前写的是

<link href="asserts/css/bootstrap.min.css" th:href="@{webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">

因为一在@{后面加上/，所以有时，会出现静态资源找不到的情况。想我在现在学的修改，跳转到修改页面的时候，页面全乱了。审查元素找不到静态资源
我访问的是http://localhost:8080/emp/1001
静态资源路径变成了：http://localhost:8080/emp/webjars/bootstrap/4.3.1/css/bootstrap.css
但是正确的应该是：http://localhost:8080/webjars/bootstrap/4.3.1/css/bootstrap.css
所以要当心一个/的麻烦。

修改员工

1. 点击编辑，跳转到编辑页面

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

编写跳转Controller

/**
 * 功能描述 查询员工，来到修改页面
 * @date 2019/9/3
 * @param
 * @return java.lang.String
 */
// 使用Get请求。并且在路径变量上加上了员工id，查询员工进行回显
@GetMapping("/emp/{id}")
public String toEditPage(@PathVariable("id")Integer id, Model model) {
	// 查询员工
    Employee employee = employeeDao.get(id);
    model.addAttribute("employee", employee);
    // 查询部门
    Collection<Department> departments = departmentDao.getDepartments();
    model.addAttribute("departments", departments);
    // 跳转到修改页面，这是修改添加二合一页面
    return "emp/addEmployee";
}

跳转正常后修改响应的地方进行数据的回显：

<form th:action="@{/emp}" method="post">
	<div class="form-group">
		<label>姓名</label>
		<input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${employee != null} ? ${employee.lastName}">
	</div>
	<div class="form-group">
		<label>邮箱</label>
		<input name="email" type="email" class="form-control" placeholder="zhangsan@atguigu.com" th:value="${employee != null} ? ${employee.email}">
	</div>
	<div class="form-group">
		<label>性别</label><br/>
		<div class="form-check form-check-inline">
			<input class="form-check-input" type="radio" name="gender"  value="1" th:checked="${employee != null} ? ${employee.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="${employee != null} ? ${employee.gender == 0}">
			<label class="form-check-label">女</label>
		</div>
	</div>
	<div class="form-group">
		<label>部门</label>
		<select class="form-control" name="department.id">
			<option th:selected="${employee != null} ? ${department.id == employee.department.id}" th:each="department : ${departments}" th:value="${department.id}" th:text="${department.departmentName}"></option>
			<!--<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>-->
		</select>
	</div>
	<div class="form-group">
		<label>生日</label>
		<input name="birth" type="text" class="form-control" placeholder="zhangsan" th:value="${employee != null} ? ${#dates.format(employee.birth, 'yyyy-MM-dd HH:mm')}">
	</div>
	<button type="submit" class="btn btn-primary" th:text="${employee != null} ? '修改': '添加'">添加</button>
</form>

因为这个面是修改添加二合一页面说以使用三元运算符进行判断是否有回显信息${employee != null} ? ${employee.email}

发PUT请求的步骤

1. SpringMVC中配置HiddenHttpMethodFilter（SpringBoot自动配置好的）
2. 页面创建一个post表单
3. 创建一个input项，name="_method"；值就是指定的请求方式

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
	<form th:action="@{/emp}" method="post">
		<input type="hidden" name="_method" value="put" th:if="${employee != null}"/>
		<input type="hidden" name="id" th:value="${employee.id}" th:if="${employee != null}" />
		...
</main>

编写Controller

/**
 * 功能描述 修改员工
 * @author Caesar
 * @date 2019/9/7
 * @param employee 
 * @return java.lang.String 
 */
@PutMapping("/emp")
public String updateEmployee(Employee employee) {
    employeeDao.save(employee);
    return "redirect:/emps";
}

修改前：

修改：


修改完成。

注意：
自己踩的一个小坑，日期格式的回显，我没有配置日期格式化方式，所以使用的是默认的，yyyy/MM/dd。但是我回显的时候回显成了yyyy-MM-dd，所以在修改的时候就报错。

删除

发DELETE请求的步骤

1. SpringMVC中配置HiddenHttpMethodFilter（SpringBoot自动配置好的）
2. 页面创建一个post表单
3. 创建一个input项，name="_method"；值就是指定的请求方式（DELETE）

页面

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

编写delete Controller方法

/**
* 功能描述 删除员工
 * @author Caesar
 * @date 2019/9/7
 * @param id
 * @return java.lang.String
 */
@DeleteMapping("/emp/{id}")
public String deleteById(@PathVariable("id") Integer id) {
    employeeDao.del(id);
    return "redirect:/emps";
}

效果：
删除前：

删除后：

但是这样写的话，每个删除有一个form标签，所以改造一下：

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
	<h2 th:text="员工列表">Section title</h2>
	<h2><a class="btn btn-sm btn-success" href="/emp" th:href="@{/emp}">添加</a></h2>
	<div class="table-responsive">
		<table class="table table-striped table-sm">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>邮箱</th>
					<th>生日</th>
					<th>部门</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr th:each="emp:${emps}"> <!-- th:each="xx:${xxx}" 遍历，使用xx接收每一次遍历的xxx的值 -->
					<td th:text="${emp.id}"></td> <!-- th:text -->
					<td>[[${emp.lastName}]]</td> <!-- 行内写法 -->
					<td th:href="${emp.gender} == 0 ? '女' : '男'"></td> <!-- 三元运算符的==可以放在{}内，也可以放在大括号外，推荐放在外面 -->
					<td th:text="${emp.email}"></td>
					<!--<td th:text="${emp.birth}"></td>-->
					<td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm:ss')}"></td> <!-- 使用内置的日期处理对象对日期进行处理 -->
					<td th:text="${emp.department.departmentName}"></td> <!-- 级联取属性的属性 -->
					<td>
						<a class="btn btn-sm btn-primary"href="/emp" th:href="@{/emp/}+${emp.id}">编辑</a>
                                    <button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger delBtn">删除</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</main>
<form id="delForm" method="post">
    <input type="hidden" name="_method" value="delete" />
</form>

<script>
    $(".delBtn").click(function() {
        $("#delForm").attr("action", $(this).attr("del_uri")).submit();
        return false;
    });
</script>

th:attr：自定义属性的赋值。
当心，将form标签上的th:action="@{/emp/} + ${emp.id}"去掉，否则emp为空报错。