SpringBoot——web开发之增删改

1、增

进入页面请求：

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

处理方法：

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

页面展示：

<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="[email protected]">
	</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>

处理方法：

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

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

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

2、改

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

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

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

@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";
}

表单：

扫描二维码关注公众号，回复： 5608912 查看本文章

<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="[email protected]" 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"隐藏域的表单来改变提交方式：

@Bean
@ConditionalOnMissingBean({HiddenHttpMethodFilter.class})
public OrderedHiddenHttpMethodFilter hiddenHttpMethodFilter() {
	return new OrderedHiddenHttpMethodFilter();
}

处理修改：

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

3、删

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

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

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

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

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

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

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

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

SpringBoot——web开发之增删改

猜你喜欢