手把手教你用API实现网站访问量统计：以ApiZero计数器为例

原创于 2026-07-05 13:34:25 发布 · 142 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

Web开发

API实践

为什么需要访问量计数器？

网站访问量（Page Views / Unique Visitors）是衡量站点活跃度和内容价值的基础指标。传统做法通常是自建数据库表，每次请求时 INSERT 或 UPDATE 计数。这种方式虽然灵活，但存在几个痛点：

小型项目或静态站点（如 GitHub Pages、Vercel 部署的纯前端应用）没有后端持久化能力。
自建系统需要处理并发写、数据备份、SQL注入防御等问题，运维成本高。
如果只是想要一个简单的计数器（比如博客底部“总访问量：XXX”），用第三方 API 能极大降低开发量。

ApiZero 是一个聚合 API 工具集市，覆盖天气、IP、翻译、AI 等数百个高质量接口。其中的 访问量计数器 API 提供了稳定、无需数据库的统计能力，支持按天、按小时细分，并提供 JSON 或 SVG 两种返回格式（可直接嵌入 <img> 标签）。本文将以该 API 为例，带你一步步完成集成。

ApiZero 访问量计数器 API 概览

功能特性

无服务端侵入：只需在前端或轻量后端发起 HTTP 请求，无需维护数据库。
多维度统计：可获取总访问量（PV）、今日访问量、小时级趋势。
站点隔离：通过 site 参数区分不同域名/项目。
双重输出：支持 JSON（便于前端二次处理）和 SVG（直接显示动态计数图片）。
免费额度：通常提供每月一定量免费请求，超出后按量计费（具体见官网价格页）。

接口描述

注意：以下为示例性接口描述，实际端点以 ApiZero 官方文档为准。

请求方式：GET 基础 URL：https://api.apizero.cn/v1/visits/counter 认证：需在请求头中添加 X-API-Key: <你的密钥>（通过注册获取）

参数：

参数名	类型	必填	说明
site	string	是	要统计的站点域名，如 `www.example.com`
period	string	否	统计周期：`all`（总览）、`today`（今日）、`hourly`（逐小时），默认 `all`
format	string	否	响应格式：`json`（默认）或 `svg`

返回值（JSON 示例）：

{
  "code": 200,
  "data": {
    "site": "www.example.com",
    "period": "all",
    "total_visits": 12345,
    "unique_ips": 1024
  },
  "message": "success"
}

若 format=svg，则直接返回 image/svg+xml 格式的图片内容，可放在 <img src="..."> 中。

注册并获取 API Key

访问 ApiZero 官网，点击“免费注册”。
完成邮箱或手机验证后，进入控制台。
在“API 密钥管理”页面创建新的密钥，建议设置白名单 IP 或域名限制。
将密钥妥善保存（如环境变量 APIZERO_API_KEY）。

多数 API 平台会提供测试积分，初次使用无需充值。

代码实现：调用计数器 API

以下提供三种主流语言的调用示例，均假设 API Key 已存在环境变量中。

1. Node.js（Express 后端）

适用于需要在服务端聚合数据后再返回给前端的场景，比如你想在后台日志中保存每次访问记录。

const axios = require('axios');
require('dotenv').config();

const API_KEY = process.env.APIZERO_API_KEY;
const BASE_URL = 'https://api.apizero.cn/v1/visits/counter';

async function getVisits(site, period = 'all') {
  try {
    const response = await axios.get(BASE_URL, {
      headers: { 'X-API-Key': API_KEY },
      params: { site, period, format: 'json' }
    });
    return response.data.data;
  } catch (error) {
    console.error('Failed to fetch visits:', error.response?.data || error.message);
    return null;
  }
}

// 使用示例：
getVisits('www.example.com', 'today').then(data => {
  console.log(`今日访问量: ${data.total_visits}`);
});

2. Python 3（Flask 集成）

import os
import requests

API_KEY = os.environ.get('APIZERO_API_KEY')
BASE_URL = 'https://api.apizero.cn/v1/visits/counter'

def get_visits(site: str, period: str = 'all') -> dict | None:
    headers = {'X-API-Key': API_KEY}
    params = {'site': site, 'period': period, 'format': 'json'}
    try:
        resp = requests.get(BASE_URL, headers=headers, params=params, timeout=5)
        resp.raise_for_status()
        return resp.json()['data']
    except Exception as e:
        print(f'Error: {e}')
        return None

