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): """角色" ...
随机推荐
- charles Windows 安装
本文参考:charles Windows 安装 在实际开发.测试中需要通过代理截取 app 的网络请求报文来快速定位问题.https 双向认证的 app 越来越多,fiddler在这方面并不好用.由于 ...
- Django_图片的上传下载显示配置
图片上传的配置 image = models.ImageField(upload_to='org/%Y/%m',...) upload_to默认是上传到项目的'MEDIA_ROOT/org/%Y/%m ...
- Ubuntu 18.04 使用标准Ubuntu 仓库进行自动化安装NVIDIA驱动
首先,检测你的NVIDIA显卡型号和推荐的驱动程序的模型.在命令行中输入如下命令: $ ubuntu-drivers devices == /sys/devices/pci0000:/::::00.0 ...
- 洛谷 题解 P1550 【[USACO08OCT]打井Watering Hole】
本题看似很难,实际上思路非常简单--如果你想通了. 首先有一个问题:图中有几个点?大部分的人会回答\(n\)个点.错了,有\(n+1\)个. 多出来的那个点在哪?关键在于你要理解每一个决策的意义.实际 ...
- TCP/IP学习笔记7--TCP/IP模型通信例子学习
"一位如蝴蝶般美丽的女子向我飞来,翩翩的舞姿如同云端轻盈的叶儿." -------------------------------------------------------- ...
- C++ 用 vector 生成三维数组，并计算行、列、高
//Microsoft Visual Studio 2015 Enterprise //用vector生成三维数组,并计算行.列.高 #include <iostream> #includ ...
- 函数的第一类对象,f格式化,迭代器以及递归
函数名的第一类对象及使用,f格式化以及迭代器 1.函数的第一类对象 第一类对象 --特殊点 1.可以当作值被赋值给变量 def func(): print(1) a = func a() 2.可以当作 ...
- PowerBuilder学习笔记之2PowerScript语言（二）
z教材地址:https://wenku.baidu.com/view/1e82d26925c52cc58ad6be05.html?sxts=1565679996440 2.4数组 声明数组:Integ ...
- Springboot对JPA的支持及使用
目的: 1.springboot之jpa支持 2.Springboot+bootstrap界面版之增删改查及图片上传 springboot之jpa支持 导入相关pom依赖 <dependency ...
- 快速批量删除 docker 镜像或容器
原文:快速批量删除 docker 镜像或容器 点击在我的博客 xuxusheng.com 中查看,有更好的排版哦~ docker 本身并没有提供批量删除的功能,当有大量的镜像或者容器需要删除的时候,手 ...