SpringMVC的搭建前几篇文章中有介绍过,此处不再赘述。文章主要用来记录学习过程中的一些遇到的问题,用于巩固自己的基础,有任何问题欢迎指正。
一、搭建SpringMVC
1、配置web.xml
2、配置springmvc.xml
二、类的实现
1、实体类Employee,在bean包下面创建Employee实体类,主要是对对象属性实现封装。
2、持久层Dao的实现,主要是数据的查询,删除等操作,给controller层提供数据处理接口,即方法。
3、控制层Controller的实现,在Controller包下创建EmployeeController类实现路由转发和对数据的基本操作。
三、前端页面的设计
前端页面的功能主要是用户进行删除和更新的操作,删除和更新之后,页面显示到当前页面,但是数据要发生变化。
实现逻辑:
(1)首先使用Thymeleaf模板引擎对dao层数据进行展示。
访问路由/employee,获取dao层的数据并将其发送到request请求域。此处使用的是GET请求。
@RequestMapping(value = "/employee",method = RequestMethod.GET)
public String getAllEmployee(Model model)
{
Collection<Employee> employList=employeeDao.getAll();
model.addAttribute("employeeList",employList);
return "employee_list";
}
前端使用th解析employeeList对象,此处的小细节是使用th:each属性自动添加数据。数据展示完毕。
<table border="1" cellpadding="0" cellspacing="0" style="text-align: center" id="dataTable">
<tr>
<th colspan="5">employee info</th>
</tr>
<tr>
<th>id</th>
<th>lastName</th>
<th>email</th>
<th>gender</th>
<th>options</th>
</tr>
<!-- 循环信息-->
<tr th:each="employee:${employeeList}">
<td th:text="${employee.id}"></td>
<td th:text="${employee.lastName}"></td>
<td th:text="${employee.email}"></td>
<td th:text="${employee.gender}"></td>
</tr>
</table>
(2)设置删除和更新按钮,用超链接代替。实现删除和更新操作。
删除操作需要发送delete请求,使用拦截器HiddenHttpMethodFilter将post请求转换为delete,前端form表单的请求方式是post,但是内嵌input的属性的value值是delete。感兴趣的可查看HiddenHttpMethodFilter源码。
<form id="deleteForm" method="post">
<input type="hidden" name="_method" value="delete">
</form>
删除和更新的超链接位置如图:
<table border="1" cellpadding="0" cellspacing="0" style="text-align: center" id="dataTable">
<tr>
<th colspan="5">employee info</th>
</tr>
<tr>
<th>id</th>
<th>lastName</th>
<th>email</th>
<th>gender</th>
<th>options</th>
</tr>
<!-- 循环信息-->
<tr th:each="employee:${employeeList}">
<td th:text="${employee.id}"></td>
<td th:text="${employee.lastName}"></td>
<td th:text="${employee.email}"></td>
<td th:text="${employee.gender}"></td>
<td>
<a @click="deleteEmployee" th:href="@{'/employee/'+${employee.id}}">delete</a>
<a th:href="@{'/employee/'+${employee.id}}">update</a>
</td>
</tr>
</table>
(3)引入vue.js,实现超链接的单击响应事件。此处需要注意的是id,一个是超链接id,一个是form标签的id,不要写错位置,要明业务逻辑。
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript">
var vue=new Vue({
el:"#dataTable",
methods:{
deleteEmployee:function (event) {
var deleteForm=document.getElementById("deleteForm");
deleteForm.action=event.target.href
deleteForm.submit();
event.preventDefault();
}
}
});
</script>