当前课程知识点:软件开发实训--动态网站开发 >  7 用户管理功能实现二 >  7.4多个用户删除实现 >  7.4.1多个用户删除实现

返回《软件开发实训--动态网站开发》慕课在线视频课程列表

7.4.1多个用户删除实现在线视频

下一节:8.1.1用户列表分页基本实现

返回《软件开发实训--动态网站开发》慕课在线视频列表

7.4.1多个用户删除实现课程教案、知识点、字幕

同学你好

欢迎回到软件开发实训课堂

上节课咱们讲了如何去删除一个用户的操作

那么对于删除多个用户该如何实现呢

为了完成一次性删除多个用户的话

我们需要选择框,一个复选框

是需要一个删除的按钮

同样的,打开我们的listusers

这个模板

在我们的搜索按钮之后

加一个删除按钮

这个按钮我们可以给它颜色为红色

那么当删除按钮被点击时

它应该执行的是

多个删除操作

那么既然要选择多个

我们就需要有一个复选框

在我们的tbody的数据区域

第一个单元格里

我们增加复选框

同时把它原来显示的内容放在一个span中

复选框绑定

一个值

我们这里是th value

它绑定的值是uid

然后我们给他一个class

就叫做cuid

有了这一行以后呢

我们在界面上就可以看到每一条数据的前面

会有一个复选框

然后我们给它添加事件

当我们点击这个复选框时

我们去把所有被选择到的复选框

都给它记录下来

我们在这里定义一个对象

叫uids

而uids的对象里有一个数组

现在我们来处理它

因为我们是文档加载完成之后才执行的

所以我这里直接就可以写

cuid这个类的可立刻实践了

因为标签已经加载完成了

当点击它的时候

我们获取所有的cuid

并且被选中的cuid

把它都拿到

然后进行each处理

也就是对它的每一个被选择的复选框进行处理

处理它什么呢

把它的值填充进去

这里边需要注意是两次uids

把复选框的值

填充上

要注意

这里面我们可以看到用冒号check的

这个val呢

我们得到了所有被选择的复选框

然后把它们的值放到了uids里边

uids然后我们去点击删除按钮

当我们点击删除按钮时

注意这个删除按钮和我们

单条数据的删除按钮不一样

所以我们给它加一个S

然后我们去处理它

多一个S

当点击这个按钮时,我们执行这个动作

这是多条信息删除

它删除的时候

首先我们来判断uid是否为空

uids.uids.length小于等于0

我们就不让它有任何动作

但是如果它有数据了

我们就得确认是否删除

提示用户

这里是“确认要删除被选择的信息吗”

一样的这个操作不可恢复

也可以加上请谨慎操作等等

如果说用户点击的是确定

我确定要删除

这个时候我们应该删除它的信息

首先是把信息变成json数据

然后呢 提交删除操作

location.href 我们用的是json传递

所以这里边直接删除就行了

users

/+json

现在我们就来测试一下

我们先去添加几个用户

再来添加

每次我们都去地址栏输入信息

显得非常的不方便

为了解决这个问题

我们在列表页添加一个按钮

专门来转向到添加

在我们的删除后面

加一个超链接

这里我们可以用动态计算地址

地址是/

edituser

我们是新加

所以不需要参数

这里写添加用户

class呢

btn -primary

我们依然用蓝色的

可以把它放在删除的前面

这个class样式

少了一个btn

然后回过来就可以了

现在我们要添加只需要点击添加用户这个按钮

就会进入到添加里边去

看一下,下面的信息

不是唯一的id#password

这个信息来自于哪里呢

就是隐藏的password这块值

我们来看一下

这是因为我们对password进行处理的时候

出现了两个

一个隐藏的password

这是为了避免空的问题

那么我们可以让它不出现

什么时候出现呢

和下面这个是相反的

那就是把这个条件同样的拿过来

条件是一样

只不过一个用的是if条件

一个用的是unless条件

这样它们两个就会错开

现在我们来看一下

