Vue+Bootstrap收藏（點贊）功能邏輯與具體實現(xiàn)

更新時間：2020年10月22日 13:11:46 作者：亭下雨荷

這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap收藏（點贊）功能邏輯與具體實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

點贊功能邏輯

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

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

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

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

功能分析：

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

1.紅心部分邏輯：

1.1 加載數(shù)據(jù)時顯示：獲取登陸者的id,通過id查詢點贊表，獲取該id下的所有喜歡（點贊）的數(shù)據(jù)，放入一個全局變量數(shù)組，然后加載數(shù)據(jù)時，通過數(shù)組判斷喜歡（點贊）顯示已收藏或未收藏。（注釋：用到了兩個全局變量數(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 實現(xiàn)點擊在已收藏（點贊）和未收藏（點贊）狀態(tài)之間切換：通過全局變量數(shù)組（1.1注釋），判斷當(dāng)前是已收藏還是未收藏，若已收藏，則點擊后顯示未收藏，反之類似。

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

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

點贊功能具體實現(xiàn)

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

當(dāng)按鈕的class是glyphicon glyphicon-heart-empty顯示空心，是glyphicon glyphicon-heart顯示紅心。數(shù)值由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>

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

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

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

//遍歷整個點贊表，放入一個全局?jǐn)?shù)組變量·數(shù)組作用是統(tǒng)計某一數(shù)據(jù)對應(yīng)點贊的個數(shù)（點贊的個數(shù)=同一數(shù)據(jù)在點贊表的個數(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;
 //獲取點贊表的所有數(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)查詢到點贊表的第一個數(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是不是為空，若為空并且點贊表中有這個數(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;
 //在點贊表中查出所有登陸者點贊的數(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ù)組，點擊收藏按鈕時用
 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ào)用該函數(shù)。

love : function(cid){
 var target = this;
 //獲取點擊收藏數(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獲取點贊表的id
 axios.post('/bac/love/selectByCidAndUid?cid='+cid+'&uid='+target.formData.uid)
 .then(function (response) {
 var id = response.data.result.data.id;
 //通過點贊表的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，使下次點擊由空心變紅心，相當(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)，插入點贊表
 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){
 //使數(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);
 });
 }
 }
 } 
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: