前面我们学习关于RESTFUL风格的传参方式，今天我们用一个案例学习关于他的增删改查操作。
目录
1.准备工作
1.1 创建实体类
package com.xiaoye.pojo;
public class Employee {
private Integer id;
private String lastName;
private String email; //1 male, 0 female
private Integer 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;
}
public Employee(Integer id, String lastName, String email, Integer gender) {
super();
this.id = id;
this.lastName = lastName;
this.email = email;
this.gender = gender;
}
public Employee() {
}
}
1.2 准备Dao模拟数据
写有添加，修改，查询所有员工功能
package com.xiaoye.dao;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
import com.xiaoye.pojo.Employee;
import org.springframework.stereotype.Repository;
@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/2 | GET |
| 执行更新 | /employee | PUT |
3. 访问首页
3.1 配置view-controller
使用视图控制器直接跳转到index页面
<mvc:view-controller path="/" view-name="index"/>3.2 创建登录页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title></head>
<body><h1>首页</h1> <a th:href="@{/employee}">访问员工信息</a></body>
</html>4 访问所有员工信息
4.1 控制器方法
@RequestMapping(value = "/employee", method = RequestMethod.GET)
public String getEmployee(Model model) {
Collection<Employee> employees = employeeDao.getAll();
//将所有员工信息在请求域共享
model.addAttribute("allemployee", employees);
return "employee_list";
}4.2 创建employee_list页面
这是最终成品页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>employee</title>
<link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
<div id="app">
<table>
<tr>
<th colspan="5">employee list</th>
</tr>
<tr>
<th>id</th>
<th>lastName</th>
<th>email</th>
<th>gender</th>
<th>options(<a th:href="@{/to/add}">add</a> )</th>
</tr>
<tr th:each="employee : ${allemployee}">
<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>
<form method="post">
<input type="hidden" name="_method" value="delete">
</form>
</div>
<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的属性
// event.target表示当前触发事件的标签
form.action = event.target.href;
//表单提交
form.submit();
//阻止超链接的默认行为
event.preventDefault();
}
}
})
</script>
</body>
</html>5.删除
5.1 创建delete请求方式的表单
<!-- 作用：通过超链接控制表单的提交，将post请求转换为delete请求 -->
<form id="delete_form" method="post">
<!-- HiddenHttpMethodFilter要求：必须传输_method请求参数，并且值为最终的请求方式 -->
<input type="hidden"
name="_method"
value="delete"/>
</form>5.2 引入vue.js
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>5.3 删除超链接
<a class="deleteA" @click="deleteEmployee"
th:href="@{'/employee/'+${employee.id}}">delete</a>5.4 通过vue处理点击事件
<script type="text/javascript">
var vue = new Vue({
el: "#app",
methods: {
deleteEmployee() {
//获取form表单
var form = document.getElementsByTagName("form")[0];
//将超链接的href赋值给form的属性
// event.target表示当前触发事件的标签
form.action = event.target.href;
//表单提交
form.submit();
//阻止超链接的默认行为
event.preventDefault();
}
}
})
</script>5.5 控制器方法
@RequestMapping(value = "/employee/{id}", method = RequestMethod.DELETE)
public String deleteEmployee(@PathVariable("id") Integer id){
//删除员工信息
employeeDao.delete(id);
return "redirect:/employee";
}6.添加
6.1 配置view-controller
<mvc:view-controller path="/to/add" view-name="employee_add"></mvc:view-controller>6.2 创建添加页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>add employee</title>
<link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
<form th:action="@{/employee}" method="post">
<table>
<tr>
<th colspan="2">add employee</th>
</tr>
<tr>
<td>lastname</td>
<td>
<input type="text" name="lastName">
</td>
</tr> <tr>
<td>email</td>
<td>
<input type="text" name="email">
</td>
</tr> <tr>
<td>gender</td>
<td>
<input type="radio" name="gender" value="1">male
<input type="radio" name="gender" value="0">female
</td>
</tr> <tr>
<td colspan="2">
<input type="submit" value="add">
</td>
</tr>
</table>
</form>
</body>
</html>6.3 控制器方法
@RequestMapping(value = "/employee", method = RequestMethod.POST)
public String addEmployee(Employee employee) {
employeeDao.save(employee);//保存员工信息
//重定向到列表功能:/employee
return "redirect:/employee";
}7.更新
7.1 超链接
<a th:href="@{'/employee/'+${employee.id}}">update</a>7.2 控制器方法
根据id得到该员工信息并共享到请求域
@RequestMapping(value = "/employee/{id}", method = RequestMethod.GET)
public String toupdate(@PathVariable("id") Integer id, Model model) {
//根据id查询员工信息
Employee employee = employeeDao.get(id);
//将员工信息共享到请求域
model.addAttribute("employee", employee);
//跳转到employee_update.html
return "employee_update";
}7.3 创建修改页面
该表单发送到执行更新方法的控制器
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>update employee</title>
<link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
<form th:action="@{/employee}" method="post">
<input type="hidden" name="_method" value="put">
<input type="hidden" name="id" th:value="${employee.id}">
<table>
<tr>
<th colspan="2">update employee</th>
</tr>
<tr>
<td>lastName</td>
<td>
<input type="text" name="lastName" th:value="${employee.lastName}">
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" th:value="${employee.email}">
</td>
</tr>
<tr>
<td>gender</td>
<td>
<input type="radio" name="gender" value="1" th:field="${employee.gender}">male
<input type="radio" name="gender" value="0" th:field="${employee.gender}">female
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="update">
</td>
</tr>
</table>
</form>
</body>
</html>7.4 执行更新控制器方法
@RequestMapping(value = "/employee", method = RequestMethod.PUT)
public String updateEmployee(Employee employee) {
//修改员工信息
employeeDao.save(employee);
//重定向到列表功能
return "redirect:/employee";
}
2421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
