以前博客的页面计数器使用的是卜算子,使用方法点击这里查看,但是页面在加载的时候，并不是很快,于是自己使用Redis制作了一个简单的页面计数工具。

后台代码

我在后台使用的是Node.js，使用ioredis来对Redis进行操作，从而保存页面的访问次数。

 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

var redis = require('ioredis');
var client = new redis();
var http = require('http');
var url = require("url");

http.createServer(function (req, res) {
    var arg = url.parse(req.url, true).query;
        console.log('数据接收完毕');
        //截取url
        console.log(arg.path);
        console.log(arg.subpath);

        res.setHeader("Access-Control-Allow-Origin","*");	//允许跨域访问
        res.setHeader('Content-Type','text/html');
        res.writeHead(200, {
            "Content-Type": "text/plain;charset=utf-8"
        });
        var v="";
		//每次访问，增加在redis中存储键值
        client.incr(arg.path);
        client.incr(arg.subpath);
        //返回页面访问次数
        client.get(arg.path).then(function(result){
            client.get(arg.subpath).then(function(subreuslt){
                res.write(JSON.stringify(result));
                res.write(',');
                res.write(JSON.stringify(subreuslt));
                res.end();
            });
        });
}).listen(8000, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8000/');

解析url获取其中的参数，将对应的键值该改变，并且返回技术结果。

页面代码

前端页面中，通过访问后台代码获取页面访问数量，实时获取页面访问次数。

 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

var xmlhttp;
  var url=location.href;
  var host=location.hostname;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

      xmlhttp.open("GET","http://59.173.238.35:2222?"+"path="+host+'&'+"subpath="+url,true);   
      
      xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            result=xmlhttp.responseText;
            result=result.replace(/"/,"");
            result=result.replace(/"/,"");
            result=result.replace(/"/,"");
            result=result.replace(/"/,"");
            result=result.split(",");
            document.getElementById("busuanzi_value_site_pv").innerHTML= result[0];
            document.getElementById("busuanzi_value_page_pv").innerHTML= result[1];
        }
      }
xmlhttp.send();

使用

如果需要使用，要做的很简单：

加入脚本

在需要的页面中增加如下代码：

1
2

<script type="text/javascript" src="http://7xkswi.com1.z0.glb.clouddn.com/eclipsesv_jspvcount.js" async="async">
</script>

顺便说一下，把js或者图片等静态文件托管在七牛云存储上，可以提高页面的访问速度。

增加标签

在页面适当的位置增加标签：

1
2
3
4
5
6

<span id="busuanzi_container_site_pv">
  本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span id="busuanzi_container_page_pv">
  本页总访问量<span id="busuanzi_value_page_pv"></span>次
</span>

这样，就可以愉快的使用页面计数器了。