Vue+Bootstrap收藏（點(diǎn)贊）功能邏輯與具體實(shí)現(xiàn)（原創(chuàng)），供大家參考，具體內(nèi)容如下

點(diǎn)贊功能邏輯

點(diǎn)贊功能說明：連接了數(shù)據(jù)庫(kù)，在有登錄功能的基礎(chǔ)上。

點(diǎn)贊功能具體實(shí)現(xiàn)目標(biāo)，如下：

1、用戶點(diǎn)擊一次加入收藏，數(shù)量加一，再次點(diǎn)擊取消收藏，數(shù)量減一 ；2、當(dāng)多用戶收藏，喜歡數(shù)量累加 ；3、如果用戶已收藏，顯示紅心（點(diǎn)亮圖標(biāo)），未收藏，否之。 ；

點(diǎn)贊功能說明：點(diǎn)贊功能用到兩個(gè)表，點(diǎn)贊表和數(shù)據(jù)表的count。

功能分析：

具體實(shí)現(xiàn)如圖，可把該功能分為兩個(gè)部分，分別實(shí)現(xiàn)。

1.紅心部分邏輯：

1.1 加載數(shù)據(jù)時(shí)顯示：獲取登陸者的id,通過id查詢點(diǎn)贊表，獲取該id下的所有喜歡（點(diǎn)贊）的數(shù)據(jù)，放入一個(gè)全局變量數(shù)組，然后加載數(shù)據(jù)時(shí)，通過數(shù)組判斷喜歡（點(diǎn)贊）顯示已收藏或未收藏。 （注釋：用到了兩個(gè)全局變量數(shù)組。1.1用到的數(shù)組：存放對(duì)應(yīng)數(shù)據(jù)id。1.2用到的數(shù)組結(jié)構(gòu)：下標(biāo)存數(shù)據(jù)id,內(nèi)容存0或1。）1.2 實(shí)現(xiàn)點(diǎn)擊在已收藏（點(diǎn)贊）和未收藏（點(diǎn)贊）狀態(tài)之間切換：通過全局變量數(shù)組（1.1注釋），判斷當(dāng)前是已收藏還是未收藏，若已收藏，則點(diǎn)擊后顯示未收藏，反之類似。

2.數(shù)值部分邏輯：

2.1 數(shù)值用數(shù)據(jù)表的count顯示：若數(shù)據(jù)表中的count不為空，則數(shù)值直接用count顯示。若數(shù)據(jù)表中的count為空，則通過數(shù)據(jù)id,在點(diǎn)贊表查找，如果點(diǎn)贊表中未有該數(shù)據(jù)id,count置0，如果有該數(shù)據(jù)id,計(jì)算個(gè)數(shù)，放入count。2.2 實(shí)現(xiàn)點(diǎn)擊，若已收藏，值加1，取消收藏，值減1：通過1.1.2的全局變量數(shù)組，判斷當(dāng)前是已收藏還是未收藏，若已收藏，則點(diǎn)擊后count減1，把點(diǎn)贊表中當(dāng)前用戶刪除。若未收藏，則點(diǎn)擊后count加1，在點(diǎn)贊表中添加當(dāng)前用戶。

點(diǎn)贊功能具體實(shí)現(xiàn)

通過bootstrap+Vue來實(shí)現(xiàn)的。

當(dāng)按鈕的class是glyphicon glyphicon-heart-empty顯示空心，是glyphicon glyphicon-heart顯示紅心。數(shù)值由count顯示。

前端收藏按鈕代碼。

// 點(diǎn)贊按鈕<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>

聲明的全局變量。還有當(dāng)前登錄者的id要用到（沒寫）。

//存儲(chǔ)數(shù)據(jù)表的所有數(shù)據(jù)datas: ’’,//給count賦值countCid: [],//點(diǎn)擊時(shí)使用lvs: [],//更新點(diǎn)贊表時(shí)使用loveDatas: { type: ’’, uid: ’’, cid: ’’ },//更新數(shù)據(jù)表時(shí)使用 updateDatas: { cid: ’’, count: ’’}

加載時(shí)，調(diào)用函數(shù)。

