SpringMVC实现RESTFUL实例

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>