RESTFul案例

8.1、准备工作

对员工表（模拟表数据）的员工信息进行增删改查

搭建环境

准备实体类

package com.qcby.pojo; /**  * @Author che  * @Date 2024/6/9 19:16  * Description:TODO  * Version 1.0  */ public class Employee {     private  Integer id;//主键     private String lastName;//姓名     private String email;//邮箱     private Integer sex;//性别,1male,0female     public Employee() {     }     public Employee(Integer id, String lastName, String email, Integer sex) {         this.id = id;         this.lastName = lastName;         this.email = email;         this.sex = sex;     }     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 getSex() {         return sex;     }     public void setSex(Integer sex) {         this.sex = sex;     }     @Override     public String toString() {         return "Employee{" +                 "id=" + id +                 ", lastName='" + lastName + '\'' +                 ", email='" + email + '\'' +                 ", sex=" + sex +                 '}';     } }

准备dao模拟数据

package com.qcby.dao; import com.qcby.pojo.Employee; import org.springframework.stereotype.Repository; import java.util.Collection; import java.util.HashMap; import java.util.Map; /**  * @Author che  * @Date 2024/6/9 19:19  * Description:TODO  * Version 1.0  */ @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@qq.com",1));         employees.put(1002,new Employee(1002,"E-AA","aa@qq.com",1));         employees.put(1003,new Employee(1003,"E-AA","aa@qq.com",0));         employees.put(1004,new Employee(1004,"E-AA","aa@qq.com",0));         employees.put(1005,new Employee(1005,"E-AA","aa@qq.com",1));     }     private  static  Integer initId = 1006;     /**      * 模拟添加操作      * @param employee      */     public void save(Employee employee){         if(employee.getId() == null){             employee.setId(initId++);         }         employees.put(employee.getId(),employee);     }     /**      * 删除      * @param id      */     public void delete(Integer id){         employees.remove(id);     }     /**      * 修改      * @param id      * @return      */     public Employee get(Integer id){         return employees.get(id);     }     /**      * 查找      * @return      */     public Collection<Employee> getAll(){         return employees.values();     } }

8.2功能清单

功能	URL 地址	请求方式
访问首页√	/	GET
查询全部数据√	/employee	GET
删除√	/employee/2	DELETE
跳转到添加数据页面√	/toAdd	GET
执行保存√	/employee	POST
跳转到更新数据页面√	/employee/2	GET
执行更新√	/employee	PUT

index.html

8.3、访问首页

SpringMVC.xml

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

创建index页面

<a th:href="@{/employee}">查询所有的员工信息</a><br>

控制器

@Autowired private EmployeeDao employeeDao; //@RequestMapping(value = "/employee",method = RequestMethod.GET) @GetMapping("/employee") public String getAllEmployee(Model model) {     //获取所有的员工信息     Collection<Employee> allEmployee = employeeDao.getAll();     //将所有的员工信息在请求域中共享     model.addAttribute("allEmployee",allEmployee);     //返回到员工列表页面     return "employee_list"; }

//@RequestMapping(value = "/employee/{id}",method = RequestMethod.DELETE) @DeleteMapping("/employee/{id}") public String deleteEmploee(@PathVariable Integer id) {     //删除员工信息     employeeDao.delete(id);     return "redirect:/employee"; }

⑴创建处理删除delete请求方式的表单

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

⑵删除超链接绑定点击事件

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

⑶

<script type="text/javascript" th:src="@{/static/js/vue.js}"></script> <script type="text/javascript">     var vue = new Vue({         el:"#app",         methods:{             deleteEmployee(){                 //获取form表单                 var form = document.getElementsByTagName("form")[0];                 //将超链接的href属性赋值给form表单的action属性                 //event.target表示当前触发事件的标签                 form.action =event.target.href;                 //表单提交                 form.submit();                 //阻止超链接的默认行为                 event.preventDefault();             }         }     });

8.4调整到添加数据页面

功能	URL 地址	请求方式
访问首页√	/	GET
查询全部数据√	/employee	GET
删除√	/employee/2	DELETE
跳转到添加数据页面√	/to/add	GET
执行保存√	/employee	POST
跳转到更新数据页面√	/employee/2	GET
执行更新√	/employee	PUT