了解你的访客：给网站加上访问统计

你的网站上线了，但你不知道有多少人来看，他们最感兴趣的是哪个作品。

这一关做一个简单的访问统计，让你对自己的网站有数据感知。

为什么要自建统计，而不用 Google Analytics？

Google Analytics 是最流行的网站统计工具，但它有几个问题：

• 需要加载额外的 JavaScript，影响页面速度
• 数据在 Google 的服务器上，你没有完全控制权
• 很多用户安装了广告拦截器，会屏蔽 Google Analytics
• 配置复杂，对新手不友好

自建统计的优点：

• 数据在你自己的数据库里
• 可以统计任何你想统计的指标
• 不会被广告拦截器屏蔽
• 可以做成任何你想要的看板样式

当然，自建统计也有缺点：功能没有 Google Analytics 丰富，需要自己维护。对于个人作品集来说，自建一个简单的统计就够了。

数据库设计：如何记录访问？

记录访问数据，最简单的方式是：每次有人点击作品，就在数据库里插入一条记录。

-- work_views 表
id          | work_id | viewed_at
------------|---------|------------------
1           | 3       | 2024-01-15 10:30
2           | 1       | 2024-01-15 11:00
3           | 3       | 2024-01-15 11:30

然后统计某个作品的点击量，就是查询 work_id = 3 的记录数。

这种设计的好处是：不只能统计总量，还能分析时间趋势（比如"这周哪天访问量最高"）。

第一步：记录作品点击

对 AI 说：

帮我给作品集加上点击统计：

1. 在 Supabase 里创建一个 work_views 表：
   - id（自增主键）
   - work_id（关联 works 表的 id）
   - viewed_at（查看时间，自动填充）
   
   给我 SQL 语句。

2. 创建 app/api/works/[id]/view/route.ts，POST 请求时在 work_views 表里插入一条记录

3. 在作品卡片上，用户点击"查看项目"或"查看详情"时，调用这个接口记录点击

在 Supabase 的 SQL Editor 里执行建表语句，然后点击几个作品，去 Table Editor 里确认数据有没有记录进去。

---

第二步：显示热门作品

对 AI 说：

在作品页加上"热门作品"排序功能：

1. 更新 /api/works 接口，支持 ?sort=popular 参数
   - 默认按创建时间排序
   - sort=popular 时，按 work_views 表里的点击次数降序排列

2. 在作品页的排序选项里加上"最受欢迎"选项

3. 在每个作品卡片上显示查看次数（比如"👁 128 次查看"）

---

第三步：做数据看板

对 AI 说：

在后台管理页面（/admin）加一个数据概览：

- 总作品数
- 本周总访问量（work_views 表里本周的记录数）
- 最受欢迎的作品（点击量最高的前 3 个，显示标题和点击数）
- 用简单的卡片布局展示这些数据

创建 app/api/admin/stats/route.ts 来提供这些统计数据。

---

关于数据库 JOIN 查询

统计每个作品的点击量，需要用到 SQL 的 JOIN 操作：把 works 表和 work_views 表关联起来，统计每个作品对应的点击记录数。

SELECT 
  works.id,
  works.title,
  COUNT(work_views.id) as view_count
FROM works
LEFT JOIN work_views ON works.id = work_views.work_id
GROUP BY works.id, works.title
ORDER BY view_count DESC;

你不需要自己写这段 SQL，告诉 AI "按点击量排序"，它会帮你写。但理解 JOIN 的概念，能帮你更好地描述你的需求。

---

关于"本周"的时间过滤

统计"本周访问量"需要过滤时间范围：

WHERE viewed_at >= date_trunc('week', now())

这个 SQL 的意思是：只统计本周开始（周一 00:00）到现在的记录。

你可以让 AI 帮你实现各种时间维度的统计：今天、本周、本月、过去 7 天、过去 30 天……

---

通关条件

完成以下三步即可通关：

1. 点击作品后，work_views 表里有新记录
2. 作品卡片上显示查看次数
3. 后台管理页面有数据概览

卡住了？

• 点击没有记录？在浏览器控制台检查 API 请求是否发出，以及接口是否返回成功
• 统计数据不准确？让 AI 检查 SQL 查询语句，特别是 JOIN 和 COUNT 的写法
• 数据看板数据不更新？让 AI 在页面加载时调用统计接口，而不是用写死的数据
• 想防止刷量（同一个人多次点击）？可以用 IP 地址或 localStorage 记录，让 AI 帮你实现