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


Posted in Javascript onOctober 22, 2020

Vue+Bootstrap收藏(点赞)功能逻辑与具体实现(原创),供大家参考,具体内容如下

点赞功能逻辑

点赞功能说明:连接了数据库,在有登录功能的基础上。

点赞功能具体实现目标,如下:

1、用户点击一次加入收藏,数量加一,再次点击取消收藏,数量减一 ;
2、当多用户收藏,喜欢数量累加 ;
3、如果用户已收藏,显示红心(点亮图标),未收藏,否之。 ;

点赞功能说明:点赞功能用到两个表,点赞表和数据表的count。

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

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

功能分析:

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

具体实现如图,可把该功能分为两个部分,分别实现。

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显示。

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>

声明的全局变量。还有当前登录者的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);
 });
 }
 }
 } 
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript事件模型实例分析
Jan 30 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
Dec 31 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
JavaScript实现简易计算器小功能
Oct 22 #Javascript
vue实现简单加法计算器
Oct 22 #Javascript
微信小程序实现选项卡滑动切换
Oct 22 #Javascript
微信小程序实现文件预览
Oct 22 #Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 #Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 #Javascript
vue实现下拉菜单树
Oct 22 #Javascript
You might like
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
JS解密入门 最终变量劫持
2008/06/25 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
js常用DOM方法详解
2017/02/04 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
python如何快速拼接字符串
2020/10/28 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
Spy++的使用方法及下载教程
2021/01/29 Python
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
党支部承诺书范文
2014/03/28 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
安全生产标语
2014/06/06 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python