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

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" 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);
 });
 }
 }
 }
 }
}

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

(0)

相关推荐

  • vue实现直播间点赞飘心效果的示例代码

    前言: 在开发公司项目的时候,遇到了直播间的一些功能,其中点赞冒泡飘心,就折腾了好久,canvas学的不好,自己写不来,百度找了一堆都是js原生写法,迁移到vue项目里来好多问题,百度也解决不了.自己试着慢慢解决,竟然在不知不觉中通了!废话不多说,直接上代码,复制粘贴即可使用 示例: 不动就不动吧.png ```第一步```:先在外部新建一个js文件,取名index.js(名字自己随便取) index.js代码内容如下: /** * LikeHeart * @version: 1.0.0 * @

  • VUE利用vuex模拟实现新闻点赞功能实例

    回顾新闻详细页 很早我们的新闻详情页是在news-detail.vue 组件里,获取服务器数据,然后把数据保持到组件的data 里,既然我们已经用到了vuex,学习了它的state,我们就应该想到把返回的数据交给state 来存储. 1.首先在Vuex.Store 实例化的时候: state:{ user_name:"", newslist:[], newsdetail:{} }, 增加一个newsdetail 对象,newslist 数组是我们前面用来保存新闻列表数据的. 2.下面就

  • vue组件之间通信实例总结(点赞功能)

    本文实例讲述了vue组件之间通信.分享给大家供大家参考,具体如下: 总结: 父组件-->子组件 ①通过属性 步骤1: <son myName="michael" myPhone='123'></son> <son :myName="userList[0]"></son> 步骤2: Vue.component('son',{ props:['myName','myPhone'] }) ②通过$parent 直接在子

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

    Vue+Bootstrap收藏(点赞)功能逻辑与具体实现(原创),供大家参考,具体内容如下 点赞功能逻辑 点赞功能说明:连接了数据库,在有登录功能的基础上. 点赞功能具体实现目标,如下: 1.用户点击一次加入收藏,数量加一,再次点击取消收藏,数量减一 : 2.当多用户收藏,喜欢数量累加 : 3.如果用户已收藏,显示红心(点亮图标),未收藏,否之. : 点赞功能说明:点赞功能用到两个表,点赞表和数据表的count. 功能分析: 具体实现如图,可把该功能分为两个部分,分别实现. 1.红心部分逻辑:

  • laravel5.3 vue 实现收藏夹功能实例详解

    下面通过本文给大家介绍laravel5.3 vue 实现收藏夹功能,具体代码如下所述: { "private": true, "scripts": { "prod": "gulp --production", "dev": "gulp watch" }, "devDependencies": { "bootstrap-sass": "^3

  • 基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)

    在上篇文章:基于Bootstrap的Metronic框架实现页面链接收藏夹功能,介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按钮的方式移动收藏记录,功能虽然实现的还算不错,不过文章出来后,有读者同行指出可以利用直接拖动的方式实现排序更方便,因此对其中列表记录的排序进行了研究,从而介绍了如何利用Sortable开源JS组件实现拖动排序的处理,本篇随笔介绍了该组件在连接收藏夹排序中的应用. 1.收藏记录的排序处理回顾 上篇随笔介绍的收藏夹处理,主要就是为了方便用户快速进

  • vue实现静态页面点赞和取消点赞功能

    本文实例为大家分享了vue实现静态页面点赞和取消点赞的具体代码,供大家参考,具体内容如下 效果如下: 点击之后 点赞数量+1,红心亮再次点击,点赞数量-1,红心灭 逻辑: 由于列表是动态渲染的(for),数据是mock随机生成,所以绑定点击事件时,应该把当前下标和item的id都传到事件上,在data里面声明空数组,用来存放已经点击的id,点赞点击事件触发,先进行判断,1.当前data内的数组是否有这个点击的id,用indexof方法查找,如果找不到,执行点赞功能,数量+1,红心样式取反,最重要

  • Vue中搭配Bootstrap实现Vue的列表增删功能

    在日常开发中,我们可以用 “拿来主义” 借助Bootstarp现成的一些样式,快速生成我们想要的页面布局,避免书写大量的HTML和CSS代码,省下了许多不必要的时间. 当我们想要生成表单表格时我们可以查看Bootstrap的官方文档,来选择我们想要的样式,并根据自己的一些实际情况或者个人喜好进行一定的修改.了解Bootstrap 为了直接搭配Vue使用,我们把表单代码直接复制到 root 容器里面. <div id="root"> <!-- 卡片区域 --> &

  • 基于vue+ bootstrap实现图片上传图片展示功能

    效果图如下所示: html ..... ....... <-- key=idPicUrl --> <div class="col-sm-7" > <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key"

  • 基于Bootstrap的Metronic框架实现页面链接收藏夹功能

    在一个系统里面,往往有很多菜单项目,每个菜单项对应一个页面,一般用户只需要用到一些常用的功能,如果每次都需要去各个层次的菜单里面去找对应的功能,那确实有点繁琐.特别是在菜单繁多,而客户又对系统整体不熟悉的情况下,如果有一个类似浏览器的收藏夹模块,把一些常用的菜单连接保存起来,每次从这个收藏夹主页去找对应的页面,那样确实是省事省力,非常方便.本篇随笔就是介绍在基于Metronic的Bootstrap开发框架里面实现这个收藏夹的思路. 1.系统的收藏夹界面处理效果 为了实现这个收藏夹功能,我们也需要

  • vue实现文章点赞和差评功能

    本文实例为大家分享了vue实现文章点赞和差评功能的具体代码,供大家参考,具体内容如下 纯前端实现文章点赞与差评(支持与不支持). 需求:状态1:用户没有操作过,即既没点赞和差评:状态二:用户点赞过:状态三:用户差评过.点赞或差评过后无法取消,可切换.如下图: dom结构: <!-- 顶 -->       <view class="flex-1 flex ai-center jc-center animate__animated animate__fast" hove

  • Vue实现typeahead组件功能(非常靠谱)

     前言 之前那个typeahead写的太早,不满足当前的业务需求. 而且有些瑕疵,还有也不方便传入数据和响应数据.. 于是就推倒了重来,写了个V2的版本 看图,多了一些细节的考虑;精简了实现的逻辑代码 效果图 实现的功能 1: 鼠标点击下拉框之外的区域关闭下拉框 2: 支持键盘上下键选择,支持鼠标选择 3: 支持列表过滤搜索 4: 支持外部传入列表JSON格式的映射 5: 支持placeholder的传入 6: 选中对象的响应(.sync vue2.3的组件通讯的语法糖) 7: 箭头icon的映

随机推荐