HTML5教程

项目一众筹网04_4_角色维护删除_单条删除和批量删除怎么实现_确认提示,,你真的要删除吗__@RequestBody和@ResponseBody结合使用_全选功能_前端获取id发到后端_ajax发送

本文主要是介绍项目一众筹网04_4_角色维护删除_单条删除和批量删除怎么实现_确认提示,,你真的要删除吗__@RequestBody和@ResponseBody结合使用_全选功能_前端获取id发到后端_ajax发送,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

角色维护删除系列文章目录

文章目录

  • 角色维护删除系列文章目录
  • 22-删除-目标和思路(下一篇)
    • 单条删除和批量删除怎么实现
    • 批量删除和单条删除合成一套
    • 思路图
  • 23-后端
    • 在这里我们就@RequestBody和@ResponseBody都用到了
  • 24-前端-打开模态框
  • 25-前端-执行删除
    • 如何判断代码是否是动态生成的
    • 前端-执行删除
    • ==@RequestBody和@ResponseBody的结合使用,一段看懂==
  • 26-前端-单条删除()
  • 27-前端-批量删除-全选全不选功能
  • 28-前端-批量删除-收集要删除的信息
  • 29-删除-小结

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 数组发给后台
但是这个东西怎么去获取
最前端在这里, 26-前端-单条删除,继续往下会说到
在这里插入图片描述
在这里插入图片描述
回过头看 my -role.js 里面怎么写
在这里插入图片描述
隔着几个函数,所以我们要考虑用全局变量
在这里插入图片描述

在这里插入图片描述

@RequestBody和@ResponseBody的结合使用,一段看懂

在这里插入图片描述
当请求体是json数据的时候,我们就必须要告诉服务器
在这里插入图片描述
后面的部分,可以复制一下其它的ajax方法改改即可
在这里插入图片描述
在这里插入图片描述
下面看不一样的部分怎么去写

26-前端-单条删除()

前面已经讲过,这里为了结合批量删除的理解 我们再说一遍
首先注意,这里每一行数据的删除按钮 是js动态生成的,所以绑定这个按钮的事件 要用on
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
整理一下代码
在这里插入图片描述
下面就是看批量删除

27-前端-批量删除-全选全不选功能

在这里插入图片描述
首先要给这个全选按钮绑定单击函数
在这里插入图片描述
正确的在这
在这里插入图片描述

在这里插入图片描述
那么如何根据多选框的状态去设置其它的选择框的状态呢?
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
反过来怎么做,这里需要注意,这个是动态生成的,所以我们需要 on
复制一下前面的on是怎么写的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
非常巧妙
下面我们看结果

在这里插入图片描述

全选、全不选就完成了
下面就是批量删除按钮要具体怎么写

28-前端-批量删除-收集要删除的信息

绑定单击函数,需要有id,我们加个id
在这里插入图片描述
首先我们要知道被勾选的是哪些
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
为啥这么写,,我们分析一下
在这里插入图片描述
在这里插入图片描述
有一种情况是什么都没有选,用户就点了(批量)删除
这种情况要怎么处理,在代码里面怎么写
在这里插入图片描述
测试
如果没有选择
在这里插入图片描述
如果选择了
在这里插入图片描述
bug 解决
全选删除完成后,,全选按钮没有复原
在这里插入图片描述
在这里插入图片描述

29-删除-小结

代码自己模拟写一遍
比如做个商品管理

这篇关于项目一众筹网04_4_角色维护删除_单条删除和批量删除怎么实现_确认提示,,你真的要删除吗__@RequestBody和@ResponseBody结合使用_全选功能_前端获取id发到后端_ajax发送的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!