角色维护删除系列文章目录
文章目录
- 角色维护删除系列文章目录
- 22-删除-目标和思路（下一篇）
- 单条删除和批量删除怎么实现
- 批量删除和单条删除合成一套
- 思路图
- 23-后端
- ==在这里我们就@RequestBody和@ResponseBody都用到了==
- 24-前端-打开模态框
- 25-前端-执行删除
- 如何判断代码是否是动态生成的
- 前端-执行删除
- ==@RequestBody和@ResponseBody的结合使用，一段看懂==
- 26-前端-单条删除（）
- 27-前端-批量删除-全选全不选功能
- 28-前端-批量删除-收集要删除的信息
- 29-删除-小结
- ==@RequestParam和@RequestBody 小总结==
22-删除-目标和思路（下一篇）
同理，删除跟修改一样
动态生成的数据需要使用特定方式绑定函数on函数的使用，解决只有当前页面可以弹出模态框，其它页面弹不出来的问题_dom操作获取角色名称显示回显
单条删除和批量删除怎么实现
批量删除和单条删除合成一套
我们想想，我们当然可以写两个方法来进行单条删除和批量删除
但是我们其实也可以合并成一套
这样又可以少写一些代码，节约社会资源 (
单条数据删除是根据id，批量删除是根据一组id 即 数组 ，其实是可以遍历去单条删除的
后端只处理一种情况即可，就只处理数组的情况，在前端去做处理即可
思路图
23-后端
主要是SSM框架太强大了，我们简单增删改查，根本就不需要写sql
所以目前后端看起来特别简单，直接调用就好了
有两种方式，一种是循环
我们这里直接使用第2种方式，第一种方式也知道就行了我们这里主要是学习第2种方式，开阔视野
内部也是用了各种封装
在这里我们就@RequestBody和@ResponseBody都用到了
如果没有 @RequestBody，我们就没办法在前端去通过ajax传入json数据的data，，相当于我们没办法通过ajax传参过来到后端，必须借助@RequestBody下面就是前端要怎么写
首先前端的思路我们要先知道
24-前端-打开模态框
要想把模态框打开，必须得先有模态框
写一个临时的测代码测试 一下上面这段代码
有点靠边，我们做一个居中一点的
千万别忘记清除旧数据，否则会一直叠加
点击确认以后把数据发送给后端，我们可以想到，这肯定是ajax了
25-前端-执行删除
如何判断代码是否是动态生成的
这说明模态框里面的这个代码不是动态生成的
前端-执行删除
所以我们可以这么写，而不需要向前面修改一样去使用 on，动态生成的就要用on，不是动态生成的可以不用on，
逻辑是，点击删除后，会弹出模态框，让我们确认是否真的删除
我们这里真正触发删除的是确认删除按钮，而不是删除，
而确认删除按钮是模态框里面的，不是js动态生成的，所以不用on
我们要把什么发给后台
我们要把id 数组发给后台
但是这个东西怎么去获取
回过头看 my -role.js 里面怎么写
隔着几个函数，所以我们要考虑用全局变量
@RequestBody和@ResponseBody的结合使用，一段看懂
举个例子
前端：
后端接收数据：
这样就可以接收数据，只要传过来的参数跟实体的属性一致便可传参，其实很简单对不对
前端请求传Json对象则后端使用@RequestParam；
前端请求传Json对象的字符串则后端使用@RequestBody，参数类型有要求，必须是对象或者对象数组，只要传过来的参数跟实体的属性一致便可传参
扯回来
当请求体是json数据的时候，我们就必须要告诉服务器
后面的部分，可以复制一下其它的ajax方法改改即可
下面看不一样的部分怎么去写
26-前端-单条删除（）
前面已经讲过，这里为了结合批量删除的理解 我们再说一遍
首先注意，这里每一行数据的删除按钮 是js动态生成的，所以绑定这个按钮的事件 要用on
整理一下代码
下面就是看批量删除
27-前端-批量删除-全选全不选功能
首先要给这个全选按钮绑定单击函数
正确的在这
那么如何根据多选框的状态去设置其它的选择框的状态呢？
反过来怎么做，这里需要注意，这个是动态生成的，所以我们需要 on
复制一下前面的on是怎么写的
非常巧妙
下面我们看结果
全选、全不选就完成了
下面就是批量删除按钮要具体怎么写
28-前端-批量删除-收集要删除的信息
绑定单击函数，需要有id，我们加个id
首先我们要知道被勾选的是哪些
为啥这么写，，我们分析一下
有一种情况是什么都没有选，用户就点了（批量）删除
这种情况要怎么处理，在代码里面怎么写
测试
如果没有选择
如果选择了
bug 解决
全选删除完成后，，全选按钮没有复原
29-删除-小结
代码自己模拟写一遍
比如做个商品管理
@RequestParam和@RequestBody 小总结
总结一下就是 三种前端传参方式，对应后端三种不同的接收参数的方式
