因为之前我的界面是用的51la的数据，但是我近期为了隐私和数据考虑想尽可能减少第三方的统计服务，所以想要移除掉51la，但是在我的界面的数据用的51la的数据，所以得想办法使用百度统计来替换一下。

百度统计提供了TongjiAPI，所以我们可以直接使用这个API来获取。

实现效果：

https://api.zhheo.com/baidutongji/info.php

1
2
3
4
5
6
7
8
{
    "today_uv": 219,
    "today_pv": 467,
    "yesterday_uv": 652,
    "yesterday_pv": 1322,
    "last_month_pv": 2020,
    "last_year_pv": 681586
}

部署

获取项目代码

将php放入网站目录。

我们需要修改一些信息。

1
2
3
4
5
// 设置API密钥和网站ID
$apiKey = 'apiKey';
$secretKey = 'secretKey';
$siteId = 'siteId';
$code = '授权码';

调用百度账号的 API 接口，用户需要通过百度开发者中心的身份验证，具体步骤如下：

  1. 进入百度统计-管理-数据导出服务

  2. 开通数据导出服务，获得API Key与Secret Key

  3. 通过如下URL进入百度账号登录页，此处的登录账号就是您登录百度统计查看报告数据的账号，登录完成后将跳转至获取code的页面：

    1
    http://openapi.baidu.com/oauth/2.0/authorize?response_type=code&client_id={CLIENT_ID}&redirect_uri=oob&scope=basic&display=popup

    其中：

    • {CLIENT_ID}填写您的API Key

siteid为你的网站id，查看百度统计报告的url中会显示siteid。例如：

siteid

APIKey等信息获取图示：

授权码获取图示：

授权码

访问一次

在代码修改完成后要立即访问一次，否则授权码会很快过期。

添加访问限制

因为就存这个key这种小数据我就没用数据库，直接json存的本地。所以你需要添加一个访问限制避免key泄露（虽然泄露也不是特别隐私的数据，但是还是建议加一下限制）当然你也可以改源码自定义json的文件位置放在非运行目录下，我是为了方便迁移所以都放一起了。

主要是禁止掉tokens.json的访问即可。（以宝塔面板为例）

宝塔禁止访问

然后尝试访问一次tokens.json，如果访问失败了就大功告成。

前端请求

前端请求就比较相似了，简单的修改了一下原有的代码（php的地址换成你的）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
fetch("https://api.zhheo.com/baidutongji/info.php")
  .then(res => res.json())
  .then(data => {
    let title = {
      "today_uv": "今日人数",
      "today_pv": "今日访问",
      "yesterday_uv": "昨日人数",
      "yesterday_pv": "昨日访问",
      "last_month_pv": "最近月访问",
      "last_year_pv": "最近年访问"
    };

    let s = document.getElementById("statistic");

    // 遍历 JSON 数据并根据 title 对象匹配显示
    for (let key in data) {
      if (data.hasOwnProperty(key) && title[key]) {
        s.innerHTML += `<div><span>${title[key]}</span><span id="${key}">${data[key]}</span></div>`;
      }
    }
  })
  .catch(error => console.error('Error:', error));