点赞和关注功能

封装的ttyu调接口

function webData(Actions,userI){
    tdata = { type: ‘web‘, isJsonp: false, uuid: null, compId: null, userId: null, action: Actions, tableName: null, where: userI, fieldName: null, sql: null, datas: null, tableDatas: null, paras: null,
        GoPage: { index: null, rows: null }, Tree: { id: null, pId: null, name: null, other: null }
    };
}

1、点赞功能(赞和踩)

(1)获取数据中的赞ID和踩ID

var zan1 = "s" + datas[i].zanid;
var cai = "s" + datas[i].downid;

(2)判断赞id中是否有当前用户;(存在赞变成红色,踩灰色)

if (zan1 != null && zan1.indexOf(userID) > 0) {
    str += "<i class=‘iconfont icon-praise-copy‘ style=‘color: red;‘></i>" +
           " <span>(" + datas[i].thumbsUpCount + ")</span>";
    str += "<i class=‘iconfont icon-good-fill‘ style=‘color: #595757;‘ ></i>" +
           " <span>(" + datas[i].thumbsDownCount + ")</span>";
}

(3)判断踩id中是否有当前用户;(存在赞变成灰色,踩红色)

if (cai != null && cai.indexOf(userID) > 0) {
    str += "<i class=‘iconfont icon-praise-copy‘ style=‘color: #595757;‘></i>" +
           " <span>(" + datas[i].thumbsUpCount + ")</span>";
    str += "<i class=‘iconfont icon-good-fill‘ style=‘color:  red;‘></i>" +
           " <span>(" + datas[i].thumbsDownCount + ")</span>";
}

(4)如果赞id中没有当前用户,且踩id中没有当前用户(均是灰色,且有点击事件)

if (zan1 != null && zan1.indexOf(userID) < 0 && cai != null && cai.indexOf(userID) < 0) {
    str += "<i class=‘iconfont icon-praise-copy‘ style=‘color: #595757;‘ onclick=Upcount(this,‘" + datas[i].ID + "‘,‘" + datas[i].zanid + "‘)></i>" +
           " <span>(" + datas[i].thumbsUpCount + ")</span>";
    str += "<i class=‘iconfont icon-good-fill‘ style=‘color: #595757;‘   onclick=Downcount(this,‘" + datas[i].ID + "‘,‘" + datas[i].downid + "‘)></i>" +
           " <span>(" + datas[i].thumbsDownCount + ")</span>";
}

(5)插入SQL语句,赞

function Upcount(objup,lid,zan) {
     zan=zan+","+userID;  //将赞ID与用户ID拼接
     $(objup).css("color",‘red‘); //当前icon变红色
     var sql1 = "update docReply set  thumbsUpCount=thumbsUpCount+1 ,zanid=‘"+zan+"‘ where Id="+lid;  //列表id
     webData("add",sql1);
     ttyu.server.doServiceJsonp(serverJson.serverUrl,tdata,"",function(data){
       //移除当前元素和它兄弟元素的点击事件
       $(objup).removeAttr(‘onclick‘);  //当前元素移除onclick事件
        $(objup).siblings(‘i‘).removeAttr(‘onclick‘);  //它的兄弟移除onclick事件
        var number = $(objup).next(‘span‘).text();
        number=number.replace(/\(/,""); //去除前括号
        number=number.replace(/\)/,""); //去除后括号
        number = parseInt(number); //字符串转化成数字
        $(objup).next(‘span‘).text("");
        var number2 = number+1;  //数量+1
        $(objup).next(‘span‘).text("("+number2+")");
     });}

(6)插入SQL语句,踩

function Downcount(objdown,lid,down) {
        down = down+","+userID;  //将踩id与用户id拼接
        $(objdown).css("color",‘red‘);  //当前icon变成红色
        sql = "update docReply set thumbsDownCount=thumbsDownCount+1,downid=‘"+down+"‘  where Id="+lid;  //列表id
        webData("add",sql);
        ttyu.server.doServiceJsonp(serverJson.serverUrl,tdata,"",function(data){
            //移除当前元素和它兄弟元素的点击事件
            $(objdown).removeAttr(‘onclick‘);  //当前元素移除onclick事件
            $(objdown).siblings(‘i‘).removeAttr(‘onclick‘);  //它的兄弟元素移除onclick事件
            var number = $(objdown).next(‘span‘).text();
            number=number.replace(/\(/,""); //去除前括号
            number=number.replace(/\)/,""); //去除后括号
            number = parseInt(number); //字符串转化成数字
            $(objdown).next(‘span‘).text("");
            var number2 = number+1;  //数量+1
            $(objdown).next(‘span‘).text("("+number2+")");
        });

    }

