4_5.springboot2.x之Web开发RestfulCRUD操作
1)、RestfulCRUD:CRUD满足Rest风格
URI: /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作
普通CRUD(uri来区分操作) | RestfulCRUD | |
---|---|---|
查询 | getEmp | emp—GET |
添加 | addEmp?xxx | emp—POST |
修改 | updateEmp?id=xxx&xxx=xx | emp/{id}—PUT |
删除 | deleteEmp?id=1 | emp/{id}—DELETE |
2)、实验的请求架构
实验功能 | 请求URI | 请求方式 |
---|---|---|
查询所有员工 | emps | GET |
查询某个员工(来到修改页面) | emp/1 | GET |
来到添加页面 | emp | GET |
添加员工 | emp | POST |
来到修改页面(查出员工进行信息回显) | emp/1 | GET |
修改员工 | emp | PUT |
删除员工 | emp/1 | DELETE |
1、CRUD-员工列表
thymeleaf公共页面元素抽取
1、抽取公共片段
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
2、引入公共片段
<div th:insert="~{footer :: copy}"></div>
~{templatename::selector}:模板名::选择器
~{templatename::fragmentname}:模板名::片段名
3、默认效果:
insert的公共片段在div标签中
如果使用th:insert等属性进行引入,可以不用写~{}:
行内写法可以加上:[[~{}]];[(~{})];
三种引入公共片段的th属性:
th:insert:将公共片段整个插入到声明引入的元素中
th:replace:将声明引入的元素替换为公共片段
th:include:将被引入的片段的内容包含进这个标签中
引入片段的时候传入参数:
<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active"
th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"
href="#" th:href="@{/main.html}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<!--引入侧边栏;传入参数-->
<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
员工列表:
<tr th:each="emp:${emps}">
<td th:text="${emp.id}"></td>
<td>[[${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 HH:mm')}"></td>
<td>
<a th:href="@{/emp/}+${emp.id}" class="btn btn-sm btn-primary">编辑</a>
<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
</td>
</tr>
controller
@Controller
public class EmpController {
@Autowired
private EmployeeDao employeeDao;
@Autowired
private DepartmentDao departmentDao;
/*
* @Author: jiatp
* Description:查询员工返回列表页面
*/
@GetMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
//放在作用域中
model.addAttribute("emps",employees);
//thymeleaf默认就会拼接串 classpath:/templates/ xxx.html
return "emp/list";
}
2、CRUD-员工添加
添加页面的展示:
/*
* @Author: jiatp
* Description:员工添加页面的显示
*/
@GetMapping("/emp")
public String toAddPage(Model model){
//查出所有的部门
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
//来到添加页面
return "emp/add";
}
添加的页面:
<form>
<div class="form-group">
<label>LastName</label>
<input type="text" class="form-control" placeholder="zhangsan">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" placeholder="zhangsan@atguigu.com">
</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">
<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">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" class="form-control" placeholder="zhangsan">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>
注意:提交的数据格式不对:生日:日期;
2017-12-12;2017/12/12;2017.12.12;
日期的格式化;SpringMVC将页面提交的值需要转换为指定的类型;
2017-12-12—Date; 类型转换,格式化;
默认日期是按照/的方式;
可以在springmvc配置类中添加实现日期格式化方法:
@Configuration//扩展springmvc功能
public class MyMvcConfig implements WebMvcConfigurer {
@Override
public void addFormatters(FormatterRegistry registry) {
registry.addFormatter(new DateFormatter("yyyy-MM-dd"));
}
}
或者properties中添加:
application.properties中添加
spring.jackson.date-format=yyyy-MM-dd
controller添加的方法:
/*
* @Author: jiatp
* Description:员工添加
*/
@PostMapping("/emp")
public String addEmp(Employee employee){
//打印一下员工信息
System.out.println(employee);
employeeDao.save(employee);
//这里不能用/emps,thymeleaf默认会将该值进行模板引擎下查找,
//redirect 重定向到一个地址,/带边当前项目路径 forward:表示转发到一个地址
return "redirect:/emps";
}
3、CRUD-员工修改
修改员工页面:查出当前员工并且进行回显
/*
* @Author: jiatp
* Description:来到修改页面,查出当前员工在页面进行回显
*/
@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";
}
重用add.html(修改和添加页面展示)
<main role="main" th:href="@{/emp}" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<form th:action="@{/emp}" method="post">
<!--请求方式:post:请求员工添加 put:员工的修改-->
<!--
1.配置请求方式:springmvc中配置hiddenHttpMethodFilter;将请求转换成指定的方式
2.创建一个post页面表单
3.创建一个input项,name=_method,值就是指定的方式
-->
<input type="hidden" name="_method" value="put" th:if="${emp!=null}">
<input type="hidden" th:value="${emp.id}" name="id" th:if="${emp!=null}">
<div class="form-group">
<label>LastName</label>
<input type="text" name="lastName" class="form-control" th:value="${emp!=null}?${emp.lastName}" placeholder="zhangsan">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" th:value="${emp!=null}?${emp.email}" placeholder="zhangsan@atguigu.com">
</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" th:checked="${emp!=null}?${emp.gender==1}" value="1">
<label class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" th:checked="${emp!=null}?${emp.gender==0}" value="0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<select class="form-control" name="department.id">
<option th:value="${dept.id}" th:selected="${emp!=null}?${emp.department.id==dept.id}" th:each="dept:${depts}">[[${dept.departmentName}]]</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" name="birth" class="form-control" th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd')}" placeholder="zhangsan">
</div>
<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
</form>
注意:<请求方式:post:请求员工添加 put:员工的修改
springmvc中:
1.配置请求方式:springmvc中配置hiddenHttpMethodFilter;将请求转换成指定的方式(springboot已配置好)
2.创建一个post页面表单
3.创建一个input项,name=_method,值就是指定的方式
<input type="hidden" name="_method" value="put" th:if="${emp!=null}">
<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
区分修改和添加功能:如果emp是null则是添加,反之为修改;修改和添加按钮:
员工修改的controller:
/*
* @Author: jiatp
* Description:员工的修改
*/
@PutMapping("/emp")
public String updateEmployee(Employee employee){
System.out.println("修改的员工数据"+employee);
employeeDao.save(employee);
return "redirect:/emps";
}
4、CRUD-员工删除
删除按钮:
<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
<form id="deleteEmpForm" method="post">
<input type="hidden" name="_method" value="delete"/>
</form>
<script>
$(".deleteBtn").click(function(){
//删除当前员工的
$("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
return false;
});
</script>
点删除按钮时 每一行添加自定义属性attr="del_uri=@{/emp/}+${emp.id},用js提交表单,将自定义的属性添加到form表单action属性中
4_5.springboot2.x之Web开发RestfulCRUD操作的更多相关文章
- 移动web开发ajax缓存操作
移动web开发过程中网速是必须考虑的一个因素,所以一般是尽可能的在本地存储数据,避免弱网环境下请求数据失败导致页面没有内容的情况. 前后端分离是web开发的必然趋势,在PC端我们有时甚至为了避免aja ...
- 四、Spring Boot Web开发
四.Web开发 1.简介 使用SpringBoot: 1).创建SpringBoot应用,选中我们需要的模块: 2).SpringBoot已经默认将这些场景配置好了,只需要在配置文件中指定少量配置就可 ...
- SpringBoot与Web开发
web开发1).创建SpringBoot应用,选中我们需要的模块:2).SpringBoot已经默认将这些场景已经配置好了,只需要在配置文件中指定少量配置就可以运行起来3).自己编写业务代码: 自动配 ...
- SpringBoot:Web开发
西部开源-秦疆老师:基于SpringBoot 2.1.6 的博客教程 , 基于atguigu 1.5.x 视频优化 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处 ...
- 为什么做java的web开发我们会使用struts2,springMVC和spring这样的框架?
今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制层的技术框架由struts2迁移到springMVC,我突然有了一个新的疑 ...
- 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践
提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...
- .NET Web开发技术简单整理
在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...
- 移动端 Web 开发前端知识整理
文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...
- Redis的Python实践,以及四中常用应用场景详解——学习董伟明老师的《Python Web开发实践》
首先,简单介绍:Redis是一个基于内存的键值对存储系统,常用作数据库.缓存和消息代理. 支持:字符串,字典,列表,集合,有序集合,位图(bitmaps),地理位置,HyperLogLog等多种数据结 ...
随机推荐
- 语音识别(Web Speech API)
近期看了一个语音识别的dome-----Web Speech API 本api为js调用云端接口识别 个人测试了一下,响应速度还是比较快的 注意:本API与官网需翻墙使用和访问 展示效果: 页面代码如 ...
- BZOJ 4596: [Shoi2016]黑暗前的幻想乡(容斥+Matrix_Tree)
传送门 解题思路 看到计数想容斥--\(from\) \(shadowice1984\)大爷.首先求出原图的生成树个数比较容易,直接上矩阵树定理,但这样会多算一点东西,会把\(n-2\)个公司的多算进 ...
- csp-s模拟测试93
csp-s模拟测试93 自闭场. $T1$想到$CDQ$,因为复杂度少看见一个$0$打了半年还用了$sort$直接废掉,$T2$,$T3$直接自闭暴力分都没有.考场太慌了,心态不好. 02:07:34 ...
- Caused by: java.sql.SQLSyntaxErrorException: ORA-00932: 数据类型不一致: 应为 NUMBER, 但却获得 BINARY
at org.springframework.aop.framework.ReflectiveMethodInvocation.invokeJoinpoint(ReflectiveMethodInvo ...
- postgresql-创建主键自增的表
之前一直用的mysql,这个也基本上是主流,主键自增是很多建表规范中的硬性要求,不过这两种数据库主键自增的区别还是很大的 通常navicat中对mysql 主键自增直接客户端指定即可,不过对PG貌似不 ...
- Pathfinding 模板题 /// BFS oj21413
题目大意: Description Bessie is stranded on a deserted arctic island and wants to determine all the path ...
- 2018自己的JavaScript开发指南
这是一个备忘清单,可以让你在不用做太多选择的情况下快速学习.我会列出一些工具来满足大部分场景下的前端开发.当你看完这篇文章,你会有足够的自信来调整你的技术栈. ☉概要 我会将地图划分为你需要解决的问题 ...
- Centos6.5离线安装gcc
木有网的centos折腾起来简直费劲的不要不要的~ 学校的虚拟机最开始只安装了一个libgcc-4.4.7-4,然而这是不够用的,比如安装软件的时候,需要输入"./configure&quo ...
- iOS开发系列-Foundation与CoreFoundation内存管理
概述 对于初学者来说,可能仅只能将ARC用在objective-c对象上(也即继承自NSObject的对象),但是如果涉及到较为底层的东西,比如Core Foundation中的malloc()或者f ...
- 关于webpack一些路径
好多新手对webpack中的路径一直感到迷茫,其实再学习webpack之前都应该去了解下nodejs的内容, 以为webpack就是个nodejs项目,所以里面涉及到的路径都是nodejs里面的写法 ...