viewer-catch 基于Koa与MongoDB的站点统计平台

又是一个练手项目。看了一圈实习招聘条件,大多数前端都要掌握一门后台语言,nodejs 当然是前端开发者的首选。初入前端,我以为我能学成全栈,两年过去这才摸到门槛。泪目

背景

由于我的静态博客没有动态网站的访客统计功能,之前用的是友盟的站长统计,但这个平台 dns 污染严重,体验不是很好。我想要做一个平台,只要简单的引入就实现任意网站、任意页面的统计功能,还要能在页面中插入统计结果,再做一个点赞的功能就更好了。

由此 viewer-catch (原谅我起名废) 应运而生!

开始使用!

引用

只需要在网站头部添加这一段代码,每一个页面都能分开统计,还支持区分统计 UV 和 PV ,甚至有点赞统计功能!

<script defer src="https://viewer-catch.herokuapp.com/client.js">

展示

在指定的地方加上类,它能自动替换统计数据,还能控制隐藏显示!

如果需要控制显隐 .VCC_before 是必要提前准备的类,推荐是 visibility: hidden; 或者 display: none; ,当数据类替换完成时它会自动去除。

<style>.VCC_before{visibility: hidden;}</style>
<div class='VCC'>
  <div> 页面UV:<span class='VCC_uv'>正在获取</span> </div>
  <div> 页面PV:<span class='VCC_pv VCC_before'></span> </div>
  <div class='VCC_before'> 页面点赞数:<span class='VCC_like'></span> </div>
</div>
<div class='VCC VCC_before VCC_uv_sum'></div>
<div class='VCC VCC_before VCC_pv_sum' vcc_showin='/'></div>
<div class='VCC VCC_before VCC_like_sum' vcc_hidein='/'></div>

更简单的使用

对于不用展示数据、没有统计 UV 需求的网站或页面,以下简单引入是更好的方案。

<script sync src="https://viewer-catch.herokuapp.com/simpleCatch?d=xxx.com&p=/path">

因标准请求头限制,必须传参使用

  • d:Doname 站点域名 必填
  • p:Path 页面路径 选填 以 / 开头 缺省为 "/"

更复杂的使用

项目预留了相关接口,可以访问 /apis 查看接口文档。

关于平台部署

https://viewer-catch.herokuapp.com/ 部署在 Heroku,每个月只有 550 小时的免费时长,数据库则是用的 MongoDB Atlas 的免费套餐 (老白嫖怪了),如果你条件允许可以自己部署平台。你可以参考这篇文章:利用 MongoDB Atlas 与 Heroku 架设 Free 的后台服务

Deploy