Vue+Bootstrap收藏（點贊）功能邏輯與具體實現（原創），供大家參考，具體內容如下

點贊功能邏輯

點贊功能說明：連線了資料庫，在有登入功能的基礎上。

點贊功能具體實現目標，如下：

1、使用者點選一次加入收藏，數量加一，再次點選取消收藏，數量減一 ；
2、當多使用者收藏，喜歡數量累加 ；
3、如果使用者已收藏，顯示紅心（點亮圖示），未收藏，否之。 ；

點贊功能說明：點贊功能用到兩個表，點贊表和資料表的count。

功能分析：

具體實現如圖，可把該功能分為兩個部分，分別實現。

1.紅心部分邏輯：

1.1 載入資料時顯示：獲取登陸者的id,通過id查詢點贊表，獲取該id下的所有喜歡（點贊）的資料，放入一個全域性變數陣列，然後載入資料時，通過陣列判斷喜歡（點贊）顯示已收藏或未收藏。

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" style="background:transparent;border-width:0px;outline:none;display:block;margin:0 auto" v-on:click="love(d.cid)" class="btn btn-default btn-lg"> 
 <span :id="d.cid" style="color:red;font-size:20px;"class="glyphicon glyphicon-heart-empty" 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);
 });
 }
 }
 } 
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。