取出51.la统计表格内容为json数据 api

方法1:使用我搭建的api

复制代码
https://51la.api.trustdev.org/某51la应用统计id

id在哪里?
进入主页 https://v6.51.la/user/application
选择你的项目 -> 查看报表 -> 左侧目录「配置」「参数设置」 -> 右侧内容「数据挂件」 -> 下滑到最下方的嵌入代码部分找到src里的id即可

例如以下示例中的id就是3OGw6eTnMvVcw977
<script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.51.la/v6/3OGw6eTnMvVcw977/quote.js?theme=0&col=true&f=12&badge=icon_0&icon=center"></script>

所以组合完毕的链接即:https://51la.api.trustdev.org/3OGw6eTnMvVcw977

方法2:自建cloudflare workers (cf免费服务)

数据统计网站51.la很多人在用,网站上支持挂载这种类型的组件。

但是它的样式是固定的,很多时候我们想的是自己写一个,所以就需要取出,本文采用的方法是使用cloudflare workers,每天100,000次免费。

在cloudflare网站左侧菜单里选择「Workers and Pages」

选择「创建程序」->「从Hello World! 开始」-> 修改worker名为你要的链接前缀 -> 部署

然后再右侧选中「编辑代码」

将以下worker.js内容复制入

javascript 复制代码
/**
 * 51.la 网站统计数据解析 API
 * 部署到 Cloudflare Workers
 * 
 * 使用方式: https://your-worker.workers.dev/3OGw6eTnMvVcw977
 * 或者: https://your-worker.workers.dev/?id=3OGw6eTnMvVcw977
 */

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    
    // 支持 CORS
    const corsHeaders = {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    };

    // 处理 OPTIONS 预检请求
    if (request.method === 'OPTIONS') {
      return new Response(null, { headers: corsHeaders });
    }

    // 获取站点 ID 参数
    // 支持两种方式: /3OGw6eTnMvVcw977 或 /?id=3OGw6eTnMvVcw977
    let siteId = url.pathname.slice(1) || url.searchParams.get('id');

    if (!siteId) {
      return new Response(JSON.stringify({
        success: false,
        error: '请提供站点 ID 参数',
        usage: '/{siteId} 或 /?id={siteId}',
        example: '/3OGw6eTnMvVcw977'
      }, null, 2), {
        status: 400,
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          ...corsHeaders
        }
      });
    }

    try {
      const data = await fetchStats(siteId);
      
      return new Response(JSON.stringify({
        success: true,
        siteId: siteId,
        data: data,
        updatedAt: new Date().toISOString()
      }, null, 2), {
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          'Cache-Control': 'max-age=60', // 缓存 60 秒
          ...corsHeaders
        }
      });
    } catch (error) {
      return new Response(JSON.stringify({
        success: false,
        error: error.message
      }, null, 2), {
        status: 500,
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
          ...corsHeaders
        }
      });
    }
  }
};

/**
 * 获取并解析 51.la 统计数据
 */
async function fetchStats(siteId) {
  const url = `https://v6-widget.51.la/v6/${siteId}/quote.js`;
  
  const response = await fetch(url, {
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
      'Referer': 'https://www.51.la/'
    }
  });

  if (!response.ok) {
    throw new Error(`请求失败: ${response.status}`);
  }

  const jsContent = await response.text();
  
  // 解析数据 - 数据格式为 <span>索引</span><span>数值</span>
  // 索引对应: 0=最近活跃, 1=今日访客, 2=今日访问量, 3=昨日访客, 4=昨日访问量, 5=本月访问量, 6=总访问量
  const regex = /<span>(\d+)<\/span><span>(\d+)<\/span>/g;
  const matches = [...jsContent.matchAll(regex)];

  if (matches.length === 0) {
    throw new Error('无法解析数据,可能站点 ID 无效');
  }

  // 构建数据映射
  const dataMap = {};
  for (const match of matches) {
    const index = parseInt(match[1]);
    const value = parseInt(match[2]);
    dataMap[index] = value;
  }

  // 返回结构化数据
  return {
    // 最近活跃访客数
    recentActive: dataMap[0] ?? 0,
    // 今日
    today: {
      visitors: dataMap[1] ?? 0,  // 访问人数 (UV)
      views: dataMap[2] ?? 0      // 访问量 (PV)
    },
    // 昨日
    yesterday: {
      visitors: dataMap[3] ?? 0,  // 访问人数 (UV)
      views: dataMap[4] ?? 0      // 访问量 (PV)
    },
    // 本月访问量
    monthViews: dataMap[5] ?? 0,
    // 总访问量
    totalViews: dataMap[6] ?? 0
  };
}

在右侧窗口可以测试,参数是51.la中你某个统计网站的id,

复制代码
格式例如:https://your-worker.workers.dev/某51la应用统计id

测试无误即可在其他程序里调用这个API。

相关推荐
Rysxt_1 小时前
Vue 集成富文本编辑器教程
前端·javascript·vue.js·富文本
开发者小天1 小时前
React中的受控组件示例
前端·javascript·react.js
奋斗吧程序媛1 小时前
request请求相关
前端·javascript·vue.js
带刺的坐椅1 小时前
Solon AI 开发学习16 - generate - 生成模型(图、音、视)
java·ai·llm·openai·solon
jiayong231 小时前
Spring Bean 生命周期详解
java·后端·spring
克喵的水银蛇1 小时前
Flutter 通用列表项封装实战:适配多场景的 ListItemWidget
前端·javascript·flutter
Howie Zphile1 小时前
做移动端的 Next.js 项目,可以选哪些 UI?
开发语言·javascript·ui
WX-bisheyuange1 小时前
基于Spring Boot的宠物商城网站设计与实现
前端·javascript·vue.js·毕业设计
卿雪1 小时前
缓存异常:缓存击穿、缓存穿透、缓存雪崩 及其解决方案
java·数据库·redis·python·mysql·缓存·golang