GithubpagesHexo博客访问量统计功能的实现

之前使用Hexo搭建了自己的github.io博客https://littlefogcat.github.io/。但是没有访问统计功能，让人头大。于是决定着手整一个。

首先需要有一台自己的服务器，如果没有，或者图方便的话，就用busuanzi.js吧。不过对我个人而言，我更喜欢数据在自己手里，而且如果开发其他新功能也会方便许多。同时，也可以顺便学习一下技术。

由于我对前后端开发几乎都是一窍不通，所以耗费了很多精力，不过最后还是稍有所得，在此记录。

1. 要点

1.1 跨域（同源策略）

由于浏览器的安全策略，js只可以访问相同协议、相同域名、相同端口（同源）下的资源。这就带来一个问题，博客中的js文件无法调用服务器端的接口。

1.2 jsonp

为了解决非同源跨域问题，这里采用了jsonp的解决方案。由于jsonp只支持get方式，所以参数都写在url中。

js端：

var currentPageUrl = window.location.href; // 当前页面地址// 处理服务端返回的数据
function handleCallback(jsonData) {// 将获取到的访问量写入html中
}// 参数
var arrivalServer = "https://myApi?callback=handleCallback&url=" + currentPageUrl;


其中myApi是服务端暴露的获取访问量的接口，而当前页面的url作为唯一标识符做参数传递。（这里是有问题的，最好还是不要把url写在参数里，可以考虑base64编码）callback=handleCallback表示当服务端返回数据时，调用js里的handleCallback函数。

服务端

仅就Java而言，使用com.fasterxml.jackson.databind.util.JSONPObject这个类可以快速创建一个jsonp对象。
示例：

// Code in Controller@ResponseBody@RequestMapping("/arrival")public Object getGithubIoArrival(@RequestParam String callback,@RequestParam String articleUrl,@RequestParam(required = false) String ip) {GithubIoArrivalResult result = service.getArrival(articleUrl, ip);return new JSONPObject(callback, result);}


1.3 https

由于Github Pages强制使用https访问，所以服务端也应该支持https。这篇文章有详细的步骤：5分钟内搞定 Tomcat 的 SSL 配置
如果不想整个应用都是用https，只用将url-pattern标签的内容改成所需要的即可。
如：/githubio/*

2. 服务端

首先明确需求，很简单：

• 每个页面单独统计访问量


• 单个ip每日最多计算一次访问量


• 所有单次访问都有记录

这样需要两张表，一张保存每个页面的访问量（pv），一张保存详细的访问记录（record）。

逻辑很简单。当一个Get请求到达时，首先将其保存至record表中，然后再查找当天是否已经浏览过本页面。只有当这个ip当日没有浏览过本页面时，才更新pv表，本页面的浏览量+1。最后返回页面浏览数。

3. 前端（Hexo）

找到hexo博客的根目录， 修改themes\landscape\layout\_partial\head.ejs文件。
在其中添加一行

<script src="http://pv.sohu.com/cityjson?ie=utf-8" type="text/Javascript"></script>


这个搜狐的链接，用于获取当前用户的IP地址。

然后，修改themes\landscape\layout\_partial\footer.ejs文件。添加以下内容

<script type="text/Javascript">var href = window.location.href; // 当前页面地址function handleCallback(jsonData) {console.log("jsOnData= " + jsonData);var arrival = jsonData.arrival;document.getElementById("page_view").innerHTML = arrival;}var src = "https://106.14.152.93:8443/third/githubio/arrival?callback=handleCallback&articleUrl="+ href + "&ip=" + returnCitySN["cip"];document.write(" + src + "\"><\/script>");</script>


至此，访问统计功能就完成了。

示例
LittleFogCat’s Page - https://littlefogcat.github.io/