Vue+Bootstrap收藏（点赞）功能逻辑与具体实现

// 点赞按钮
<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>

//存储数据表的所有数据
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 : 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 : 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 : 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);
 });
 }
 }
 } 
 }
}