基于 Clouflare+D1 的web访客统计服务
项目地址
https://github.com/yestool/analytics_with_cloudflare
部署步骤
安装依赖
npm install -g wrangler
npm install hono
创建 D1 数据库:web_analytics
数据库名称为 web_analytics
,与 package.json
内保持一致
npx wrangler d1 create web_analytics
运行后控制台显示
✅ Successfully created DB 'web_analytics' in region APAC
Created your new D1 database.
[[d1_databases]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "web_analytics"
database_id = "xxx"
修改 wrangler.toml 中的 database_id
初始化 D1 数据库的表结构
npm run initSql
绑定自定义域名
routes = [{ pattern = "analytics.xbxin.com", custom_domain = true }]
发布
npm run deploy
使用
<template>
本页访问人次:<span>{{webviso.uv}}</span><br>
本页访问人数:<span>{{ webviso.pv }}</span>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const webvisoLoaded = ref(false);
const webviso = ref({
uv: '',
pv: '',
});
const loadWebviso = async () => {
const apiUrl = 'https://analytics.xbxin.com/api/visit'
const requestData = {
url: window.location.pathname,
hostname: window.location.hostname,
referrer: document.referrer,
pv: true,
uv: true,
}
try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestData),
})
if (response.ok) {
const data = await response.json();
webviso.value = data.data;
} else {
console.error('Error loading analytics data:', response.statusText);
}
} catch (err) {
console.error('Error loading analytics script:', err);
}
}
onMounted(() => {
loadWebviso();
});
</script>
本文作者:cuxt
本文链接:https://www.cnblogs.com/cuxt/p/18362562
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
标签:
Cloudflare
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步