web前端 | 博客（九）删除用户功能

最新推荐文章于 2024-05-12 10:53:30 发布
最新推荐文章于 2024-05-12 10:53:30 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40644568/article/details/103864755
版权
本文介绍了前端如何实现删除用户功能，包括在用户点击删除按钮后，通过表单向服务器发送请求，携带用户ID作为参数。详细步骤涉及设置隐藏域存储ID、添加自定义属性、绑定点击事件、设置表单提交地址和方式。同时，文章提到了服务器端接收并处理删除请求的实现过程。
摘要由CSDN通过智能技术生成

删除用户功能

在点击删除按钮后，点击提交按钮时，向服务器端发送删除用户的请求，并且将要删除的用户id作为请求参数传递到服务器端。
其实，删除用户的弹出框就是一个表单，要通过这个表单将删除用户的id传递到服务器端。这个表单，有一个含有用户id的隐藏域。

  1. 在确认删除框中添加隐藏域用以存储要删除的用户id值
  2. 未删除按钮添加自定义属性用以存储想要删除的用户id值
  3. 为删除按钮添加点击事件，再点击事件处理函数中获取自定义属性中存储的id值并将id值存储在表单的隐藏域中。
  4. 为表单添加提交地址以及提交方式
  5. 在服务器端建立删除功能路由
  6. 接收客户端传递过来的id参数
  7. 根据id删除用户

在user.art中的form标签中添加隐藏域和id

<input type="hidden" name="id" id="deleteUserId">

在删除按钮的i标签中添加id


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  小羊黛马
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
删除功能实现

				
			

			

				

					南淮北安的博客
				

				

					03-27
					
					2728
					
				

			

		

		

			
				
文章目录一、目标需求二、list.jsp三、delUserServlet
一、目标需求

点击按钮可以删除此条记录，这就需要点击删除按钮时传递该记录的 id

同样依照界面层、业务逻辑层、数据访问层结构完成
二、list.jsp
这个页面点击删除按钮时，需要传递 id 参数，同时需要提醒用户是否确定删除

<script>
        function deleteUser(id)...

			
		

	



                

              
                



	

		

			

				
					
web前端 | 博客（十三）评论功能

				
			

			

				

					让黛马跑起来
				

				

					01-12
					
					4609
					
				

			

		

		

			
				
评论功能

创建评论集合
判断用户是否登录，如果用户登录，再允许用户提交评论表单
在服务器端创建文章评论功能对应的路由
再路由请求处理函数中接受客户端传递过来的评论信息
将评论信息存储在评论集合中
将页面重定向回文章详情页面
在文章详情页面路由中获取文章评论信息并展示在页面中

在model下新建comment.js
const mongoose = require('mongoose');

c...

			
		

	



                


  
              

                


	

		

			

				
					
项目网页设计期中期末大作业HTML+CSS+JS web前端开发技术.个人博客

				
			

			

				

					11-30
				

			

		

		

			
				
【项目】网页设计期中期末大作业HTML+CSS+JS web前端开发技术.个人博客

			
		

	





	

		

			

				
					
前端适合新手的删除功能

				
			

			

				

					m0_62336925的博客
				

				

					05-22
					
					277
					
				

			

		

		

			
				
适合新手的前端删除

			
		

	



		

			
		



	

		

			

				
					
前端--医院设置信息批量删除功能实现

				
			

			

				

					qq_46112274的博客
				

				

					05-29
					
					1131
					
				

			

		

		

			
				
前端--医院设置信息批量删除功能实现1、js文件中定义调用后端接口的方法2、 定义页面组件模板2.1、添加批量删除工具按钮2.2、给每一行添加批量删除复选框按钮2.3、绑定事件，获取复选框集合，即获取到用户要删除的id集合。2.4、编写js代码，进行批量删除
1、js文件中定义调用后端接口的方法

