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): """角色" ...
随机推荐
- 最新 苏州朗动java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.苏州朗动等10家互联网公司的校招Offer,因为某些自身原因最终选择了苏州朗动.6.7月主要是做系统复习.项目复盘.Leet ...
- SORRY_FOR_MY_LIFE
人生最大的痛苦不在于真正的痛苦, 而是没有确切的人生方向, 我们总是想的很多, 但是最后才发现, 我们一直拿自己的弱点与别人的长处竞争, 因为,我们总是得不到自己想要的, 但是最多的是对于没有目标的人 ...
- Qt 编译出错“undefined reference to `vtable for”
1. 有时,如果将某个类改为继承自QObject类(以前不继承自该类),编译时会出错. 解决: clean Project, run qmake, rebulid都运行一遍,好了! 因为qmake生成 ...
- 剪切板工具：Ditto
DittoClipboard manager; 剪贴板工具https://ditto-cp.sourceforge.io/ 参考资料 https://www.liutf.com/posts/37207 ...
- PHP被忽略的基础知识
目录 下列PHP配置项中,哪一个和安全最不相关:() 字符串比较函数 格林时间 在PHP面向对象中,下面关于final修饰符描述错误的是( ) getdate()函数返回的值的数据类型是:( ) 关于 ...
- MySQL常用的系统函数
MySQL常用的系统函数 2019年01月17日 17:49:14 pan_junbiao 阅读数 155 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csd ...
- 关于工作中.net转java遇到的一个远程调用传递重复参的问题。
工作中遇到一个很奇怪的传参问题.之前.net使用的是一个List列表,列表中有几个重复的参数.列表中使用的model类是KeyValue. 我使用java模仿其写法,传递List和KeyValue.对 ...
- hashCode和identifyHashCode的区别
API: System类提供一个identifyHashCode(Object o)的方法,该方法返回指定对象的精确hashCode值,也是根据该对象的地址计算得到的HashCode值.当某个类的ha ...
- 20191113-Linux+robotframework+jenkins配置自动化测试2
第八步:配置jenkins 安装JDK a) yum install java-1.8.0-openjdk java-1.8.0-openjdk-devel 配置环境变量 a) vi ...
- AVR单片机教程——EasyElectronics Library v1.0手册
更新:EasyElectronics Library v1.1手册 索引: bit.h delay.h pin.h tone.h pwm.h uart.h adc.h led.h rgbw.h seg ...