Vue+Bootstrap如何实现收藏点赞功能
创始人
2024-11-17 08:22:19
0次

点赞功能逻辑

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

点赞功能具体实现目标,如下:

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

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

Vue+Bootstrap如何实现收藏点赞功能

Vue+Bootstrap如何实现收藏点赞功能

功能分析:

Vue+Bootstrap如何实现收藏点赞功能

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

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显示。

Vue+Bootstrap如何实现收藏点赞功能

前端收藏按钮代码。

// 点赞按钮

声明的全局变量。还有当前登录者的id要用到(没写)。

//存储数据表的所有数据
datas: '',
//给count赋值
countCid: [],
//点击时使用
lvs: [],
//更新点赞表时使用
loveDatas: {
 type: '',
 uid: '',
 cid: ''
 },
//更新数据表时使用 
updateDatas: {
 cid: '',
 count: ''
}

加载时,调用函数。

//遍历整个点赞表,放入一个全局数组变量·数组作用是统计某一数据对应点赞的个数(点赞的个数=同一数据在点赞表的个数)
this.listLoveDatas(); 
//给数据表中的count赋值 
this.listData(); 
//若已收藏,显示红心,反之,空心。this.formData.uid是本次登录者的id 
this.listLove(this.formData.uid);

首先,调用 listLoveDatas() 函数。

listLoveDatas : function(){
 var target = this;
 //获取点赞表的所有数据
 axios.post('/bac/love/selectAll?ps=10000')
 .then(function (response) {
 var loves = response.data.result.data;
 var length = response.data.result.data.length;
 for(var i=0;i

其次,调用 listData() 函数。

listData : function(){
 var target = this;
 //获取所有数据表的数据,给count使用countCid赋值
 axios.post('/bac/culture/selectAll?ps=10000')
 .then(function (response) { 
 target.datas = response.data.result.data;
 var length = response.data.result.data.length;
 for(var i=0;i

最后,调用 listLove() 函数。

listLove : function(uid){
 var target = this;
 var myChar;
 //在点赞表中查出所有登陆者点赞的数据
 axios.post('/bac/love/selectByUid?uid='+uid)
 .then(function (response) {
 var loveDatas = response.data.result.data;
 var length = response.data.result.data.length;
 for(var i=0;i

点击调用该函数。

love : function(cid){
 var target = this;
 //获取点击收藏数据的id
 var myChar = document.getElementById(cid);
 //如果没登录,提示,this.formData.uid是当前登陆者id
 if(this.formData.uid==undefined){
 alert("请先登录");
 }else{ 
 //该数组存储了已经收藏的数据
 if(this.lvs[cid]==1){
 //由红心变为空心
 myChar.className = "glyphicon glyphicon-heart-empty";
 //通过数据id和用户id获取点赞表的id
 axios.post('/bac/love/selectByCidAndUid?cid='+cid+'&uid='+target.formData.uid)
 .then(function (response) {
 var id = response.data.result.data.id;
 //通过点赞表的id删除取消收藏的数据
 axios.post('/bac/love/delete?objectId='+id)
 .then(function (response) {
 var success = response.data.success;
 if(success==false){
 alert(response.data.errorName);
 }else{
 console.log("删除成功");
 
 }
 })
 .catch(function (error) {
 console.log(error);
 });
 
 })
 .catch(function (error) {
 console.log(error);
 });
 //把数组中某数据id等2,使下次点击由空心变红心,相当于开关
 target.lvs[cid]=2;
 for(var i=0;i                
            

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...