SpringMVC 实现 RESTFul 案例
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","[email protected]",1));
employees.put(1002,new Employee(1002,"E-BB","[email protected]",1));
employees.put(1003,new Employee(1003,"E-CC","[email protected]",0));
employees.put(1004,new Employee(1004,"E-DD","[email protected]",0));
employees.put(1005,new Employee(1005,"E-EE","[email protected]",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、功能清单
| 功能 | URL地址 | 请求方式 |
|---|---|---|
| 访问首页 | / | GET |
| 查询全部数据 | /employee | GET |
| 删除 | /employee/2 | DELETE |
| 跳转到添加数据页面 | /toAdd | GET |
| 执行保存 | /employee | POST |
| 跳转到更新数据页面 | /employee | GET |
| 执行更新 | /employee | PUT |
3、具体功能：访问首页
a>配置view-controller
<mvc:view-controller path="/" view-name="index"/>
b>创建页面
首页
查看员工信息
4、具体功能：查询所有员工数据
a>控制器方法
@RequestMapping(value = "/employee",method = RequestMethod.GET)
public String getAllEmployee(Model model){
Collection 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 Infoth>
tr>
<tr>
<th>idth>
<th>lastNameth>
<th>emailth>
<th>genderth>
<th>options(<a th:href="@{/toAdd}">adda>>)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}}">updatea>
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}">adda>>)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>