多个删除是否能够成功

我们把3和4选中

然后点击删除操作

可见它已经进入到删除

然后提示了这么一个信息

我们如果点击取消的话

它没有动作

当我们点击确定他应该删除这条信息

看一下我们点击删除后

它给出的消息是这样子的

这里出现了一个错误的请求

这是因为我们使用了

控制器里面使用的是

Get请求模式

也就是串里面uids它的格式

是不被允许的

那么要想允许我们需要进行url的编码转换

为了解决这个问题

我们直接使用post请求来传递数据

但是post的请求

当我们请求完成后

就发送到listusers里边去

这样的话让它去转向到列表页了

可是我们在界面上如何来传递post

这就需要我们来做一个简单的处理

怎么来处理呢

找到我们的删除按钮

在这里我们添加一个隐藏域

这个隐藏域

我们就放一个uids这样的Json字符串

给它一个ID为deleteuids

这样我们能快速的获取到隐藏的域

当我们得到的时候

先去填充它

用jQuery来填充

把json字符串给它填充进去

然后我们提交表单要注意

这个表单它提交给的是listusers

这已经不是我们要的表单了

所以我们要对表单的action进行修改

我们把它叫form1

这样

我们讲form1

改变它的action属性

改成什么呢

deleteusers

然后将form1提交就可以了

这是借助于别的form来提交的一种方式

当然你也可以不这么做

用ajaxs的请求方式也是可以的

我们这里用了一个表单来提交他

同样的

在控制器这边

deletes方法的就不能从路径来获取这个uids了

它直接通过参数来获取

我们来看一下是否能够拿得到这个数据

刷新我们的列表页

然后选择两条数据

点击删除

这里边我们看到了有一个user

它的值为空

看发生了什么信息删除实例

被传递到一个空对象

我们来看它既然是空的话

我们就在这里来看一下它提交过来的数据

我们可以用拦截

也可以直接去输出一下

看一下我们的输出

刷新界面我们提交的情况

正好赶到我们服务器重启

点击删除

看一下

过来的信息是这样子的

也就是说它把所有的内容都转换成了字符串

它也确实数据获得到了

也就是说uids传递过来了

然后我们解析成为json数据

看对象

通过uids我们得到一个json数组

uids得到json数组

“10” “9” “10”

为什么是这样子

多了一个数据

我们只选择了两个

也就是说它删除第三个的时候

发现这个user已经不存在了

这是怎么回事呢

我们来看一下

问题

我们先把它输出来

通过控制台

我们就可以得到

我们到底输出了什么

选择3和4

我们先不要去提交

这样的话

我们就能够快速的看到它

否则的话它太快一闪而过

看一下

它已经选择了两个

这个是怎么得到的呢

还是我们前面

当我们点击时

我们对所有的代码进行处理

可是每次点击我们都进行了push

所以它出现了重复

当我们点击第一次时

它把选中的数据放到里边了

当我们点击第二次时

它又放进去了

可我们当点第三次时

它依然会把它不停的放进去

每次都从头把全部选择的信息放进去

因此上我们需要在点击的时候

对它进行一次初始化

让它置空

这样避免它

把重复性的数据把上一次

填充的数据

这次又给填充一遍

刷新我们来看一下

这样就正常了

回过头来,把我们注示的表单提交

给它去掉

刷新后我们来删除

已经正常删除了

这就是我们关于删除操作的处理

包括一条信息的删除

和多条信息同时删除的方式

下去以后一定要把它多练习

关于多个用户信息的删除

就讲到这里

下节课我们再见

软件开发实训--动态网站开发课程列表:

1 前端需求分析

-1.1课程介绍

--1.1.1课程介绍

--1.1.2课程介绍PPT

--1.1.3随堂测试

-1.2网站需求分析

--1.2.2网站需求分析

--1.2.3需求PPT

--1.2.4随堂测试

-1.3网站首页分析

--1.3.1网站首页分析

--1.3.2首页分析PPT

--1.3.3随堂测试

