溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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 :id="d.cid" class="glyphicon glyphicon-heart-empty" aria-hidden="true"><p >{{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);
});
}
}
}
}
}關于Vue+Bootstrap如何實現收藏點贊功能問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
