Vue+Bootstrap如何实现收藏点赞功能-创新互联

Vue+Bootstrap如何实现收藏点赞功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

点赞功能逻辑

点赞功能说明：连接了数据库，在有登录功能的基础上。

点赞功能具体实现目标，如下：

1、用户点击一次加入收藏，数量加一，再次点击取消收藏，数量减一 ；
2、当多用户收藏，喜欢数量累加 ；
3、如果用户已收藏，显示红心（点亮图标），未收藏，否之。 ；

点赞功能说明：点赞功能用到两个表，点赞表和数据表的count。

功能分析：

具体实现如图，可把该功能分为两个部分，分别实现。

1.红心部分逻辑：

1.1 加载数据时显示：获取登陆者的id,通过id查询点赞表，获取该id下的所有喜欢（点赞）的数据，放入一个全局变量数组，然后加载数据时，通过数组判断喜欢（点赞）显示已收藏或未收藏。 （注释：用到了两个全局变量数组。1.1用到的数组：存放对应数据id。1.2用到的数组结构：下标存数据id,内容存0或1。）
1.2 实现点击在已收藏（点赞）和未收藏（点赞）状态之间切换：通过全局变量数组（1.1注释），判断当前是已收藏还是未收藏，若已收藏，则点击后显示未收藏，反之类似。

2.数值部分逻辑：

2.1 数值用数据表的count显示：若数据表中的count不为空，则数值直接用count显示。若数据表中的count为空，则通过数据id,在点赞表查找，如果点赞表中未有该数据id,count置0，如果有该数据id,计算个数，放入count。
2.2 实现点击，若已收藏，值加1，取消收藏，值减1：通过1.1.2的全局变量数组，判断当前是已收藏还是未收藏，若已收藏，则点击后count减1，把点赞表中当前用户删除。若未收藏，则点击后count加1，在点赞表中添加当前用户。

点赞功能具体实现

通过bootstrap+Vue来实现的。

当按钮的class是glyphicon glyphicon-heart-empty显示空心，是glyphicon glyphicon-heart显示红心。数值由count显示。

前端收藏按钮代码。

// 点赞按钮
 
 
{{d.count}}