//批量删除医院设置信息
batchDeleteHsopSet(idList){
    return request({
        url: `/admin/hosp/hospitalSet/delete

			
		

	





	

		

			

				
					
2024年前端--医院设置信息批量删除功能实现(1)，前端面试题校招

					
最新发布

				
			

			

				

					2401_84619432的博客
				

				

					05-12
					
					421
					
				

			

		

		

			
				
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】批量删除工具批量删除2.2、给每一行添加批量删除复选框按钮代码：批量删除复选框效果：2.3、绑定事件，获取复选框集合，即获取到用户要删除的id集合。@selection-change：获取复选框集合2.4、编写js代码，进行批量删除首先获取到用户选中的元素；遍历每个元素，获取到其id值；

			
		

	





	

		

			

				
					
vue 项目接入 markdown(1)

				
			

			

				

					2401_84437170的博客
				

				

					04-29
					
					547
					
				

			

		

		

			
				
空(void)元素有那些？⾏内元 素和块级元素有什么区别？cookies,sessionStorage,localStorage 的区别？Doctype作⽤?serviceWorker的使用原理是啥？问：0.1 + 0.2 === 0.3 嘛？箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？serviceWorker的使用原理是啥？箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？Canvas 和 SVG 图形的区别是什么？如何实现浏览器内多个标签页之间的通信？HTML5 的离线储存的使用和原理？

			
		

	





	

		

			

				
					
web前端 | 博客（十一）文章列表展示

				
			

			

				

					让黛马跑起来
				

				

					01-10
					
					1177
					
				

			

		

		

			
				
文章列表展示
找到文章列表请求页面的路由请求处理函数，先将所有数据查询出来，并展示在页面当中，之后再实现分页功能。
在route/admin/下的article.js中，将文章集合的构造函数导入到当前文件中。
并且增加代码
  let articles =  await Article.find({});
  res.send(articles);

此时，在localhost/admin/art...

			
		

	





	

		

			

				
					
web前端 | 博客（三）登录拦截和重定向

				
			

			

				

					让黛马跑起来
				

				

					01-05
					
					1038
					
				

			

		

		

			
				
与登陆与否相关的界面
登陆成功后的重定向
登陆后跳转页面，需要实现页面的重定向，在express中实现重定向的方法是res.redirect('重定向的地址')，
把密码比对成功后的逻辑修改为
            //将用户名存储在请求对象中
            req.session.username = user.username;
            //重定向到用户列表页面
 ...

			
		

	





	

		

			

				
					
js添加删除行功能实现

				
			

			

				

					09-14
				

			

		

		

			
				
js添加删除行功能实现 4个不同的实现方法

			
		

	





	

		

			

				
					
Web前端(vue/cli脚手架)+后端（NodeJS+Express）搭建个人博客

				
			

			

				

					01-05
				

			

		

		

			
				
在本项目中，我们将探讨如何使用现代Web技术栈，包括前端的Vue CLI脚手架、后端的Node.js与Express框架，以及数据库管理系统MongoDB，来构建一个个人博客平台。这个项目非常适合对前端有一定了解并希望扩展后端技能...

			
		

	





	

		

			

				
					
前端提高篇(九十三)：jQueryDOM操作：删除，十大前端开发框架

				
			

			

				

					m0_60666841的博客
				

				

					03-31
					
					471
					
				

			

		

		

			
				
效果：用html()和text()方法也能实现清空的效果：//用html(‘’)将标签里的内容变成空字符串，相当于清空//理由同上。

			
		

	





	

		

			

				
					
显示了一个左右删除的功能(都是用的div) , 还有没有简单一点的写法 , html前端知识

				
			

			

				

					qq_39237554的博客
				

				

					03-09
					
					449
					
				

			

		

		

			
				
实现了一个左右删除的功能全部都是用 div实现的代码 ↓  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xht...

			
		

	





	

		

			

				
					
纯前端实现增-删-改-查(模糊查询)和分页[本地存储当成数据库(vue + element)]

				
			

			

				

					weixin_42386379的博客
				

				

					02-11
					
					8500
					
				

			

		

		

			
				
纯前端实现增-删-改-查(模糊查询)和分页[本地存储当成数据库(vue + element)]

			
		

	





	

		

			

				
					
07---vue前端实现增删改查

				
			

			

				

					Zero摄氏度的博客
				

				

					12-24
					
					9831
					
				

			

		

		

			
				
vue前端页面实现增删改查，通过axios调用后端接口，实现功能。还有批量删除等功能。

			
		

	





	

		

			

				
					
删除 前端

				
			

			

				

					qq_41597349的博客
				

				

					05-11
					
					502
					
				

			

		

		

			
				
    /*删除*/    btn_delete: function (v, record) {        var obj_records = this.getGridSelectedRecords("ref_grid_otherinoutedit");        if (obj_records.length == 0) {            exts.toast("请至少勾选一条数据...

			
		

	





	

		

			

				
					
Vue前端项目-用户管理-增删改（上）

				
			

			

				

					踏 浪的博客
				

				

					09-08
					
					9023
					
				

			

		

		

			
				
目录

1、按钮界面

2、修改和删除按钮状态控制

3、添加和修改的对话框

4、点击 “新增”方法

5、新增用户的保存操作

6、修改用户

7、删除用户

8、总结

实现效果图：



1、按钮界面

在src / views / system / user / index.vue页面中，添加 五个按钮分别为 “新增”，“修改”，“删除”，“导入”和 “导出”

在 搜索和重置 按钮后面 添加如下代码：


        <el-row :gutter="10" class="mb8...

			
		

	





	

		

			

				
					
第60章 用户增、修、删的前端实现

				
			

			

				

					zhoujian_911的专栏
				

				

					04-12
					
					904
					
				

			

		

		

			
				

			
		

	





	

		

			

				
					
web前端 | 博客（八）用户信息修改功能

					
热门推荐

				
			

			

				

					让黛马跑起来
				

				

					01-06
					
					1万+
					
				

			

		

		

			
				
用户信息修改功能
当点击用户后面的按钮时，要跳转到用户信息修改页面。而修改和添加实际上是同一个页面。
要区分跳转后是添加操作还是修改操作，在于携带的参数。
如果是添加操作，那就直接跳转过去；如果是修改操作，那就携带当前用户的di，通过get的方式传递过去。这样，在跳转到用户编辑页面的时候，可以通过get方式中是否有id参数，来区分到底是添加操作还是修改操作。如果是修改操作，还需要将要修改的用户信息...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值