小东Freeman + 关注

签名:我们爱我们的倒霉工作,也爱这千疮百孔的世界。

网站单IP点赞功能开发详解

发表于 6个月前   1933次查看    1评论  38 赞

网站点赞功能是一直想做的,然后因为各种事太忙还有技术不到位就没做,今天闲来没事就把点赞功能做了,现在做起来是挺得心应手的,画了几幅项目草图就出来了,下面把开发过程贴出来。

开发说明:首先要清楚的是我做的是单IP点赞功能,就是一篇文章只能通过一个ip点赞,这个ip点过后就无法点赞了,这样做就避免了刷赞的存在,然后也避免了登录才能点赞的弊端,增强了开放性和互动性。


开发思路:点赞后获取ip,将ip拼接到以前的ip列表里,然后update点赞列,在文章打开后获取浏览ip然后和数据库内的ip列表进行对比,如果有该ip就无法在点赞,如果没有就可以点赞。


前端插件:我在网上花钱买了一个插件,挺好用的,样式也不错,操作起来也很简单,免费分享给你们,下载地址:点赞插件下载地址

爱奇艺20180720194705.png

代码部分:

1、前端部分,这是我的前端,你们可以根据自身需求更改,都在我分享的地址了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- 点赞 -->
      <div class="heart ${content.zanClass }" id="like1" rel="${content.zanAttr }"></div
      <div class="likeCount" id="likeCount1">${content.zanCount }</div>
      <script>
    $(document).ready(function()
    {
     
    $('body').on("click",'.heart',function()
    {
         
        var A=$(this).attr("id");
        var B=A.split("like");
        var messageID=B[1];
        var C=parseInt($("#likeCount"+messageID).html());
        $(this).css("background-position","");
        var D=$(this).attr("rel");
        
        if(D === 'like') 
        {
        click();      
        $("#likeCount"+messageID).html(C+1);
        $(this).addClass("heartAnimation").attr("rel","unlike");
         
        }
        else
        {
        layer.msg("只能点一次哦");
        }
  
    });
  
    });
    </script>
      <!-- 点赞结束 -->

2、前端利用ajax将文章id传到后台进行update操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
//点赞功能
function click(){
var aid=$("#artid").val();
$.ajax({
             url : "${pageContext.request.contextPath }/click.action",
             type : "post",
             data :"message=null&aid="+aid+"",
             success : function(data) {
                 if(data.message=="success"){
                 //点赞成功后的操作
                      
                 }else{
                     //失败后的操作
                 }
             },
             error : function() {
                 layer.open({
                        icon:2,
                        title: '出错了'
                        ,content: '<div style="color:black;">系统错误</div>'});
                 return false;
             }
         });
  
}
</script>

3、后端update部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//获取点赞人的ip
            //由于反向代理
             String ip  =  request.getHeader("x-forwarded-for"); 
             if (ip == null || ip.length() == 0 || " unknown ".equalsIgnoreCase(ip)) {
                    ip = request.getHeader(" Proxy-Client-IP ");
                }
                if (ip == null || ip.length() == 0 || " unknown ".equalsIgnoreCase(ip)) {
                    ip = request.getHeader(" WL-Proxy-Client-IP ");
                }
                //获取真实ip
                if (ip == null || ip.length() == 0 || " unknown ".equalsIgnoreCase(ip)) {
                    ip = request.getRemoteAddr();
                }
            //获取数据库中的该篇文章的所有点赞ip
                List<Article> content=articleService.showContent(article);  
                article=content.get(0);
             String iplist=article.getZanList();
             //拼接sql字符串,各个ip用逗号隔开
             if(iplist==null){
              article.setZanList(ip+",");
             }else{
              article.setZanList(iplist+ip+",");
              }             //对数据库进行更新
             int num=articleService.clickZan(article);
             if(num>0){
                 message.setMessage("success");
             }
            return message;

4、文章打开前对赞的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//获取请求的ip
        //由于反向代理
         String ip  =  request.getHeader("x-forwarded-for"); 
         if (ip == null || ip.length() == 0 || " unknown ".equalsIgnoreCase(ip)) {
                ip = request.getHeader(" Proxy-Client-IP ");
            }
            if (ip == null || ip.length() == 0 || " unknown ".equalsIgnoreCase(ip)) {
                ip = request.getHeader(" WL-Proxy-Client-IP ");
            }
            //获取真实ip
            if (ip == null || ip.length() == 0 || " unknown ".equalsIgnoreCase(ip)) {
                ip = request.getRemoteAddr();
            }
        //将点赞列表排序成数列
            String[] zanList;
            if(article.getZanList()==null){
                //设置赞的总数
                article.setZanCount(0);
                //上述遍历完没点过赞就设置属性like
                article.setZanAttr("like");
            }else{
                zanList=article.getZanList().split(",");
                //查询当前ip是否点过赞
                for(int i=0;i<zanList.length;i++){
                    if(ip.equals(zanList[i])==true){
                        //点过赞设置前端属性为unlike
                        article.setZanAttr("unlike");
                        article.setZanClass("heartAnimation");
                        break;
                    }else{
                        //上述遍历完没点过赞就设置属性like
                        article.setZanAttr("like");
                    }  
                }
                //设置赞的总数
                article.setZanCount(zanList.length);
            }   


5、文章类的新增属性

1
2
3
4
5
6
7
8
//赞列表
    private String zanList;
    //赞rel属性
    private String zanAttr;
    //赞class属性
    private String zanClass;
    //赞数量
    private int zanCount;

6、数据库:只需在所用的表增加一列zanList即可,将类型设置为mediumtext,就OK了

这样就完成了对网站点赞功能的开发了,我自己的想法并没有借鉴别人的代码,希望能够帮到你们

38人已赞


本文由Fun言网 – 小东Freeman创作,转载请务必附上本文链接和出处,欢迎参与我们的付费投稿计划


你还没有登录,请先 登录注册!
文章评论1