基于 Clouflare+D1 的web访客统计服务

binxin

希望是美好的，也许是人间至善，而美好的事物永不消逝。

251 字

1 分钟

基于 Clouflare+D1 的web访客统计服务

2024-06-14

开源项目

cloudflare

项目地址#

https://github.com/yestool/analytics_with_cloudflare

部署步骤#

安装依赖#

1
npm install -g wrangler
2
npm install hono

创建 D1 数据库：web_analytics#

数据库名称为 web_analytics，与 package.json 内保持一致

1
npx wrangler d1 create web_analytics

运行后控制台显示

1
✅ Successfully created DB 'web_analytics' in region APAC
2
Created your new D1 database.
3

4
[[d1_databases]]
5
binding = "DB" # i.e. available in your Worker on env.DB
6
database_name = "web_analytics"
7
database_id = "xxx"

修改 wrangler.toml 中的 database_id

初始化 D1 数据库的表结构#

1
npm run initSql

绑定自定义域名#

1
routes = [{ pattern = "analytics.xbxin.com", custom_domain = true }]

发布#

1
npm run deploy

使用#

1
<template>
2
  本页访问人次:<span>{{webviso.uv}}</span><br>
3
  本页访问人数:<span>{{ webviso.pv }}</span>
4
</template>
5

6
<script setup lang="ts">
7
import { ref, onMounted } from 'vue';
8

9
const webvisoLoaded = ref(false);
10
const webviso = ref({
11
  uv: '',
12
  pv: '',
13
});
14

15
const loadWebviso = async () => {
16
  const apiUrl = 'https://analytics.xbxin.com/api/visit'
17

18
  const requestData = {
19
    url: window.location.pathname,
20
    hostname: window.location.hostname,
21
    referrer: document.referrer,
22
    pv: true,
23
    uv: true,
24
  }
25

26
  try {
27
    const response = await fetch(apiUrl, {
28
      method: 'POST',
29
      headers: {
30
        'Content-Type': 'application/json',
31
      },
32
      body: JSON.stringify(requestData),
33
    })
34

35
    if (response.ok) {
36
      const data = await response.json();
37
      webviso.value = data.data;
38
    } else {
39
      console.error('Error loading analytics data:', response.statusText);
40
    }
41
  } catch (err) {
42
    console.error('Error loading analytics script:', err);
43
  }
44
}
45

46
onMounted(() => {
47
  loadWebviso();
48
});
49
</script>