2、关注功能

1、一个列表被关注

(1)获取当前已关注的用户

$(function() {
        //获取关注的列表id
        webData("getfollowask", userID);  //传用户id
        ttyu.server.doServiceJsonp(serverJson.serverUrl, tdata, "", function (data) {
            var num=0; //用于判断是否添加了 红色关注图标;为1 用户已关注,为0 用户第一次关注
            if(data!=undefined || data != null){
                if(data.length>0){  //判断有没有数据
                    for(var k=0;k<data.length;k++){  //循环关注列表id
                        //判断获取到的关注的列表id是否和当前的列表id相同
                        if(data[k].befuserid==listID){
                            $(‘.icon-xin1‘).addClass(‘red‘);
                            num=num+1;  //给num加1,就是已关注过
                        }
                    }
                }
            }
            //如果用户第一次关注,绑定事件
            if(num==0){
                //添加绑定事件
                $(‘.icon-xin1‘).attr(‘onclick‘,‘xin()‘);
            }
        });
    });

(2)插入SQL表

//点击关注时,插入SQLfunction xin() {     //获取listid     var listids = $("input[name=report]").val();
        var  sql=" insert into myfollowask(userid,befuserid)values("+userID+","+listids+")";  //用户id,列表id
        webData("add",sql);
        ttyu.server.doServiceJsonp(serverJson.serverUrl,tdata,"",function(data){});

        $(‘.icon-xin1‘).removeAttr("onclick");  //移除onclick事件
        $(‘.icon-xin1‘).addClass("red");      //给当前的icon添加红色

        //根据列表id修改表的点赞数
        var sql1 = "update doc set  lightCount=lightCount+1 where Id="+listID;
        webData("add",sql1);
        ttyu.server.doServiceJsonp(serverJson.serverUrl,tdata,"",function(data){});
    }

2、多个列表需要被关注

(1)获取已关注的用户

var follow;  //定义全局变量,获取已关注人的id,供下方获取
//获取关注的问答
$(function() {
    webData("getfollowask",userID);
    ttyu.server.doServiceJsonp(serverJson.serverUrl,tdata,"",function(data){
      if(data !=undefined || data !=null) {
         follow=data;
      }
   });
});

(2)动态创建标签,并获取数据

for (var i = 0; i < datas.length; i++) {
   var num=0;//用于判断是否添加了 红色关注图标;为1 用户已关注,为0 用户第一次关注;
  if(follow.length>0){
     for(var k=0;k<follow.length;k++){
         //判断获取到的关注的列表id是否和当前的列表id相同,如果相同,icon变红色,无点击事件
         if(follow[k].befuserid==datas[i].ID){
                str+="<i class=‘iconfont icon-xin1 red‘></i>" ;
                num=num+1;
           }
       }
    }  //如果是用户第一次关注,创建icon 并添加点击事件
   if(num==0){
        str+="<i class=‘iconfont icon-xin1‘ onclick=usercare(this,"+datas[i].ID+")></i>";
   }
}

(3)插入SQL