//遍歷整個(gè)點(diǎn)贊表，放入一個(gè)全局?jǐn)?shù)組變量·數(shù)組作用是統(tǒng)計(jì)某一數(shù)據(jù)對(duì)應(yīng)點(diǎn)贊的個(gè)數(shù)（點(diǎn)贊的個(gè)數(shù)=同一數(shù)據(jù)在點(diǎn)贊表的個(gè)數(shù)）this.listLoveDatas(); //給數(shù)據(jù)表中的count賦值 this.listData(); //若已收藏，顯示紅心，反之，空心。this.formData.uid是本次登錄者的id this.listLove(this.formData.uid);

首先，調(diào)用 listLoveDatas() 函數(shù)。

listLoveDatas : function(){ var target = this; //獲取點(diǎn)贊表的所有數(shù)據(jù) 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){ //當(dāng)查詢到點(diǎn)贊表的第一個(gè)數(shù)據(jù)，給countCid賦值為1 target.countCid[d.cid]=1; }else{ //當(dāng)查詢到2、3、4條等，依次累加 target.countCid[d.cid] = target.countCid[d.cid] +1; } } }) .catch(function (error) { console.log(error); });}

其次，調(diào)用 listData() 函數(shù)。

listData : function(){ var target = this; //獲取所有數(shù)據(jù)表的數(shù)據(jù)，給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]; //數(shù)據(jù)表中的count是不是為空，若為空并且點(diǎn)贊表中有這個(gè)數(shù)據(jù)，直接給count賦值。若為空，直接賦0 if(d.count==null&&target.countCid[d.cid]){ target.datas[i].count=target.countCid[d.cid]; //給要更新的數(shù)據(jù)賦值 target.updateDatas.cid = d.cid; target.updateDatas.count = target.countCid[d.cid]; //更新數(shù)據(jù)表 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; //給要更新的數(shù)據(jù)賦值 target.updateDatas.cid = d.cid; target.updateDatas.count = 0; //更新數(shù)據(jù)表 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); });}

最后，調(diào)用 listLove() 函數(shù)。

listLove : function(uid){ var target = this; var myChar; //在點(diǎn)贊表中查出所有登陸者點(diǎn)贊的數(shù)據(jù) 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]; //該數(shù)組，點(diǎn)擊收藏按鈕時(shí)用 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){ //獲取某個(gè)按鈕id myChar = document.getElementById(d.cid); //給已收藏的變?yōu)榧t心狀態(tài) myChar.className = 'glyphicon glyphicon-heart'; } } } }) .catch(function (error) { console.log(error); });}

點(diǎn)擊調(diào)用該函數(shù)。

love : function(cid){ var target = this; //獲取點(diǎn)擊收藏?cái)?shù)據(jù)的id var myChar = document.getElementById(cid); //如果沒登錄，提示，this.formData.uid是當(dāng)前登陸者id if(this.formData.uid==undefined){ alert('請(qǐng)先登錄'); }else{ //該數(shù)組存儲(chǔ)了已經(jīng)收藏的數(shù)據(jù) if(this.lvs[cid]==1){ //由紅心變?yōu)榭招?myChar.className = 'glyphicon glyphicon-heart-empty'; //通過數(shù)據(jù)id和用戶id獲取點(diǎn)贊表的id axios.post(’/bac/love/selectByCidAndUid?cid=’+cid+’&uid=’+target.formData.uid) .then(function (response) { var id = response.data.result.data.id; //通過點(diǎn)贊表的id刪除取消收藏的數(shù)據(jù) 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); }); //把數(shù)組中某數(shù)據(jù)id等2，使下次點(diǎn)擊由空心變紅心，相當(dāng)于開關(guān) 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; //更新數(shù)據(jù)表 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{ //變?yōu)榧t心 myChar.className = 'glyphicon glyphicon-heart'; //獲取數(shù)據(jù)id、用戶id、喜歡的狀態(tài)，插入點(diǎn)贊表 target.loveDatas.cid = cid; target.loveDatas.uid = target.formData.uid; target.loveDatas.type = 1; //插入點(diǎn)贊表 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); }); //使下次點(diǎn)擊由紅心變空心 target.lvs[cid]=1; for(var i=0;i<target.datas.length;i++){ if(target.datas[i].cid==cid){ //使數(shù)值加1 target.datas[i].count = target.datas[i].count+1; //獲取需要更新的數(shù)據(jù)表的id和count target.updateDatas.cid = target.datas[i].cid; target.updateDatas.count = target.datas[i].count; //更新數(shù)據(jù)表 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); }); } } } }}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。