← FC Coder · HomePhase 04 · Lesson 54 · 60 min
Lesson54
Phase Four · Game · Matchday 54 · Top 10

排行榜
top 10 + JOIN

Today's 3 Jobs · 今天这三件事
  1. 01
    scores 表 + submitScore server action
    Phase 3 心法
  2. 02
    /leaderboard server 页 + JOIN
    innerJoin users
  3. 03
    🌟 top 10 显示 + 实时更新
    DESC LIMIT

scores 表 + submitScore server action + /leaderboard server 页(JOIN users 拿名字)。Phase 3 心法合体:33 课 server 读 + 36 课 JOIN + 派生 desc/limit。家人能比谁分高。

Concept

JOIN + 派生排序

SQL · 排行榜
// Phase 3 心法合体
JOIN
innerJoin(users, eq(scores.userId, users.id))
排序
orderBy(desc(score))
限
limit(10)
Half 2

schema · action · 读 · 我的最佳

01scores 表 + action
01Min

Cursor + pnpm dev

老三件套。
02Min

scores 表 schema(userId/score/duration/createdAt) + push

外键 references users.id。
03Min

lib/actions.ts · submitScore(score, duration)

getCurrentUser · db.insert · 'use server'。
04Min

game ended 时调 submitScore

client 调 server action(form 或 startTransition)。
02排行榜 server 页
05Min

app/leaderboard/page.tsx · async + select + innerJoin + desc + limit 10

Phase 3 第 33/36 课心法合体。
06Min

访问 /leaderboard · top 10 显示

用户名 + 分数 + 时长。
03AI 我的最佳
07Min

AI Pair: 加'我的最佳'(filter userId === me)

Cmd+K · '/leaderboard 加 me section 显示当前用户最高分'。
08Min

📸 截图排行榜

Phase 4 第 14 张战利品。
讲给爸爸听

3 题

01JOIN 怎么读?Hint ↓

innerJoin(users, eq(scores.userId, users.id))。把两表对应行拼一起。

02为什么 LIMIT 10?Hint ↓

SQL 层过滤 · 不全拉到内存。性能。

03desc / asc?Hint ↓

descending 降 · ascending 升。orderBy(desc(score)) = 最高在最前。

温度计

评分

今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨

排行榜活了 —— 家人比比看。

8 步没打勾。

Next · Lesson 55 · Demo Day 7 · 收官 →