//点击心关注问题
function usercare(thisobj,idobj) {  //this,列表id   // 插入SQL语句
     var  sql=" insert into myfollowask(userid,befuserid)values("+userID+","+idobj+")";  //用户id,列表id
     webData("add",sql);
     ttyu.server.doServiceJsonp(serverJson.serverUrl,tdata,"",function(data){});    // 修改SQL语句
     var  sql1="update ask set lightcount=lightcount+1 where id="+idobj;
     webData("add",sql1);
     ttyu.server.doServiceJsonp(serverJson.serverUrl,tdata,"",function(data){});

     $(thisobj).removeAttr("onclick");
     $(thisobj).css("color",‘red‘);
     firm("关注成功");   //自己封装的弹框}
时间: 2024-10-22 14:29:07

点赞和关注功能的相关文章

仿微信朋友圈点赞和评论功能

仿微信朋友圈点赞和评论功能 最近在做朋友圈的项目,所以写一个Demo,代码就是简单实现了一下功能,没有做优化,凑合看 图文排列是用的RecyclerView实现的,弹窗效果是用的自定义的PopupWindow,点赞应该是在本地请求数据库,设置一个flag,获取当前用户的id后,带着id向服务器post一个flag,评论就比较简单了,也是获取当前朋友id(或者昵称),带着内容,向服务器post 贴代码: package com.example.lenovo.dianzandemo; import

51CTO博客2.0 - 关注功能上线啦

2018年2月1日,下午 19:00,博客关注功能上线啦! 关注功能有什么用? 拥有自己的粉丝 自己更新文章后,粉丝会收到通知 因为关注功能绑定了51CTO服务号,所以粉丝如果绑定了微信,那么你更新文章并且上首页的话,会push给粉丝的微信中哦~ 评论同上,也会push给粉丝到微信中,再也不用担心错过评论啦~ 如何拥有关注功能? 有 3 篇推荐文章 近一年内有更新原创文章 关注按钮在哪里? 1. 首页-推荐作者模块 2. 作者博客主页 3. 文章详情页 4. 专家列表页 我关注的,文章一眼看全!

51CTO博客2.0——移动版关注功能正式上线

喜大普奔,2018年3月5日下午8点30分移动版关注功能正式上线了>>> 不知道关注功能是干嘛的?(敲黑板,敲黑板,看这里) 对于作者>>> 1.拥有属于自己的粉丝2.增加自身品牌影响力3.将文章以最快的速度推送给自己粉丝(有了这关注功能,朕今后也是坐拥百万粉丝的公众人物了,吼~吼~吼~) 对于读者>>> 1.不再错过大牛们的每一篇文章2.学习系列文章,更加系统.追文更便利3.第一时间收到作者回复,解决疑问不再等待.(又关注了个大牛来充实自己,这感觉不

「小程序JAVA实战」小程序的关注功能(65)

转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和个人的信息来进行展示,如果是发布者,可以进行关注和取消关注. 后端开发 涉及2涨表,一个关联表,个人和粉丝的关联表,用户表. UsersMapper.java package com.idig8.mapper; import com.idig8.pojo.Users; import com.idig

微信服务器与项目服务器的交互(关注功能、微信扫描带参数二维码)

<?php /** * wechat php test */ //define your token define("TOKEN", "txtj"); $wechatObj = new wechatCallbackapiTest(); if (isset($_GET['echostr'])) { $wechatObj->valid(); }else{ $wechatObj->responseMsg(); } class wechatCallback

夺命雷公狗---Redis---6-案例操作2(用户列表页,实现分页显示已经关注功能)

redis.php(公共文件) <?php $redis = new Redis(); $redis -> connect('localhost',6379); $redis -> auth('123456');//因为我修改了配置文件的密码是123456 login.php(登录页面) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&

使用redis技术实现注册登录列表以及关注功能

redis命令中文网参考网址:http://www.redis.cn/commands.html 首先我们需要下载一个类文件那就是predis git地址:git clone git://github.com/nrk/predis.git zip地址:https://github.com/nrk/predis/archive/v1.0.1.zip 然后我是嘴边创建了个本地文件引用的 接下来一个页面一个页面的看代码: 先连接redis,来一个redis.php <?php header("C

MongoDB点赞和吐槽功能

第一种未使用MongoDB方式实现: control: service: 第二种使用MongoDB原生命令方式实现: service: 首先注入MongoTemplate 控制如何不能重复点赞: 用redis来实现,我们只要在点赞之后,往redis中添加一个标识即可!!!!! control: 注入RedisTemplate 发布吐槽点评 原文地址:https://www.cnblogs.com/beyond7788/p/12625257.html

JQuery实现点击关注和取消功能

点赞,网络用语,表示“赞同”.“喜爱”. 该网络语来源于网络社区的“赞”功能.送出和收获的赞的多少.赞的给予偏好等,在某种程度能反映出你是怎样的人以及处于何种状态.点赞的背后,反映出你自己.与之对应的便是取消功能.恰巧最近博主在一款APP,其中一个版块需要实现点赞和取消功能,经过思考决定用JQuery代码实现它,好了废话不多说,上干货!! 首先要引入JQuery插件 其次,我们需要定义一个div,并给它一些样式 然后就是JS代码了,如下所示 $(document).ready(function(