具体需求：在文章管理系统中，需要统计文章详情页面的点击量，来体现该文章是否受用户欢迎，方便管理员调整日后编辑新文章时的内容方向。

解决方案：设置有过期时间的cookie

　　我们在访问文章详情页面时，拿到该文章的id和该文章所属栏目的id，配合一些特殊符号，以组合成一个独一无二的专属该文章页的cookie名，避免影响其他文章页面的点击量统计。例如有一篇文章名为《水浒传内容简析》的文章，该文章id为7，隶属于《四大名著》栏目下，该文章栏目为2，我给出一段特殊字符串:"jia"。则该文章的cookie名为字符串：2jia7。

　　当前网页点击量的计算，并没有一个明确的计算方式。同一ip访问同一页面，停留时间超过多久，另算一个点击量。这个停留时间即是cookie的过期时间，按自身情况设置即可，我设置的时间为30分钟。

　　目前我采用了jquery.cookie.js来设置cookie，当然你要用JavaScript来设置cookie也是可以的。

代码：

　　前端页面增加一个隐藏的输入框，在body加载完成后触发增加点击量的js函数addclick()：

<body onload="addclick()">

<input id="addclick" type="hidden" name="/article/article/addclick" value="{$articleInfo.id}" class="{$articleInfo.articlecloumnid}">

　　在这段代码中，我采用了thinkphp框架，隐藏的输入框中具体存储的内容：name中储存处理 增加点击量事件 的php文件路径，value中储存该文章id，class中储存该文章所属栏目id。

　　js代码：

//用户点击文章或是课程的详情页，点击量加1

function addclick(){

    var id = $('#addclick').val();//拿到文章id，后台文件会根据此id，到数据库为此id的文章的点击量加1

    var cookieName = $('#addclick').attr('class') + 'jia' + id;//组合独一无二的专属该文章的cookie名

    var jsonString = {"id":id};

    var url = $('#addclick').attr('name');//拿到后台处理 增加点击量事件 的php文件路径

    if($.cookie(cookieName)==null){//如果没有这个cookie，则说明是第一次点击该页面，或者已经过去了30分钟，可以给点击量+1了

        $.ajax({

            type : "post",

            url : url,

            data : jsonString,

            async : true,

            success: function(msg){

                var date = new Date();

                date.setTime(date.getTime()+30*60*1000);//只能这么写，30表示30分钟

                $.cookie(cookieName,cookieName,{expires: date});//创建一个过期时间为30分钟的cookie

                //点击量成功加1，则打印信息

                console.log(msg);

                },

            error: function(XMLHttpRequest, textStatus, errorThrown) {

                console.log("连接超时！");

            }

        });

    }

};

　　后台逻辑我就不贴出来了，基本就是数据库连接，然后只要有ajax上传，就根据post过来的文章id，对文章点击量进行加1。

　　cookie示例图：

　　该cookie将会在30分钟后过期，30分钟后，同一ip再次访问此页面，该文章的点击数就会再次加1。

js处理文章详情页点击量统计的更多相关文章

  1. python 全栈开发，Day81(博客系统个人主页,文章详情页)

    一.个人主页 随笔分类 需求:查询当前站点每一个分类的名称以及对应的文章数 完成这个需求,就可以展示左侧的分类 它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...

  2. BBS之文章详情页搭建

    博客评论相关 博客文章详情页搭建 {% extends 'base.html' %} {% block css %} <style> #div_digg { float: right; m ...

  3. phpcms文章点击量统计方法

    phpcms用户广大,很好用,很傻瓜.设计思路也很好,对cms的常见功能都有设计,可以作为自己开发的参考. 最近看了下phpcms的源码关于文章点击量统计的这块,自己记录下. 默认文章点击量显示的位置 ...

  4. django博客项目8：文章详情页

    首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容.现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样 ...

  5. HelloDjango 第 08 篇：开发博客文章详情页

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按 ...

  6. thinkPHP中的文章详情页实现“上一篇下一篇”功能经验分享

    前段时间在公司中接触到了用thinkPHP搭建的项目,其中涉及到了文章详情页上一篇下一篇翻页的功能实现效果. 因为刚接触这套框架和PHP,所以整理一下实现该功能的经验方法. 如果有不到位的地方,欢迎指 ...

  7. Django:文章详情页面评论功能需要登录后才能使用，登录后自动返回到文章详情页

    背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...

  8. 安卓开发——WebView+Recyclerview文章详情页，解决高度问题

    安卓开发--WebView+Recyclerview文章详情页,解决高度问题 最近在写一个APP时,需要显示文章详情页,准备使用WebView和RecyclerView实现上面文章,下面评论.出现了W ...

  9. BBS项目分布搭建三(个人站点时间归档补充，实现侧边栏跳转、无线级分类、实现文章详情页展示功能)

    BBS项目分布搭建三(个人站点时间归档补充,) 1. 个人站点时间归档 """ settings.py设置最好更改以下: LANGUAGE_CODE = 'zh-hans ...

随机推荐

  1. Harris角点检测理论

     这样想象一下,直线上的一个点在垂直于直线的方向上有最强的梯度.沿着直线的方向梯度较低,意思是直线上的像素点与它周围的像素点看起来相似.我们进行的角点检测是梯度强度明显高于其他像素的点,可能就是目标处 ...

  2. python接口自动化测试之根据excel中的期望结果是否存在于请求返回的响应值中来判断用例是否执行成功

    1.首先在excel中填写好预期结果的值 这里判断接口成功的依据是预期结果值是否存在于接口的返回数据中. 一般接口的返回值都是json对象,我们需要将json对象转换为json格式的字符串 如下图,进 ...

  3. Devexpress 18.2.7 破解

    1.破解文件下载 链接:https://pan.baidu.com/s/1DVANKYR3dBeHuc8DgPUihA 提取码:fyll 2.破解方式 解决压缩包,解压之后选中 DevExpress. ...

  4. CentOS安装RabbitMQ-yum

    CentOS安装RabbitMQ----yum安装 一.安装erlang 由于CentOS没有erlang源,需用 第三方源(http://rpmfusion.org/Configuration) 1 ...

  5. [CF1220C] Substring Game in the Lesson - 博弈论

    [CF1220C] Description 给定一个字符串 \(S\) , 同时维护一个区间 \([l,r]\) .轮流操作,每次可以扩展到一个新区间使得原区间是新区间的真子区间,并且字典序更小,不能 ...

  6. 微信小程序前台的用户数据入库（后台Laravel）

    首先 我们可以看到微信小程序官方 文档 wx.login   api-login.jpg 通过此图 我们知道 前台要传 一个 code给后台,后台拿到code 并结合appid和appsecret请求 ...

  7. vue组件引入

    /src/route/index.js import Demo2 from '@/pages/demo2/index.vue' { path : '/demo2', name : 'demo2', c ...

  8. php基础系列之 数据的存储和读取

    ·文件处理 ·写入一个文件 1,打开这个文件.如果这个文件不存在,需要先创建它 2,将数据写入这个文件 3,关闭这个文件 ·从一个文件读出数据 1,打开这个文件.如果这个文件不能打开(例如,文件不存在 ...

  9. js面向对象的程序设计 --- 中篇(创建对象) 之 工厂模式和 构造函数模式

    创建对象 虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复代码. ·工厂模式 工厂模式是一种广为人知的设计模式,这种模式 ...

  10. 【css】用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...