防止前端按钮重复提交数据问题

一时失言乱红尘 2022-09-16 13:24 216阅读 0赞

一、问题导入  
当我们在页面进行点点点的操作时，很可能遇到点击两次的行为，这时候提交或保存按钮也没有进行校验，很可能保存两份数据，因此，作为开发人员，对需要保存类似的按钮进行校验很有必要。

二、问题分析  
我们通过控制isDisable 来设置 disabled来控制按钮的点击和不可点击。 默认isDisable:的值为 false，按钮可以点击。 当我们点击这个按钮的时候，首先将按钮的绑定isDisable设置为true，1秒后立马将其置为false。此时，用户就不能多点了， 过了一秒的时间后才能去操作这个按钮。

sendComment () { 
    this.disabled = true
    if (this.text == ''){ 
    this.$message({ 
    type:'error',
    message:'输入内容不能为空',
    })
    this.disabled = false
    }else{ 
    this.$post('/xx/xx/IdleGoodsComment',{ 
    goods_id:this.$route.params.id,
    content:this.text,
    user_id:window.uId,
    type:1
    }).then((res) => { 
    if(res){ 
    this.getDetail()
    setTimeout(()=>{ 
    this.disabled=false
    this.getCommentList()
    this.text = ''}
    ,1000)
    }
    })
    }
    }
    复制代码

以上代码是通过计时器将button属性更改，点击完之后讲button属性设置为disable

vue绑定button的disable属性为:disabled:‘变量名’。

三、总结  
页面按钮要注意多次点击重复提交数据  
这里用的vue案例介绍，如果是使用别的前端框架，其思想大同小异  
如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: [http://github.crmeb.net/u/defu][http_github.crmeb.net_u_defu] 不胜感激 ！

[http_github.crmeb.net_u_defu]: http://github.crmeb.net/u/defu