1、准备工作

和传统的 CRUD 一样，实现对员工信息的增删改查

• 搭建环境
• 准备实体类

package com.atguigu.rest.bean;

/**
 * Created by itmkyuan on 2022/1/22.
 */
public class Employee {
    private Integer id;
    private String lastName;
    private String email;
    private Integer gender;

    public Employee() {
    }

    public Employee(Integer id, String lastName, String email, Integer gender) {
        this.id = id;
        this.lastName = lastName;
        this.email = email;
        this.gender = gender;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public Integer getGender() {
        return gender;
    }

    public void setGender(Integer gender) {
        this.gender = gender;
    }

    @Override
    public String toString() {
        return "Employee{" +
                "id=" + id +
                ", lastName='" + lastName + '\'' +
                ", email='" + email + '\'' +
                ", gender=" + gender +
                '}';
    }
}

• 准备dao模拟数据

package com.atguigu.rest.dao;

import com.atguigu.rest.bean.Employee;
import org.springframework.stereotype.Repository;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

/**
 * Created by itmkyuan on 2022/1/22.
 */
@Repository
public class EmployeeDao {
   private static Map<Integer, Employee> employees = null;

   static {
       employees = new HashMap<Integer, Employee>();
       employees.put(1001,new Employee(1001,"E-AA","aa@163.com",1));
       employees.put(1002,new Employee(1002,"E-BB","bb@163.com",1));
       employees.put(1003,new Employee(1003,"E-CC","cc@163.com",0));
       employees.put(1004,new Employee(1004,"E-DD","dd@163.com",0));
       employees.put(1005,new Employee(1005,"E-EE","ee@163.com",1));
   }

   private static Integer initId=1006;

   public void save(Employee employee){
        if (employee.getId()==null){
            employee.setId(initId++);
        }
        employees.put(employee.getId(),employee);
   }

   public Collection<Employee> getAll(){
       return employees.values();
   }

   public Employee get (Integer id){
       return employees.get(id);
   }

   public void delete(Integer id){
       employees.remove(id);
   }
}

2、功能清单

3、具体功能：访问首页

a>配置view-controller

<mvc:view-controller path="/" view-name="index"/>

b>创建页面

<h1>首页</h1>
<a th:href="@{/employee}">查看员工信息</a>

4、具体功能：查询所有员工数据

a>控制器方法

    @RequestMapping(value = "/employee",method = RequestMethod.GET)
    public String getAllEmployee(Model model){
        Collection<Employee> employeeList = employeeDao.getAll();
        model.addAttribute("employeeList",employeeList);
        return"employee_list";
    }

>b创建employee_list.html

<table  id="dataTable" th:border="1" th:cellspacing="0" data-th-cellpadding="0" style="text-align: center">
    <tr >
        <th colspan="5">Employee Info</th>
    </tr>
    <tr>
        <th>id</th>
        <th>lastName</th>
        <th>email</th>
        <th>gender</th>
        <th>options(<a th:href="@{/toAdd}">add</a>>)</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>

5、具体功能：删除

a>创建delete请求方式的表单

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

b>删除超链接绑定单击事件

<a @click="deleteEmployee" th:href="@{'/employee/'+${employee.id}}">delete></a>

var vue = new Vue()({
        el:"dataTable",
        methods:{
            deleteEmployee:function (event) {
                    //根据id获取表单元素
                    var deleteForm = document.getElementById("deleteForm");
                    //将触发点击事件的href属性赋值给表单的action
                    deleteForm.action =event.target.href;
                    //提交表单
                    deleteForm.submit();
                    //取消超链接的默认行为
                    event.preventDefault()
            }
        }
        });

c>控制器方法

@RequestMapping(value = "/employee/{id}",method = RequestMethod.DELETE)
    public String deleteEmployee(@PathVariable("id") Integer id){
        employeeDao.delete(id);
        return"redirect:/employee";
    }

6、具体功能：跳转到添加数据页面

a>配置view-controller

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

b>修改超链接

  <th>options(<a th:href="@{/toAdd}">add</a>>)</th>

c>创建employee_add.html

<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
    gender:<input type="radio" name="gender" value="0">female<br>
    <input type="submit" name="add"><br>
</form>

d>控制器方法

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

7、具体功能：执行保存

a>控制器方法

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

8、具体功能：跳转到更新数据页面

a>修改超链接
b>控制器方法

    @RequestMapping(value = "/employee/{id}",method = RequestMethod.GET)
    public String updateEmployee(@PathVariable("id") Integer id,Model model){
        Employee employee = employeeDao.get(id);
        model.addAttribute("employee",employee);
        return"employee_update";
    }

c>创建employee_update.html

<form th:action="@{/employee}" method="post">
    <input type="hidden" name="_method" value="put">
    <input type="hidden" name="id" th:value="${employee.id}">
    lastName:<input type="text" name="lastName" th:value="${employee.lastName}"><br>
    email:<input type="text" name="email"  th:value="${employee.email}"><br>
    gender:<input type="radio" name="gender" value="1" th:field="${employee.gender}">male
   <input type="radio" name="gender" value="0" th:field="${employee.gender}">female<br>
    <input type="submit" name="update"><br>
</form>