# 调用
visits = get_visits('www.example.com', 'all')
if visits:
    print(f"总访问量: {visits['total_visits']}")

3. 纯前端调用（需注意跨域）

如果站点是纯静态（如 Vercel、Netlify），可以直接从浏览器发起请求。但需要后端 API 支持 CORS 或使用代理。ApiZero 一般会开放 CORS，但建议在生产环境中通过自己的后端转发以保护 API Key。

<!DOCTYPE html>
<html>
<head>
  <title>访问量统计</title>
</head>
<body>
  <div id="counter">加载中...</div>
  <script>
    async function loadVisits() {
      try {
        const response = await fetch('https://api.apizero.cn/v1/visits/counter?site=www.example.com&period=all', {
          headers: { 'X-API-Key': '你的公共Key' } // 注意：暴露在前端不安全，仅演示
        });
        const result = await response.json();
        if (result.code === 200) {
          document.getElementById('counter').innerText = `总访问量：${result.data.total_visits}`;
        }
      } catch (err) {
        console.error(err);
      }
    }
    loadVisits();
  </script>
</body>
</html>

安全提醒：切勿将 API Key 直接硬编码在前端代码中。生产环境应通过后端代理，或使用只读的限权密钥。

前端展示：用 SVG 让计数器更有质感

ApiZero 支持直接返回 SVG 图片，这意味着你可以在 <img> 标签中动态显示访问量，无需任何 JavaScript。

<img src="https://api.apizero.cn/v1/visits/counter?site=www.example.com&period=all&format=svg" 
     alt="访问量计数器" />

每次页面加载时，浏览器会请求该 URL，返回的 SVG 图片渲染成一个类似“徽章”的图形。可以配合 CSS 调整样式。

如果要自定义外观（颜色、字体），可考虑在服务端获取 JSON 数据后用 Canvas 或 D3.js 绘制，但 SVG 方式最简洁。

缓存优化：避免频繁调用 API

API 调用通常有次数限制，并且外部请求会增加页面加载延迟。推荐策略：

本地缓存（Redis / 内存）：在服务端将 API 返回的 total_visits 缓存 5~10 分钟，避免每请求一次都调用 API。
前端缓存：对于静态场景，可以在页面首次加载后，将 SVG 图片缓存在 Service Worker 或 localStorage 中，但需注意统计准确性。
CDN 缓存：如果使用 SVG 方式，可以配置 CDN 缓存此图片，设置较短的 TTL（如 60 秒），既降低 API 压力，又能接受一定程度的数据延迟。

示例：Node.js + Redis 缓存中间件

const redis = require('redis');
const client = redis.createClient();

app.get('/api/visits', async (req, res) => {
  const cacheKey = 'visits:www.example.com';
  let visits = await client.get(cacheKey);
  if (visits) {
    return res.json({ cached: true, data: JSON.parse(visits) });
  }
  visits = await fetchFromApi();  // 上述 getVisits 函数
  if (visits) {
    await client.setEx(cacheKey, 300, JSON.stringify(visits)); // 缓存5分钟
  }
  res.json({ cached: false, data: visits });
});

常见踩坑与解决方案

问题	原因	方案
跨域请求被拒绝	浏览器同源策略	使用后端代理；或确认 API 是否开放 CORS，请求时设置 `mode: 'cors'`
返回 401 Unauthorized	API Key 无效或未传递	检查请求头名是否正确（`X-API-Key` vs `Authorization`），以及 Key 是否过期
统计数值不更新	浏览器缓存了请求结果	在 URL 后加随机数 `&_t=${Date.now()}` 或设置 `Cache-Control: no-cache`
每日免费额度用尽	调用过于频繁	增加本地缓存，降低调用频次，或升级付费套餐

自己实现一个简易计数器（备选方案）

如果不想依赖第三方，也可以极低成本自建：

基于文件：使用 JSON 文件存储计数，每次请求用 file_get_contents 读取–加 1–写回（适合低并发）。
基于数据库：MySQL/PostgreSQL 单行表 UPDATE visits SET count = count + 1 WHERE site = ?。
基于 Redis：INCR site:visits，然后定期持久化。

但自建方案需要处理并发写、IP 去重等问题，且维护成本高于调用 API。对于博客、个人作品集等小型项目，推荐直接使用第三方 API。