Vue+Bootstrap 모음 집(좋아요 누 르 기)기능 논리 및 구현

Vue+Bootstrap 모음 집(좋아요 누 르 기)기능 논리 와 구체 적 인 실현(오리지널)을 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
좋아요 기능 논리
좋아요 기능 설명:데이터 베 이 스 를 연결 하여 로그 인 기능 을 바탕 으로 합 니 다.
좋아요 기능 을 눌 러 목 표를 구체 적 으로 실현 합 니 다.다음 과 같 습 니 다.
1.사용자 가 한 번 클릭 하여 컬 렉 션 에 가입 하고 수량 에 1 을 추가 하 며 컬 렉 션 취 소 를 다시 클릭 하면 수량 이 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 을 추가 하고 좋아요 표 에 현재 사용 자 를 추가 합 니 다.
좋아요 기능 구체 적 실현
boottstrap+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);
 });
 }
 }
 } 
 }
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.