前言
最近在大家的疯狂安利下,捣鼓上了这样一款可以部署在Docker上的前端统计应用。特别是木木老师,更是直接放出了 《前端调用 Umami API 数据》 。不得不说,这个应用的可玩性成功的吸引了我的注意。
Umami 是一个高颜值可自部署的统计应用,本站也一直在使用该项目统计网站的访客数据,最后通过AI的帮助也是成功的在Memos页面中调用了umami统计的浏览数据,于是做个记录。
教程
获取 Umami API Token
如果你是在直接在 Umami 网站注册帐号使用的,可以直接在 网站后台获取 Api Token。
否则,如果是自托管,需要先进行身份验证。2(本文以下内容均以自托管为例)
首先需要去 Hoppscotch 获取umami站点的登录token,然后按照下图序号选取,最后获取token备用。
POST https://your-umami-instance.com/api/auth/login
图中第5步,填入以下信息:
{
"username": "your-username",
"password": "your-password"
}
通过 CloudFlare 部署 API
登录 CloudFlare 创建一个 Workers ,修改名称并点击部署。
addEventListener('fetch', event => {
event.respondWith(handleRequest(event));
});
const API_BASE_URL = 'https://umami.yourdomain.com';
const TOKEN = 'your_token';
const WEBSITE_ID = 'your_website_id';
const CACHE_KEY = 'umami_cache';
const CACHE_TIME = 600; // Cache time in seconds
async function fetchUmamiData(startAt, endAt) {
const url = `${API_BASE_URL}/api/websites/${WEBSITE_ID}/stats?startAt=${startAt}&endAt=${endAt}`;
const response = await fetch(url, {
headers: {
'Authorization': `Bearer ${TOKEN}`,
'Content-Type': 'application/json'
}
});
if (!response.ok) {
console.error(`Error fetching data: ${response.statusText}`);
return null;
}
return response.json();
}
async function handleRequest(event) {
const cache = await caches.open(CACHE_KEY);
const cachedResponse = await cache.match(event.request);
if (cachedResponse) {
return cachedResponse;
}
const now = Date.now();
const todayStart = new Date(now).setHours(0, 0, 0, 0);
const yesterdayStart = new Date(now - 86400000).setHours(0, 0, 0, 0);
const lastMonthStart = new Date(now).setMonth(new Date(now).getMonth() - 1);
const lastYearStart = new Date(now).setFullYear(new Date(now).getFullYear() - 1);
const [todayData, yesterdayData, lastMonthData, lastYearData] = await Promise.all([
fetchUmamiData(todayStart, now),
fetchUmamiData(yesterdayStart, todayStart),
fetchUmamiData(lastMonthStart, now),
fetchUmamiData(lastYearStart, now)
]);
const responseData = {
today_uv: todayData?.visitors?.value ?? null,
today_pv: todayData?.pageviews?.value ?? null,
yesterday_uv: yesterdayData?.visitors?.value ?? null,
yesterday_pv: yesterdayData?.pageviews?.value ?? null,
last_month_pv: lastMonthData?.pageviews?.value ?? null,
last_year_pv: lastYearData?.pageviews?.value ?? null
};
const jsonResponse = new Response(JSON.stringify(responseData), {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization'
}
});
event.waitUntil(cache.put(event.request, jsonResponse.clone()));
return jsonResponse;
}
通过访问部署好的地址,应该可以看见返回类似以下的数据串。
最后在页面中嵌入。
更新于:
09 月 16 日
上一篇:《超级马里奥大电影》有感
2023 年 04 月 12 日
2024 年 12 月 20 日