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

前端收藏按鈕代碼。

// 點贊按鈕<button type='button' v-on:click='love(d.cid)' class='btn btn-default btn-lg'> <span : style='color:red;font-size:20px;' aria-hidden='true'><p style='float:right;font-size:18px;'>{{d.count}}</p></span></button>

聲明的全局變量。還有當前登錄者的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<length;i++){ var d = loves[i]; if(target.countCid[d.cid]==null){ //當查詢到點贊表的第一個數據，給countCid賦值為1 target.countCid[d.cid]=1; }else{ //當查詢到2、3、4條等，依次累加 target.countCid[d.cid] = target.countCid[d.cid] +1; } } }) .catch(function (error) { console.log(error); });}

其次，調用 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<length;i++){ var d = target.datas[i]; //數據表中的count是不是為空，若為空并且點贊表中有這個數據，直接給count賦值。若為空，直接賦0 if(d.count==null&&target.countCid[d.cid]){ target.datas[i].count=target.countCid[d.cid]; //給要更新的數據賦值 target.updateDatas.cid = d.cid; target.updateDatas.count = target.countCid[d.cid]; //更新數據表 axios.post(’/bac/culture/updateByPrimaryKeySelective’,target.updateDatas) .then(function (response) { var success = response.data.success; if(success==false){ alert(response.data.errorName); }else{ } }) .catch(function (error) { console.log(error); }); }else if(d.count==null){ target.datas[i].count=0; //給要更新的數據賦值 target.updateDatas.cid = d.cid; target.updateDatas.count = 0; //更新數據表 axios.post(’/bac/culture/updateByPrimaryKeySelective’,target.updateDatas) .then(function (response) { var success = response.data.success; if(success==false){ alert(response.data.errorName); }else{ } }) .catch(function (error) { console.log(error); }); } } }) .catch(function (error) { console.log(error); });}

最后，調用 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<length;i++){ var l = loveDatas[i]; //該數組，點擊收藏按鈕時用 target.lvs[l.cid]=l.type; for(var j=0;j<target.datas.length;j++){ var d = target.datas[j]; if(l.cid==d.cid){ //獲取某個按鈕id myChar = document.getElementById(d.cid); //給已收藏的變為紅心狀態 myChar.className = 'glyphicon glyphicon-heart'; } } } }) .catch(function (error) { console.log(error); });}

點擊調用該函數。

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<target.datas.length;i++){ if(target.datas[i].cid==cid){ target.datas[i].count = target.datas[i].count-1; target.updateDatas.cid = target.datas[i].cid; target.updateDatas.count = target.datas[i].count; //更新數據表 axios.post(’/bac/culture/updateByPrimaryKeySelective’,target.updateDatas) .then(function (response) { var success = response.data.success; if(success==false){ alert(response.data.errorName); }else{ } }) .catch(function (error) { console.log(error); }); } } }else{ //變為紅心 myChar.className = 'glyphicon glyphicon-heart'; //獲取數據id、用戶id、喜歡的狀態，插入點贊表 target.loveDatas.cid = cid; target.loveDatas.uid = target.formData.uid; target.loveDatas.type = 1; //插入點贊表 axios.post(’/bac/love/insert’,target.loveDatas) .then(function (response) { var success = response.data.success; if(success==false){ alert(response.data.errorName); }else{ console.log('插入成功'); } }) .catch(function (error) { console.log(error); }); //使下次點擊由紅心變空心 target.lvs[cid]=1; for(var i=0;i<target.datas.length;i++){ if(target.datas[i].cid==cid){ //使數值加1 target.datas[i].count = target.datas[i].count+1; //獲取需要更新的數據表的id和count target.updateDatas.cid = target.datas[i].cid; target.updateDatas.count = target.datas[i].count; //更新數據表 axios.post(’/bac/culture/updateByPrimaryKeySelective’,target.updateDatas) .then(function (response) { var success = response.data.success; if(success==false){ alert(response.data.errorName); }else{ } }) .catch(function (error) { console.log(error); }); } } } }}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。