0016SpringBoot实现RESTFUL形式的增删改查
1、列表页面如下
<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content=""> <title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="asserts/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template -->
<link href="asserts/css/dashboard.css" rel="stylesheet">
<style type="text/css">
/* Chart.js */ @-webkit-keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
} @keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
} .chartjs-render-monitor {
-webkit-animation: chartjs-render-animation 0.001s;
animation: chartjs-render-animation 0.001s;
}
</style>
</head> <body>
<!--引入顶部栏-->
<div th:replace="~{emp/bar::topbar}"></div> <div class="container-fluid">
<div class="row">
<!--引入侧边栏并高亮显示-->
<div th:replace="~{emp/bar::#sidebar(activeUri='emps')}"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<h2><a class="btn btn-sm btn-success" th:href="@{/emp}">新增</a></h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>id</th>
<th>lastName</th>
<th>email</th>
<th>gender</th>
<th>department</th>
<th>birth</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="emp:${emps}">
<td th:text="${emp.id}"></td>
<td th:text="${emp.lastName}"></td>
<td th:text="${emp.email}"></td>
<td th:text="${emp.gender}==0?'女':'男'"></td>
<td th:text="${emp.department.departmentName}"></td>
<td th:text="${#dates.format(emp.birth,'yyyy/MM/dd')}"></td>
<td>
<a class="btn btn-sm btn-primary" th:href="@{/emp/} + ${emp.id}">编辑</a>
<button th:attr="deleteUri=@{/emp/} + ${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</main>
<form id="deleteEmpForm" method="post">
<input type="hidden" name="_method" value="delete">
</form>
</div>
</div> <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="asserts/js/popper.min.js"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script> <!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js"></script>
<script>
feather.replace()
</script> <!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
lineTension: 0,
backgroundColor: 'transparent',
borderColor: '#007bff',
borderWidth: 4,
pointBackgroundColor: '#007bff'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false,
}
}
});
</script>
<script>
$(".deleteBtn").click(function(){
$("#deleteEmpForm").attr("action",$(this).attr("deleteUri")).submit();
return false;
});
</script> </body> </html>
2、新增和修改共用一个页面，内容如下
<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content=""> <title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet"> <!-- Custom styles for this template -->
<link href="asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
<style type="text/css">
/* Chart.js */ @-webkit-keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
} @keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
} .chartjs-render-monitor {
-webkit-animation: chartjs-render-animation 0.001s;
animation: chartjs-render-animation 0.001s;
}
</style>
</head> <body>
<!--引入顶部栏-->
<div th:replace="~{emp/bar::topbar}"></div> <div class="container-fluid">
<div class="row">
<!--引入侧边栏并高亮显示-->
<div th:replace="~{emp/bar::#sidebar(activeUri='emps')}"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<form th:action="@{/emp}" method="post" enctype="application/x-www-form-urlencoded">
<!--HiddenHttpMethodFilter.java中定义的-->
<!--只有修改页面才会用到这两项-->
<input type="hidden" name="_method" value="put" th:if="${emp}!=null">
<input type="hidden" name="id" th:if="${emp}!=null" th:value="${emp.id}">
<div class="form-group">
<label>LastName</label><br/>
<input name="lastName" placeholder="zhangsan" th:value="${emp}!=null?${emp.lastName}"/>
</div>
<div class="form-group">
<label>Email</label><br/>
<input name="email" placeholder="zhangsan@atguigu.com" th:value="${emp}!=null?${emp.email}"/>
</div>
<div class="form-group">
<label>Gender</label><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp}!=null?${emp.gender==1}">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp}!=null?${emp.gender==0}">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<!--提交的是部门的id-->
<select class="form-control" name="department.id">
<option th:selected="${emp}!=null?${dept.id}==${emp.department.id}" th:each="dept:${depts}" th:text="${dept.departmentName}" th:value="${dept.id}">1</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input name="birth" type="text" class="form-control" placeholder="zhangsan" th:value="${emp}!=null?${#dates.format(emp.birth,'yyyy/MM/dd')}" />
</div>
<button type="submit" class="btn btn-primary" th:text="${emp}!=null?'修改':'添加'">添加</button>
</form>
</main>
</div>
</div> <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="asserts/js/popper.min.js"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script> <!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js"></script>
<script>
feather.replace()
</script> <!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js"></script>
<script> </script> </body> </html>
3、Controller层代码如下
package com.myself.controller; import com.myself.dao.DepartmentDao;
import com.myself.dao.EmployeeDao;
import com.myself.entities.Department;
import com.myself.entities.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*; import java.util.Collection; @Controller
public class EmployeeControlller {
@Autowired
private EmployeeDao employeeDao;
@Autowired
private DepartmentDao departmentDao; @GetMapping("/emps")
public String listEmps(Model model){
Collection<Employee> emps = employeeDao.getAll();
model.addAttribute("emps",emps);
return "emp/list";
} @GetMapping("/emp")
public String toAddPage(Model model){
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
return "emp/add";
} //只需要页面少的属性和对象中的属性名对应上即可
@PostMapping("/emp")
public String addEmp(Employee employee){
employeeDao.save(employee);
return "redirect:/emps";
} //来到修改页面，查出当前员工，在页面回显
@GetMapping("/emp/{id}")
public String toEditPage(@PathVariable("id") Integer id,Model model){
Employee employee = employeeDao.get(id);
model.addAttribute("emp",employee); //页面要显示所有的部门列表
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
//回到修改页面(add是一个修改添加二合一的页面);
return "emp/add";
} //员工修改；需要提交员工id；
@PutMapping("/emp")
public String updateEmployee(Employee employee){
System.out.println("修改的员工数据："+employee);
employeeDao.save(employee);
return "redirect:/emps";
} //根据id删除员工
@DeleteMapping("/emp/{id}")
public String deleteEmployee(@PathVariable("id") int id){
System.out.println("可以删除id:" + id);
employeeDao.delete(id);
return "redirect:/emps";
}
4、默认只支持get和post形式的请求，若想发送put和delete请求，需实现如下：
a、定义form表达，请求方式为post
<form th:action="@{/emp}" method="post" >
b、定义input框，name="_method"，value="put" 或value="delete"
<input type="hidden" name="_method" value="put" th:if="${emp}!=null">
c、请求需要经过HiddenHttpMethodFilter.class处理，但是默认未开启，需要编写类继承该过滤器，并将新定义的类以组件的形式注册到容器中
package com.myself.filter; import org.springframework.stereotype.Component;
import org.springframework.web.filter.HiddenHttpMethodFilter; //修改数据的时候想用put方式发送请求，但是put不生效，每次都走post
//原因是在HiddenHttpMethodFilter.class对请求做处理后，才能识别到put请求
//而默认HiddenHttpMethodFilter.class是没有开启的，
//所以我们可以自定义一个类来继承HiddenHttpMethodFilter，并将自定义类声明为组件交给容器管理，这样就可以发送put请求了
@Component
public class MyHiddenHttpMethodFilter extends HiddenHttpMethodFilter {
} 若有理解不到之处，望指正！
0016SpringBoot实现RESTFUL形式的增删改查的更多相关文章
- 进入全屏 nodejs+express+mysql实现restful风格的增删改查示例
首先,放上项目github地址:https://github.com/codethereforam/express-mysql-demo 一.前言 之前学的java,一直用的ssm框架写后台.前段时间 ...
- nodejs+express+mysql实现restful风格的增删改查示例
首先,放上项目github地址:https://github.com/codethereforam/express-mysql-demo 一.前言 之前学的java,一直用的ssm框架写后台.前段时间 ...
- SpringMVC 之 RESTful 风格的增删改查
1. 视图和视图解析器 视图解析器 请求处理方法执行完成后,最终返回一个ModelAndView对象,对于返回String,View 或 ModelMap 等类型的处理方法, SpringMVC 也会 ...
- springmvc-实现增删改查
30. 尚硅谷_佟刚_SpringMVC_RESTRUL_CRUD_显示所有员工信息.avi现在需要使用restful风格实现增删改查,需要将post风格的请求转换成PUT 请求和DELETE 请求 ...
- RESTful最佳实践之基于 jersey 的增删改查
jersey-rest-demo 增删改查 项目地址:https://github.com/CoderDream/jersey-rest-demo 源代码:http://download.csdn.n ...
- 基于SpringBoot开发一个Restful服务，实现增删改查功能
前言 在去年的时候,在各种渠道中略微的了解了SpringBoot,在开发web项目的时候是如何的方便.快捷.但是当时并没有认真的去学习下,毕竟感觉自己在Struts和SpringMVC都用得不太熟练. ...
- Restful风格wcf调用2——增删改查
写在前面 上篇文章介绍如何将wcf项目,修改成restful风格的接口,并在上面提供了查询的功能,上篇文章中也感谢园友在评论中的提的建议,自己也思考了下,确实是那个道理.在urltemplate中,定 ...
- 如何基于Restful ABAP Programming模型开发并部署一个支持增删改查的Fiori应用
Jerry之前的文章30分钟用Restful ABAP Programming模型开发一个支持增删改查的Fiori应用 发布之后,有朋友问我,"没错, 我是在你的文章里看到了Fiori应用的 ...
- Flask一种通用视图，增删改查RESTful API的设计
模型设计是后端开发的第一步.数据模型反映了各种对象之间的相互关系. from app import db class Role(db.Model): """角色" ...
随机推荐
- Linux 指令表
Linux简介(了解) Linux介绍 Linux是类UNIX计算机的统称 Linux操作系统的内核也是Linux Linux是由芬兰大学生Linux Torvalds于1991年编写的 Linux这 ...
- 自己实现CountDownLatch
自己实现的CountDownLatch ,只是模拟他的功能而已.jdk中的实现采用的是AQS public class MyCountDownLatch { private final int tot ...
- [转帖]Linux系统进程的知识总结，进程与线程之间的纠葛...
Linux系统进程的知识总结,进程与线程之间的纠葛... https://cloud.tencent.com/developer/article/1500509 当一个程序开始执行后,在开始执行到执行 ...
- PAT(B) 1039 到底买不买（Java）字符串
题目链接:1039 到底买不买 (20 point(s)) 题目描述 小红想买些珠子做一串自己喜欢的珠串.卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖.于是小红要你帮忙判断一下,某串 ...
- PAT(B) 1033 旧键盘打字（C） 字符
题目链接:1033 旧键盘打字 (20 point(s)) 题目描述 旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是 ...
- Map、Set的基本概括
Map: 在运用map和set 集合之前首先要弄清楚它们的基本定义是什么. 简介:map是一种关联式容器,但是她储存方式是以键值对(key/value)存在的. Map用法: 定义Map集合并往集合中 ...
- 写一个RD一般需要多久？在迭代中新增的需求如何处理？如何做好项目管理？
最近总是有些初入行的小伙们,经常会问我一些他们在工作工作的中疑问,我今天挑选出几个比较典型的问题和大家一起来讨论下. 问题如下: 写一个PRD一般需要多久? 在迭代中新增的需求如何处理? 如何做好项目 ...
- jmeter保存返回数据到csv
添加一个线程组,然后右键选择“正则表达式提取器” 配置正则表达式: 添加添加后置处理器beanshell postprocessor: 保存提取的数据: 代码: FileWriter fstream ...
- 单例模式详解以及需要注意的地方(Singleton)
单例模式,顾名思义,就是在Java程序中只有唯一一个实例,这样做的好处是可以在不需要多个实例的对象采用单例模式可以节省内存,否则会造成不必要的内存浪费.单例模式的定义为:保证一个类只有一个实例,自己可 ...
- 关于http的小知识
http客户端发起请求,创建端口 http服务器在端口监听客户端请求 http服务器向客户端返回状态和内容 浏览器: 1.Chrome搜索自身的DNS缓存 2.搜索操作系统自身的DNS缓存(浏览器没有 ...