vuepress+百度统计 API 调用+源码

最新推荐文章于 2024-04-01 21:34:14 发布

贝茵斯都

最新推荐文章于 2024-04-01 21:34:14 发布

阅读量1.6k

点赞数 3

分类专栏： vuepress 文章标签： vuepress 百度

本文链接：https://blog.csdn.net/weixin_40532650/article/details/116064497

版权

vuepress 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

⭐️ ⭐️ 这是百度普通版统计 API 使用，而非百度商用版 API
百度统计
 百度统计-用户手册
这里有各式各样的请求参数和示例，总能找到你想要的返回数据

1 必要条件

1.1 在 vuepress 项目中已引入百度统计

详情可见：引入百度普通版统计

1.2 vuepress 项目中已有本地主题文件 theme，这个并不是必要的，但我是为了方便显示统计文章的浏览量，而使用的自定义主题

详情可见：自定义主题开发

2 百度统计 API 必要参数获取

2.1 登录百度统计

进入管理页面下的其他设置-数据导出服务

2.2 登录百度开发者中心控制台

在这里插入图片描述

可以查看到自己的基本信息

在这里插入图片描述

2.3 调用 URL 获取授权码

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

在这里插入图片描述

2.4 获取 ACCESS_TOKEN

http://openapi.baidu.com/oauth/2.0/token?grant_type=authorization_code&code={CODE}&client_id={CLIENT_ID}&client_secret={CLIENT_SECRET}&redirect_uri={REDIRECT_URI}

在这里插入图片描述

2.5 获取你的网站信息列表

⭐️ 有一个重要参数-网站 ID，是请求数据用到的参数，我一度把它和控制台中的 ID 记混

https://openapi.baidu.com/rest/2.0/tongji/config/getSiteList?access_token=1.a6b7dbd428f731035f771b8d15063f61.86400.1292922000-2346678-124328

在这里插入图片描述

2.6 更新 ACCESS_TOKEN

ACCESS_TOKEN：有效期一个月

REFRESH_TOKEN：有效期 10 年

http://openapi.baidu.com/oauth/2.0/token?grant_type=refresh_token&refresh_token={REFRESH_TOKEN}&client_id={CLIENT_ID}&client_secret={CLIENT_SECRET}

在这里插入图片描述

至此所有主要信息已获取：

site_id = 网站 ID；

ACCESS_TOKEN = 身份验证信息；

REFRESH_TOKEN = 后续更新 ACCESS_TOKEN 所必须

3 API 线上调试

3.1 入口在数据导出服务页面的底部

在这里插入图片描述

3.2 调用结果

在这里插入图片描述

3.3 请求参数及示例

百度统计-用户手册

这里有各式各样的请求参数和示例，总能找到你想要的返回数据

在这里插入图片描述

4 vuepress 调用百度统计 API 接口

4.1 创建请求 JS 文件

创建 tongji.js 文件（名字随意，认得就行），该文件放在 theme 文件夹下的 util（工具包）下，便于管理；

4.2 跨域处理

此处使用 Ajax 的 get 请求，dataType=jsonp 的形式；

//请求百度统计公开接口获取统计数据
async function getBaidu() {
  var num = 0;
  await $.ajax({
    type: "get",
    dataType: "jsonp",
    url: "https://openapi.baidu.com/rest/2.0/tongji/report/getData",
    data: {
      access_token: "xxx", //身份验证
      site_id: "xxx", //网站id
      method: "overview/getCommonTrackRpt", //需要的报告范围
      start_date: "20210401", //开始时间
      end_date: "20310401", //结束时间
      metrics: "pv_count", //报告所包含的数据类，pv_count=浏览量
    },
    success: function(res) {
      num = visiteNum(res.result); //数据处理
    },
    error: function(err) {
      console.log("error======", err);
    },
  });
  return num;
}

4.3 异步处理

因为要等待接口返回值计算后得出浏览量，在 4.2 中使用的 async + await 形式就是 ES6 中的异步处理方法

这又引起了另一个问题，异步处理的返回值问题，返回值并非正常的数据，则需要入口方法进行的数据处理

import $ from "jquery";
var nowPageUrl = "";

//入口方法
export function getCount(path) {
  nowPageUrl = path;
  //
  return new Promise((resolve, reject) => {
    getBaidu().then((res) => {
      resolve(res);
    });
  });
}