-1.4导航菜单分析

--1.4.1导航菜单分析

--1.4.2课程PPT

--1.4.3随堂测试

-1.5内容区域分析

--1.5.1内容区域分析

--1.5.2课程PPT

--1.5.3随堂测试

-1.6内容副页面分析

--1.6.1副页面分析

--1.6.2课程PPT

--1.6.3软件系统需求分析

-1.7编写需求文档

-1.8需求分析理解

2 后端分析

-2.1后端页面总体分析

--2.1.1后端页面总体设计

--2.1.2课程PPT

--2.1.3随堂测试

-2.2用户管理功能设计

--2.2.1用户管理功能分析

--2.2.2课程PPT

--2.2.3随堂测试

-2.3内容与分类功能分析

--2.3.1内容与分类功能分析

--2.3.2课程PPT

--2.3.3随堂测试

-2.4网站配置功能设计

--2.4.1网站配置功能设计

--2.4.2课程PPT

--2.4.3软件系统设计

--2.4.4随堂测试

-2.5数据库及表结构分析

--2.5.1数据库及表结构分析

--2.5.2课程PPT

--2.5.3数据库设计

-总体设计文档

3 接口设计

-3.1前台模板约定

--3.1.1前台模板约定

--3.1.2课程PPT

--3.1.3随堂测试

-3.2网站配置接口设计

--3.2.1网站配置接口设计

--3.2.2课程PPT

--3.2.3随堂测试

-3.3菜单接口设计

--3.3.1菜单接口设计

--3.3.2课程PPT

--3.3.3随堂测试

-3.4内容接口设计

--3.4.1内容接口设计

--3.4.2课程PPT

--3.4.3随堂测试

-3.5幻灯片接口设计

--3.5.1幻灯片接口设计

--3.5.2课程PPT

--3.5.3随堂测试

-补充设计文档

-3.7接口设计

4 功能设计

-4.1用户管理功能设计

--4.1.1用户管理功能设计

--4.1.2课程PPT

--4.1.3随堂测试

-4.2菜单管理功能设计

--4.2.1菜单管理功能设计

--4.2.2课程PPT

--4.2.3随堂测试

-4.3内容管理功能设计

--4.3.1内容管理功能设计

--4.3.2课程PPT

--4.3.3随堂测试

-4.4网站配置信息设计

--4.4.1网站配置信息设计

--4.4.2课程PPT

--4.4.3随堂测试

-完成设计文档

-4.6随堂测试

5 环境搭建与开发

-5.1开发环境搭建

--5.1.1环境搭建

--5.1.2随堂测试

-5.2Web前端环境搭建

--5.2.1Web前端环境

-5.3创建用户实体

--5.3.1用户实体创建

--5.3.2随堂测试

-5.4用户实体表创建与初始化

--5.4.1用户实体表创建与初始化

--5.4.2随堂测试

-5.5用户数据访问接口实现

--5.5.1用户数据访问接口实现

--5.5.2随堂测试

-5.6环境搭建问题

-5.7环境搭建问题

6 用户管理功能实现

-6.1用户服务层接口实现

--6.1.1用户服务层接口实现

--6.1.2随堂测试

-6.2用户列表和编辑控制器实现

--6.2.1用户列表和编辑控制器实现

--6.2.2随堂测试

-6.3用户存储和删除控制器实现

--6.3.1用户存储和删除控制器实现

-6.4用户添加、编辑界面实现

--6.4.1用户添加、编辑界面实现

-6.5用户管理添加用户调试

--6.5.1用户管理添加用户调试

-6.6开发

7 用户管理功能实现二

-7.1用户查询模板实现

--7.1.1用户查询模板实现

--7.1.2随堂测试

-7.2用户信息编辑的实现

--7.2.1用户信息编辑的实现

-7.3单个用户删除实现

--7.3.2单个用户删除实现

-7.4多个用户删除实现

--7.4.1多个用户删除实现

8 用户管理功能实现三

-8.1用户列表分页基本实现

