Vue+Bootstrap如何實(shí)現(xiàn)收藏點(diǎn)贊功能

發(fā)布時間：2020-10-26 15:38:20 來源：億速云閱讀：509 作者：Leah 欄目：開發(fā)技術(shù)

Vue+Bootstrap如何實(shí)現(xiàn)收藏點(diǎn)贊功能？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

點(diǎn)贊功能邏輯

點(diǎn)贊功能說明：連接了數(shù)據(jù)庫，在有登錄功能的基礎(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)贊功能用到兩個表，點(diǎn)贊表和數(shù)據(jù)表的count。

Vue+Bootstrap如何實(shí)現(xiàn)收藏點(diǎn)贊功能

功能分析：

Vue+Bootstrap如何實(shí)現(xiàn)收藏點(diǎn)贊功能

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

1.紅心部分邏輯：

1.1 加載數(shù)據(jù)時顯示：獲取登陸者的id,通過id查詢點(diǎn)贊表，獲取該id下的所有喜歡（點(diǎn)贊）的數(shù)據(jù)，放入一個全局變量數(shù)組，然后加載數(shù)據(jù)時，通過數(shù)組判斷喜歡（點(diǎn)贊）顯示已收藏或未收藏。（注釋：用到了兩個全局變量數(shù)組。1.1用到的數(shù)組：存放對應(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ì)算個數(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顯示。

Vue+Bootstrap如何實(shí)現(xiàn)收藏點(diǎn)贊功能

前端收藏按鈕代碼。

// 點(diǎn)贊按鈕
<button type="button"  v-on:click="love(d.cid)" class="btn btn-default btn-lg"> 
 <span :id="d.cid" class="glyphicon glyphicon-heart-empty" aria-hidden="true"><p >{{d.count}}</p></span>
</button>

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

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

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

//遍歷整個點(diǎn)贊表，放入一個全局?jǐn)?shù)組變量·數(shù)組作用是統(tǒng)計(jì)某一數(shù)據(jù)對應(yīng)點(diǎn)贊的個數(shù)（點(diǎn)贊的個數(shù)=同一數(shù)據(jù)在點(diǎn)贊表的個數(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&#63;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)贊表的第一個數(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&#63;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)贊表中有這個數(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&#63;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)擊收藏按鈕時用
 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);
 //給已收藏的變?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("請先登錄");
 }else{ 
 //該數(shù)組存儲了已經(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&#63;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&#63;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);
 });
 }
 }
 } 
 }
}

關(guān)于Vue+Bootstrap如何實(shí)現(xiàn)收藏點(diǎn)贊功能問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。

向AI問一下細(xì)節(jié)

Vue+Bootstrap如何實(shí)現(xiàn)收藏點(diǎn)贊功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