描述
这周在做一个简单的电商项目,遇到了一个问题:用户在点击了商品收藏按钮后,数据库里添加了2条记录,它们除了主键Id外其他字段都相同。
实现情况
添加收藏这个功能的实现方式是这个样子的:后端有一个控制器来处理来自网页的异步POST请求,然后返回JSON来告知是否成功。数据库是一个简单的用户与商品的关系表。控制器中已经做了是否重复添加的判断。
分析与解决
首先,第一反应是检查控制器的判断条件是否写错了,结果是并没有。
之后,思考了一阵,查看了收藏操作的网络请求,结果发现这个点击事件发送了两次POST请求。这样就暂时算搞清楚了问题的原因,即并发问题。考虑到这个系统应该对并发的要求并不高,后端暂时不需要调整。那么,接下来这个问题就简化为了另一个问题——为什么一次点击事件触发了两次POST请求。
检查了js代码,这个事件绑定的方法没有写错。preventdefault,发起异步post请求,处理异步请求返回结果。
我对前端不太熟,请教了公司里的老司机。他说一般两个原因:
事件重复绑定。检查了一圈,并没有。
其实和1是相同的,只是表现不太一样,即绑定事件所在js外部文件被重复引入。由于项目不大,js文件都是在render页面中手工引入的。果然,该文件在layout模板和当前页面中各被引用一次,因此才出现了这个问题。
总结
排查bug和写代码也是一样的,大事化小,小事化无。无限可能的情况,按顺序排查,进而将问题转化为更小的问题。这和代码的抽象是同样的东西。
注意js文件的引入以及事件的绑定情况。