8、RESTFul案例

8.1、准备工作

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

搭建环境

准备实体类

public class Employee {private  Integer id;//主键private String lastName;//姓名private String email;//邮箱private Integer sex;//性别,1male,0femalepublic 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;}@Overridepublic String toString() {return "Employee{" +"id=" + id +", lastName='" + lastName + '\'' +", email='" + email + '\'' +", sex=" + sex +'}';}
}

准备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
访问首页√	/	GET
查询全部数据√	/employee	GET
删除√	/employee/2	DELETE
跳转到添加数据页面√	/to/add	GET
执行保存√	/employee	POST
跳转到更新数据页面√	/employee/2	GET
执行更新√	/employee	PUT