描述

这周在做一个简单的电商项目，遇到了一个问题：用户在点击了商品收藏按钮后，数据库里添加了2条记录，它们除了主键Id外其他字段都相同。

实现情况

添加收藏这个功能的实现方式是这个样子的：后端有一个控制器来处理来自网页的异步POST请求，然后返回JSON来告知是否成功。数据库是一个简单的用户与商品的关系表。控制器中已经做了是否重复添加的判断。

分析与解决

首先，第一反应是检查控制器的判断条件是否写错了，结果是并没有。

之后，思考了一阵，查看了收藏操作的网络请求，结果发现这个点击事件发送了两次POST请求。这样就暂时算搞清楚了问题的原因，即并发问题。考虑到这个系统应该对并发的要求并不高，后端暂时不需要调整。那么，接下来这个问题就简化为了另一个问题——为什么一次点击事件触发了两次POST请求。

检查了js代码，这个事件绑定的方法没有写错。preventdefault，发起异步post请求，处理异步请求返回结果。

我对前端不太熟，请教了公司里的老司机。他说一般两个原因：

1. 事件重复绑定。检查了一圈，并没有。

2. 其实和1是相同的，只是表现不太一样，即绑定事件所在js外部文件被重复引入。由于项目不大，js文件都是在render页面中手工引入的。果然，该文件在layout模板和当前页面中各被引用一次，因此才出现了这个问题。

总结

1. 排查bug和写代码也是一样的，大事化小，小事化无。无限可能的情况，按顺序排查，进而将问题转化为更小的问题。这和代码的抽象是同样的东西。

2. 注意js文件的引入以及事件的绑定情况。