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、功能清单
| 功能 | 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>创建页面」
<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>
原文始发于微信公众号（itmkyuan）：SpringMVC 实现 RESTFul 案例
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/39513.html
