(续)SSM整合:springmvc笔记(RESTful:RESTful案例)P148-153
目录
RESTful案例
一 . 准备工作
和传统 CRUD 一样,实现对员工信息的增删改查。
搭建环境
1 . 准备实体类
-
package com.atguigu.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() {
-
}
-
-
}
2 .准备dao模拟数据
-
package com.atguigu.dao;
-
-
import com.atguigu.pojo.Employee;
-
import org.springframework.stereotype.Repository;
-
-
import java.util.Collection;
-
import java.util.HashMap;
-
import java.util.Map;
-
-
-
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);
-
}
-
-
}
3. 创建控制层EmployeeController
-
package com.atguigu.controller;
-
import org.springframework.stereotype.Controller;
-
-
-
public class EmployeeController {
-
-
-
}
二 功能清单
三 . 具体功能:查询所有员工数据
①控制器方法
-
package com.atguigu.controller;
-
-
/**
-
* 查询所有的员工信息-->/employee-->get
-
* 跳转到添加页面-->/to/add-->get
-
* 新增员工信息-->/employee-->post
-
* 跳转到修改页面-->/employee/1-->get
-
* 修改员工信息-->/employee-->put
-
* 删除员工信息-->/employee/1-->delete
-
*/
-
-
public class EmployeeController {
-
-
private EmployeeDao employeeDao;
-
-
-
public String getAllEmployee(Model model){
-
//获取所有的员工信息
-
Collection<Employee> allEmployee = employeeDao.getAll();
-
//将所有的员工信息在请求域中共享
-
model.addAttribute("allEmployee", allEmployee);
-
//跳转到列表页面
-
return "employee_list";
-
}
-
-
}
②创建employee_list.html
-
-
<html lang="en" xmlns:th="http://www.thymeleaf.org">
-
<head>
-
<meta charset="UTF-8">
-
<title>employee list</title>
-
<link rel="stylesheet" th:href="@{/static/css/index_work.css}">
-
</head>
-
<body>
-
<table>
-
<tr>
-
<th colspan="5">employee list</th>
-
</tr>
-
<tr>
-
<th>id</th>
-
<th>lastName</th>
-
<th>email</th>
-
<th>gender</th>
-
<th>options</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 href="">delete</a>
-
<a href="">update</a>
-
</td>
-
</tr>
-
</table>
-
</body>
-
</html>
如果这个报红 就把错误警告取消
不过我们建议把它给选择上 因为如果不选择上 以后就算有错误 也不在提醒
③ index.html
-
-
<html lang="en" xmlns:th="http://www.thymeleaf.org">
-
<head>
-
<meta charset="UTF-8">
-
<title>首页</title>
-
</head>
-
<body>
-
<h1>index.html</h1>
-
<a th:href="@{/user}">查询所有的用户信息</a><br>
-
<a th:href="@{/user/1}">查询id为1的用户信息</a><br>
-
<form th:action="@{/user}" method="post">
-
<input type="submit" value="添加用户信息">
-
</form>
-
<form th:action="@{/user}" method="post">
-
<input type="hidden" name="_method" value="put">
-
<input type="submit" value="修改用户信息">
-
</form>
-
<form th:action="@{/user/5}" method="post">
-
<input type="hidden" name="_method" value="delete">
-
<input type="submit" value="删除用户信息">
-
</form>
-
<hr>
-
<a th:href="@{/employee}">查询所有的员工信息</a>
-
</body>
-
</html>
④ 测试
⑤ 处理静态资源 样式
把静态资源复制过来 然后在clean一下 然后在重新打包
<link rel="stylesheet" th:href="@{/static/css/index_work.css}">
报404
解决办法 :配置默认的servlet处理静态资源
-
<!--
-
配置默认的servlet处理静态资源
-
当前工程的web.xml配置的前端控制器DispatcherServlet的url-pattern是/
-
tomcat的web.xml配置的DefaultServlet的url-pattern也是/
-
此时,浏览器发送的请求会优先被DispatcherServlet进行处理,但是DispatcherServlet无法处理静态资源
-
若配置了<mvc:default-servlet-handler />,此时浏览器发送的所有请求都会被DefaultServlet处理
-
若配置了<mvc:default-servlet-handler />和<mvc:annotation-driven />
-
浏览器发送的请求会先被DispatcherServlet处理,无法处理在交给DefaultServlet处理
-
-->
-
<mvc:default-servlet-handler />
-
-
<!--开启mvc的注解驱动-->
-
<mvc:annotation-driven />
四 .具体功能:跳转到添加数据页面
①配置view-controller
<mvc:view-controller path="/to/add" view-name="employee_add"></mvc:view-controller>
②创建employee_add.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>
③ employee_list.html
<th>options(<a th:href="@{/to/add}">add</a>)</th>
④ 测试
⑤ 写控制层
-
-
public String addEmployee(Employee employee){
-
//保存员工信息
-
employeeDao.save(employee);
-
//重定向到列表功能:/employee
-
return "redirect:/employee";
-
}
⑥ 测试
五. 具体功能:跳转到更新数据页面
①修改超链接
<a th:href="@{'/employee/' ${employee.id}}">update</a>
②控制器方法
-
-
public String toUpdate({ Integer id, Model model)
-
//根据id查询员工信息
-
Employee employee = employeeDao.get(id);
-
//将员工信息共享到请求域中
-
model.addAttribute("employee", employee);
-
//跳转到employee_update.html
-
return "employee_update";
-
}
③创建employee_update.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>
④ 测试
六 .具体功能:执行更新
①控制器方法
-
-
public String updateEmployee(Employee employee){
-
//修改员工信息
-
employeeDao.save(employee);
-
//重定向到列表功能:/employee
-
return "redirect:/employee";
-
}
② 测试
七 具体功能:删除
①employee_list.html
-
-
<html lang="en" xmlns:th="http://www.thymeleaf.org">
-
<head>
-
<meta charset="UTF-8">
-
<title>employee list</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表单的action属性
-
//event.target表示当前触发事件的标签
-
form.action = event.target.href;
-
//表单提交
-
form.submit();
-
//阻止超链接的默认行为
-
event.preventDefault();
-
}
-
}
-
});
-
</script>
-
</body>
-
</html>
② 控制器方法
-
-
public String deleteEmployee({ Integer id)
-
//删除员工信息
-
employeeDao.delete(id);
-
//重定向到列表功能:/employee
-
return "redirect:/employee";
-
}
③ 测试
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgehjhf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01