页面引用时

methords:{
    visiteChange: async function() {
        //this.$page vuepress自带方法
        //this.$page.path=当前页面的路径，为了在众多返回数据中，筛选当前页浏览量
        const num = await getCount(this.$page.path);
        this.visite = num;//浏览量
    },
}

数据处理

//计算对应页面的浏览量
function visiteNum(data) {
  var visite = 0;
  //计算总浏览量

  if (data && data.visitPage) {
    if (nowPageUrl === "home") {
      // visite = data.sourceSite.items[0][1];-直观统计包括了本地测试域名和正式域名浏览量之和
      //受访页面列表
      const items = data.visitPage.items || [];
      //查询对应域名下精确统计总数
      const arrs = items.filter(
        (v) => v[0].indexOf(window.location.origin) > -1
      );
      visite = arrs.reduce((pre, cur) => {
        pre += Number(cur[1]);
        return pre;
      }, 0);
    } else {
      //计算单页面浏览量
      // encodeURI-转码
      // decodeURI-解码
      //受访页面列表
      const items = data.visitPage.items || [];
      //当前页面完整地址
      const pathurl = window.location.origin + nowPageUrl;
      for (let i = 0; i < items.length; i++) {
        if (items[i][0] === pathurl) {
          visite = items[i][1];
        }
      }
    }
  }
  return visite;
}

4.4 完整 tongji.js 代码

/*
 * @name:
 * @author: wuxd
 * @Date: 2021-04-22 09:25:01
 * @LastEditTime: 2021-04-23 16:55:14
 */
import $ from "jquery"; //在vuepress所属package.json中安装jquery
var nowPageUrl = "";

//入口方法
export function getCount(path) {
  nowPageUrl = path;
  return new Promise((resolve, reject) => {
    getBaidu().then((res) => {
      resolve(res);
    });
  });
}

//请求百度统计公开接口获取统计数据
async function getBaidu() {
  var num = 0;
  await $.ajax({
    type: "get",
    dataType: "jsonp",
    url: "https://openapi.baidu.com/rest/2.0/tongji/report/getData",
    data: {
      access_token: "xxx", //
      site_id: "xxx",
      method: "overview/getCommonTrackRpt",
      start_date: "20210401",
      end_date: "20310401",
      metrics: "pv_count",
    },
    success: function(res) {
      num = visiteNum(res.result);
    },
    error: function(err) {
      console.log("error======", err);
    },
  });
  return num;
}

//计算对应页面的浏览量
function visiteNum(data) {
  var visite = 0;
  //计算总浏览量

  if (data && data.visitPage) {
    if (nowPageUrl === "home") {
      // visite = data.sourceSite.items[0][1];-直观统计包括了本地测试域名和正式域名浏览量之和
      //受访页面列表
      const items = data.visitPage.items || [];
      //查询对应域名下精确统计总数
      const arrs = items.filter(
        (v) => v[0].indexOf(window.location.origin) > -1
      );
      visite = arrs.reduce((pre, cur) => {
        pre += Number(cur[1]);
        return pre;
      }, 0);
    } else {
      //计算单页面浏览量
      // encodeURI-转码
      // decodeURI-解码
      //受访页面列表
      const items = data.visitPage.items || [];
      //当前页面完整地址
      const pathurl = window.location.origin + nowPageUrl;
      for (let i = 0; i < items.length; i++) {
        if (items[i][0] === pathurl) {
          visite = items[i][1];
        }
      }
    }
  }
  return visite;
}

5 页面效果

⭐️ 因为路径有中文所以会被转译
star: 页面打印 this.$page 就会发现 path 中的中文也是被转译过的

在这里插入图片描述

贝茵斯都

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
vuepress+百度统计 API 调用+源码

⭐️ ⭐️ 这是百度普通版统计 API 使用，而非百度商用版 API百度统计百度统计-用户手册这里有各式各样的请求参数和示例，总能找到你想要的返回数据1 必要条件1.1 在 vuepress 项目中已引入百度统计详情可见：引入百度普通版统计1.2 vuepress 项目中已有本地主题文件 theme，这个并不是必要的，但我是为了方便显示统计文章的浏览量，而使用的自定义主题详情可见：自定义主题开发2 百度统计 API 必要参数获取2.1 登录百度统计进入管理页面下的其他设置-.
复制链接

扫一扫

专栏目录