表单提交，测试时发现重复点击后，造成后台数据重复问题，到底是前端的工作，还是开发人员的工作？

[Trinity888]

前端开发人员：只负责静态界面、表单校验及相应界面跳转、交互效果的实现

后台开发人员：负责业务逻辑及数据动态内容开发

现测试人员发现：表单提交时，重复点击多次提交按钮，造成数据重复问题。

现在分析：

1 ） 表单提交按钮控制，谁来做？

是前端没有把界面验证做好（例如按钮只能点击一次），还是后台开发没有控制？

2 ） 什么阶段来验证？

前端开发完成后，没有验证测试通过，还是后台开发人员全部完成后验证？

[xrr2016]

前端 20%，后端 80%

[vision1900]

不是很清楚其他 UI 库，Ant Deisgn 按钮的 loading 属性为 true 的时候会自动拒绝响应 click 事件，前端开发者只需关心 loading 的状态即可

[opengps]

主要在于后端

[eGlhb2Jhb2Jhbw]

前端改了就能完全保证不产生重复数据了吗？不能。后端修改完了呢？前端会是什么效果，重复点击的时候产生无用请求乃至抛错，所以也得改。

[cmdOptionKana]

前端的主要负责对象是用户，最主要的责任给用户合理的暗示：

- 比如通过按钮失效来告诉用户点击成功了（不然用户会烦躁 “究竟点到了没”）
- 比如通过进度条（或转圈圈）来告诉用户正在处理中。

后端的主要负责对象是公司（公司数据的安全、服务器的稳定），最主要的责任是假设每一个请求都有可能是攻击。

[justsosososo]

你写前端节流不会么 这类情况我们都是前端做

[phpcxy]

主锅在后端。

[cmdOptionKana]

因此，数据重复问题 100% 是后端的责任。

另外，用户点击按钮的 “使用体验”（能感觉到点击生效吗、能感觉到正在处理吗）则是前端的责任。

如果用户体验不好，烦躁地多次连击按钮，这个烦躁应该由前端负责解决，但后台数据是否重复这个前端是解决不了的（因为还有攻击者不走正常前端页面）。

[cmdOptionKana]

注意，前端使按钮失效，说来说去都是为了让用户体验更好而已，**绝对不是** 为了让后端不接受重复提交的，因为这对于前端来说是一个不可能的任务，既然不可能，就没有责任。

[mirrorpen]

@suke971219 前端向后端请求个 token，后端 token 放 redis 啥的，请求表单时做校验

[samuel]

如果在产品设计时就没有定义好，重复点击或重复提交表单该怎么处理，造成前后端撕逼，那就是产品经理的责任了

[clf]

前后端都得做。

前端控制点击状态是为了避免双击或者网络不佳时有人多次点击。另外，每次进入这个页面的时候，前端最好生成一个 key，表单提交的时候带上 key，用于后端判断是否多次点击。（当前端判断请求失败 /允许再次请求的时候，前端才会刷新这个 key ）
同样的，对于响应速度一般的接口（尤其是插入，容易造成业务数据重复）后端要采用 用户-key-接口 为单元的锁。

[woostundy]

前端做吧。

[l890908]

有没有人能说说前后端都分别怎么做最好？

[simonlu9]

上分布式锁

[Elissa]

最极端的情况，前端只对提交成功做了回调，那么后端就需要把提交重复、提交写入失败、网络问题等等情况都要返回提交识别的状态码，这样就算前端不验证，数据也是安全的

[otakustay]

@rekulas 不不，非要甩锅就甩后端，对前端来说只是用户体验不好，对后端来说这可是 CSRF 漏洞

[otakustay]

不过我觉得最大的锅在产品和交互设计

[fengmumu]

@eason1874 不一定要清空，但是提交时禁止，并且有提交提示要的

[sevenzhou1218]

说前端大部分责任的真是够了...