Loading...
宝藏指南 宝藏指南
热门
立即入驻

自建网站流量统计

日常推荐2个月前更新 Jone
68 0 0

宝藏指南算是我第二个好好弄的网站了，直接从wordpress的导航主题爬下来一点点改成go的。已经弄了很长时间了，现在总算看着还算可以了。

原本网站是没有这个站点统计的，看着原作者弄的挺好看的，今天就稍微动动手移植过来了。

效果如下：

自建网站流量统计

具体网页效果可以访问——https://www.baozangzhinan.com/archives/20240214a查看。

PV统计图标实现

整体思路是每次打开某个文章界面先会判断该请求是pc端还是手机端，然后调用后台接口来记录下请求数。

1
2
3
4
5
6
7
 
let articleId = window.location.pathname.split("/")[2]
const device = navigator.userAgent.toLowerCase();
if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(device)) {
fetch("/api/archives/pv?articleId="+articleId+"&type=mobile").then(r => r.json())
} else {
fetch("/api/archives/pv?articleId="+articleId+"&type=pc").then(r => r.json())
}

之后redis里存的值就会自增1，这里后端有个定时任务，24小时一个循环写库。

so，这里就有个bug，写到库里的数据和我们需要的数据根本不一样的，不是我们需要那天的PV量。不过精确度没那么多要求就是了，能用就行，尽力了已经。

原本打算看下卜蒜子怎么实现保存数据到本地的呢，时间有点不够用了遂放弃。Ps.难道它直接存在内存里面么，不可能啊公益服务那么大的访问量这得多大的内存才够用。

前端显示

显示到前端用的是现成的组件——echart，官网是：Apache ECharts

echart使用就不介绍了，官网上示例很多，这里简单说下如何与后端建立起联系。

每次请求页面会调用后端接口，后端返回以下格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
{
    "mobileViews": [
        4,
        1
    ],
    "pcViews": [
        44,
        2
    ],
    "totalViews": [
        48,
        3
    ],
    "x": [
        "2024-2-14",
        "2024-2-15"
    ]
}

前端就根据这几个数据填充echart需要的配置即可。

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data: ['pc端','移动端','合计'], top: "16px"
                },
                xAxis: {
                    type: 'category',
                    data: res.x,
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                yAxis: {
                },
                series: [
                    {
                        name: 'pc端',
                        type: 'bar',
                        data: res.pcViews,
                        color: "#5470c6",
                        itemStyle:{
                            normal:{
                                barBorderRadius:[3,3,0,0]
                            }
                        }
                    },
                    {
                        name: '移动端',
                        type: 'bar',
                        data : res.mobileViews,
                        color: '#9fe080',
                        itemStyle:{
                            normal:{
                                barBorderRadius:[3,3,0,0]
                            }
                        }
                    },
                    {
                        name: '合计',
                        type: 'line',
                        data: res.totalViews,
                        color: "#fac858"
                    }
                ]
            };
            myChart.setOption(option);

实现很简单，感兴趣的小伙伴可以自行尝试，给自己网站加个流量统计图吧。

© 版权声明
文章版权归作者所有，未经允许请勿转载。

相关文章

推荐几个AI绘画prompt提示词网站
Jone
67
windows命令行美化小工具
Jone
102
节日快乐，顺便总结一波
Jone
46
抖音视频下载工具
Jone
49
有哪些是你随手一拍但很惊艳的照片
Jone
71
初学爬虫—-爬笔趣阁小说
Jone
80
扫码关注不迷路！
宝藏指南 - 一个集合大量优质在线工具的导航网站，包括实用工具、影音工具、图片工具、编程工具、网络资源等几十种分类，覆盖全网在线工具，只收录最优质的的精品网站，做一个真正有用好用的工具导航网站。

友链申请免责声明广告合作关于我们

扫码加微信宝藏指南

扫码加微信
Copyright © 2024 宝藏指南 豫ICP备2023014319号