--8.1.1用户列表分页基本实现

-8.2用户列表查询结果分页实现

--8.2.1用户列表查询结果分页实现

-8.3通用日期处理

--8.3.1通用日期处理

-8.4整型日期处理

--8.4.1整型日期处理

--8.4.2随堂测试

-8.5枚举数据的应用

--8.5.1枚举数据的应用

--8.5.2Spring Boot开发

9 后台主界面实现

-9.1登录逻辑实现

--9.1.1登录逻辑实现

--9.1.2随堂测试

-9.2登录界面及流程调试

--9.2.1登录界面及流程调试

--9.2.2随堂测试

-9.3管理主界面实现

--9.3.1管理主界面实现

--9.3.2随堂测试

-9.4授权验证拦截器实现

--9.4.1授权验证拦截器实现

--9.4.2随堂测试

-9.5拦截器调试

--9.5.1拦截器调试

10 分类管理实现

-10.1分类接口实现

--10.1.1分类接口实现

-10.2分类添加、编辑实现

--10.2.1分类添加、编辑实现

-10.3分类树结构实现

--10.3.1分类树结构实现

-10.4分类删除实现

--10.4.1分类删除实现

--10.4.2随堂测试

11 内容管理实现

-11.1内容实体定义

--11.1.1内容实体定义

-11.2相关接口定义

--11.2.1相关接口定义

-11.3服务接口实现

--11.3.1服务接口实现

-11.4内容添加、编辑模板实现

--11.4.1内容添加、编辑模板实现

-11.5内容添加、编辑控制器实现

--11.5.1内容添加、编辑控制器实现

-11.6内容检索页面实现

--11.6.1内容检索页面实现

-11.7内容分类树实现

--11.7.1内容分类树实现

12 UEditor富文本编辑器

-12.1修改UEditor相关问题

--12.1.1修改UEditor相关问题

-12.2整合UEditor到内容编辑界面

--12.2.1整合UEditor到内容编辑界面

-12.3UEditor图片对话框应用

--12.3.1UEditor图片对话框应用

-12.4文件上传问题处理

--12.4.1文件上传问题处理

13 网站配置管理实现

-13.1网站配置相关类实现

--13.1.1网站配置相关类实现

-13.2网站配置界面模板实现

--13.2.1网站配置界面模板实现

-13.3网站配置调试

--13.3.1网站配置调试

14 网站前端组件实现

-14.1网站首页布局实现

--14.1.1网站首页布局实现

-14.2菜单Vue组件实现

--14.2.1菜单Vue组件实现

--14.2.2随堂测试

-14.3幻灯片Vue组件实现

--14.3.1幻灯片Vue组件实现

-14.4滚动Vue组件实现

--14.4.1滚动Vue组件实现

--14.4.2随堂测试

-14.5滚动接口实现

--14.5.1滚动接口实现

-14.6滚动接口调试

--14.6.1滚动接口调试

-14.7幻灯片接口实现

--14.7.1幻灯片接口实现

15 网站前端页面实现

-15.1首页区域实现

--15.1.1首页区域实现

-15.2首页内容脚本实现

--15.2.1首页内容脚本实现

-15.3首页完善

--15.3.1首页完善

-15.4Vue组件放入单文件

--15.4.1Vue组件放入单文件

-15.5详细页面实现

--15.5.1详细页面实现

-15.6前端问题

16 测试与发布

-16.1网站测试介绍

--16.1.1网站测试介绍

--16.1.2课程PPT

-16.2功能测试

--16.2.1功能测试

--16.2.2课程PPT

-16.3打包发布

--16.3.1打包发布

-16.4部署运行

--16.4.1部署运行

--16.4.2随堂测试

7.4.1多个用户删除实现笔记与讨论

也许你还感兴趣的课程:

© 柠檬大学-慕课导航 课程版权归原始院校所有,
本网站仅通过互联网进行慕课课程索引,不提供在线课程学习和视频,请同学们点击报名到课程提供网站进行学习。