文章目录
8、RESTFul案例
8.1、准备工作
对员工表(模拟表数据)的员工信息进行增删改查
搭建环境
准备实体类
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模拟数据
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 |