背景

两年前,为了有个中央能记录本人一些技术心得,于是用wordpress搭建了集体站点到当初曾经写了上百篇的博文,但始终有个问题没有解决,就是如何统计博客的访问量,也装置了wordpress统计插件WP Statistics但理论用下来成果并不好,起因在于

  • 我关怀每天每篇文章的访问量
  • 关怀访问者所处的城市
  • 关怀拜访起源
  • 关怀搜寻关键词

这些数据你在插件里也能找到,但插件同时也混淆了很多不须要的数据,并且并没有依照我预期的格局组织好,总之就是不好用。前面又试了百度统计还不如WP Statistics,基于以上这些状况,因而思考自开发一个博客流量剖析平台。

计划

须要记录的数据

本着实现外围性能为目标,在字段上并没有记录太多字段,mysql表构造如下

CREATE TABLE wp_statistic (    id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,    ip varchar(20),    location varchar(200),    title varchar(200),    post_id int,    referrer varchar(500),    visit_time timestamp NULL DEFAULT CURRENT_TIMESTAMP)
  • ip:访问者ip
  • location:访问者地点
  • title:文章题目
  • post_id:文章id
  • referrer:援用
  • visit_time:拜访工夫,默认以后工夫

地点问题

如何依据ip获取地点,百度有接口,但接口须要一个timestamp字段,该字段应该是以某种规定进行hash,摸索了一段时间破解不了,遂放弃,最初抉择了太平洋网络接口,不仅格局多样,而且没有限度。

curl http://whois.pconline.com.cn/ip.jsp?ip=112.47.173.143福建省泉州市 移通

技术选型

我自身主力语言是java,身份也是java开发,但看过我博客的同学应该晓得,我对前端也有肯定的涉略,虽算不上精通,但写写管理系统还是足够的,前端抉择vue,理由是简略好学,ui抉择vuetifyjs,vuetifyjs是在尤雨溪在知乎上这篇答复第一次接触,相比国内的ant design和element ui,给人感觉就是更具匠心,总之被安利了,本人也给予这个框架二开了一个admin的框架,前面会提到该方面内容。后端当然首选java,但思考到服务器配置顾此失彼,阿里云ECS 1核1G,曾经跑了一个wordpress,很难再跑一个jvm,不得与抉择PHP作为后端开发语言,这样能够利用现有的Apache PHP,因为PHP也是现用现学,所以代码上可能有一些不合理的写法大家多担待,也心愿PHP高手可能指出问题。

流程

大略流程如下

  • 在wordpress页面插入一段js
  • js会创立一个script标签,借鉴了jsonp的思路,script标签能够绕过跨域问题
  • script会申请后盾,将一些要害信息,比方title和refrerer作为script的申请参数带到后盾
  • 后盾记录申请信息

引入js代码

须要批改wordpress页面代码,引入一段js,该js将数据传入后盾,根本大多数网站剖析实现原理都是相似,有很多防备引入,这边举荐批改主题目录下header.php文件,具体门路为wp-content/themes/{主题名称}/header.php,引入的代码如下

<script>var _hmt = _hmt || [];(function() {  var hm = document.createElement("script");  var src="/log/server.php"+"?title="+document.title+"&referrer="+document.referrer;  hm.src = src;  var s = document.getElementsByTagName("script")[0];   s.parentNode.insertBefore(hm, s);})();</script>

/log/server.php是后端数据接管接口

server.php

<?phprequire_once('../wp-config.php');require_once('../wp-includes/wp-db.php');require_once('../wp-includes/class-wp-http-curl.php');header("Content-Type: text/html; charset=utf-8");$title = $_GET["title"];$referrer = $_GET["referrer"];$ua = $_SERVER['HTTP_USER_AGENT'];$ip = $_SERVER['REMOTE_ADDR'];$wpdb = new wpdb(DB_USER, DB_PASSWORD, DB_NAME, DB_HOST);$http = new WP_Http_Curl();$resopnse = $http->request('http://whois.pconline.com.cn/ip.jsp?ip=' . $ip);$location = iconv('GB2312', 'UTF-8', $resopnse['body']);$wpdb->query($wpdb->prepare("INSERT INTO wp_statistic(ip,location,title,ua,referrer) VALUES (%s,%s,%s,%s,%s)", $ip, $location, $title, $ua, $referrer));?>
  • wordpress自身自带了一个数据库操作类wpdb和curl类WP_Http_Curl,间接调用就行
  • 获取ip返回的是GBK,须要转为UTF-8

这样通过js和server.php的配合,拜访数据就胜利进来了,前面就是要开发治理界面用于展现。

前端

前端是应用基于vuetifyjs开发的一个admin框架,先看下成果

该框架包含以下基本功能

  • 登录页
  • 菜单配置
  • 利用信息配置
  • 单页面拜访能力
  • 封装好的查问夜
  • 等等

以下面页面为例,页面展现的是实时的拜访数据,前端代码如下

<template>    <v-page-data-table            title="实时拜访数据"            key-name="id"            :fields="fields"            :height="535"            hide-row-action            query-api="REALTIME_QUERY">        <template v-slot:referrer="{item}">            <a target="_blank" :href="item.referrer" class="pointer-text" style="text-decoration: none">{{item.referrer}}</a>        </template>    </v-page-data-table></template><script>    import realTimeFields from "./realTimeFields";    export default {        name: "RealtimeQuery",        data() {            return {                fields: realTimeFields            }        }    }</script>

代码虽短,但查问页该有的性能都蕴含,包含

  • 分页
  • 全局含糊搜寻
  • 单字段含糊搜寻
  • 高级搜寻
  • 下载excel
  • 刷新
  • 自定义按钮
  • 等等

因而能够保障在一天之内实现所有页面的开发,本次开发了三个页面

  • 实时拜访数据
  • 文章拜访排行

  • 每日拜访统计

后端接口

后端接口应用php开发,开发好的接口间接上传到wordpress源码目录下(这里我创立了一个log目录),后端包含以下接口

  • 登录接口
  • 实时拜访数据接口
  • 文章拜访排行接口
  • 每次拜访统计接口

零碎拜访

零碎目前已开发,有趣味的同学能够点击这里拜访零碎,用户名明码为guest/guest如果你有更好的倡议和意见欢送留言

源码

所有代码都已上传至github,欢送start