配置**view-controller**

    1. <mvc:view-controller path="/toAdd" view-name="employee_add"></mvc:view- controller>

    result页面添加功能跳转路径：

    update 
    <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table id="dataTable" align="center" border="1"  cellpadding="0">
        <tr>
            <th >id</th>
            <th>lastName</th>
            <th>email</th>
            <th>gender</th>
            <th>function</th>
        </tr>
        <tr th:each="employee : ${employeesList}">
            <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 th:href="@{/deleteId} + ${employee.id}">delete</a>--><!--路径+获取id拼接的方式一-->
                <a class="deleteA" @click="deleteEmployee" th:href="@{'/employee/'+${employee.id}}">delete</a>

                <a th:href="@{'/employee/'+${employee.id}}">update</a>
            </td>
        </tr>
    </table>

  <!-- 作用：通过超链接控制表单的提交，将post请求转换为delete请求 --> 
      <form id="delete_form" method="post"> 
        <!-- HiddenHttpMethodFilter要求：必须传输_method请求参数，并且值为最终的请求方式 --> 
        <input type="hidden" name="_method" value="delete"/> 
      </form>

  <!--引入vue.js--> 
         <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>

  <script type="text/javascript"> 
    var vue = new Vue({ el:"#dataTable",
                         methods:{

                         //event表示当前事件 
                         deleteEmployee:function (event) {

                         //通过id获取表单标签 
                           var delete_form = document.getElementById("delete_form");

                           //将触发事件的超链接的href属性为表单的action属性赋值 
                           delete_form.action = event.target.href; 

                           //提交表单 delete_form.submit(); 
                           //阻止超链接的默认跳转行为 
                           event.preventDefault();  
                         }
                       } 
                      });
    </script>
</body>
</html>

    创建**employee_add.html**

    <!DOCTYPE html> 
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"> 
  <title>Add Employee</title> 
</head> 
<body> 
  <form th:action="@{/employee}" method="post"> 
    lastName:<input type="text" name="lastName"><br> 
    email:<input type="text" name="email"><br> 
    gender:<input type="radio" name="gender" value="1">
    male <input type="radio" name="gender" value="0">female<br> 
    <input type="submit" value="add"><br> 
  </form> 
</body>
</html>

    controller：

    @RequestMapping(value = "/employee", method = RequestMethod.PUT)
public String updateEmployee(Employee employee){ 
    employeeDao.save(employee); 
    return "redirect:/employee"; 
}