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): """角色" ...
随机推荐
- CF1277D Let's Play the Words?
思路: 字符串其实只有0...0, 0...1, 1...0, 1...1四种. 实现: #include <bits/stdc++.h> using namespace std; ]; ...
- httpsqs消息队安装
HTTPSQS(HTTP Simple Queue Service)是一款基于 HTTP GET/POST 协议的轻量级开源简单消息队列服务,使用 Tokyo Cabinet 的 B+Tree Key ...
- （零）linux 学习 -- 从 shell 开始
The Linux Command Line 读书笔记 - 部分内容来自 http://billie66.github.io/TLCL/book/chap02.html 文章目录 前言 什么是 she ...
- 【已解决】每次打开Excel时会同时打开一个空的Excel表格
每次打开Excel时会同时打开一个空的Excel表格,情况如图. 官方解法如下,本人验证有效: 方法1, 请到以后路径中检查是否存在与空白文件夹同名字的Excel文件,删除它. C:\Users\\A ...
- 学习RadonDB源码（三）
1. 所谓第四代语言 SQL是一种典型的第四代语言,即4GL,这种语言的突出特点是编写者不需要关注怎么做,只需要告诉系统我要什么就可以. 虽然4GL是这样的一种语言,大大简化了编写者的编写难度,其实底 ...
- iTunes向ipad传影片
iTunes向ipad传影片(方法一) 在电脑上用itunes传视频到ipad-百度经验 iTunes向ipad传影片(方法二)
- PB笔记之调用数据窗口时的过滤条件添加方式
在PB查询数据窗口的数据时 通常可以有两种方式 一是在数据窗口事先写好查询条件,然后用retrieve()函数通过参数传递给数据窗口 这种方式适合查询条件较为简单,条件数较少的数据窗口 二是使用Set ...
- session和cookie有什么区别?
1.存储位置不同 cookie的数据信息存放在客户端浏览器上. session的数据信息存放在服务器上. 2.存储容量不同 单个cookie保存的数据<=4KB,一个站点最多保存20个Cooki ...
- Linux 服务器修改时间与时间同步
设置时间 date --set '2015-11-23 0:10:40' # 方法一,通用 timedatectl set-time '2015-11-23 08:10:40' # 容器内可能不支持 ...
- netty--使用注意事项