← FC Coder · HomePhase 03 · Lesson 31 · 60 min
Lesson31
Phase Three · Fullstack · Matchday 31 · Label the Drawer
Schema · 第一张表
写 TS · 同步到 SQL
Today's 3 Jobs · 今天这三件事
- 01lib/schema.ts · sqliteTable players · 6 列标签贴抽屉
- 02pnpm drizzle-kit push · 同步到 data.dbTS → SQL
- 03🌟 drizzle-kit studio · 浏览器看表DB 浏览器
30 课档案柜立起来 · 但抽屉没贴标签。今天写 `lib/schema.ts` · `pnpm drizzle-kit push` 同步到 data.db。ORM 心法:写 TS 不写 SQL · 类型 + 补全双重保护。`drizzle-kit studio` 浏览器看表 —— ORM 的免费礼物。
Concept · Schema 是抽屉标签
sqliteTable + 列类型 + 约束
export const players = sqliteTable('players', {
id: integer().primaryKey({ autoIncrement: true }),
name: text().notNull().unique(),
rating: integer().notNull(),
// ... position, nationality, club
});
id: integer().primaryKey({ autoIncrement: true }),
name: text().notNull().unique(),
rating: integer().notNull(),
// ... position, nationality, club
});
id
integer · primaryKey · autoIncrement
name
text · notNull · unique
其余
rating: integer · position/nationality/club: text · all notNull
`pnpm drizzle-kit push` 把 TS schema 同步到 data.db。studio 浏览器看。
Half 2 · 在屏幕上
schema · push · studio · diff
01写 schema.ts
01Min
Cursor + pnpm dev
老三件套。
02Min
lib/schema.ts · 写 players 表(id 自增 + 5 字段)
import { sqliteTable, text, integer } from 'drizzle-orm/sqlite-core'; export const players = sqliteTable('players', { id: integer().primaryKey({ autoIncrement: true }), name: text().notNull().unique(), rating: integer().notNull(), position: text().notNull(), nationality: text().notNull(), club: text().notNull() });
02push + studio 看表
03Min
终端 pnpm drizzle-kit push
看输出 'Created table players'。data.db 文件大了一点(虽然 0 行 · 元数据增加)。
04Min
终端 pnpm drizzle-kit studio · 浏览器打开 local.drizzle.studio
🌟 浏览器版 DB 管理界面。看 players 表 · 6 列 · 0 行。
03diff 试错 + AI
05Min
故意改 rating 为 text · push 看 diff
Drizzle 检测到类型变 · 输出迁移 SQL。看一眼就好 · 不接受。
06Min
改回 integer · push 同步
Drizzle 没差别 · 跳过。
07Min
AI Supervised:加 face_url 可选 text
Cmd+K · '加一个可选的 face_url 字段'。AI 给 .notNull() 漏掉(可选)· 接受。push。studio 看新列。
08Min
📸 截图 studio 界面 · 6 列
Phase 3 第六张战利品。
讲给爸爸听
4 题 · Schema + Tools
01Schema 是什么?Hint ↓
表的标签 —— 名 + 列 + 类型。Drizzle 用 TS 写 schema · 同步到 SQL。
02push 和 migrate 差?Hint ↓
push 开发(直接覆盖)· migrate 生产(留历史 SQL)。今天用 push。Phase 38 改 migrate。
03studio 是什么?Hint ↓
Drizzle 自带 DB 浏览器 · 浏览器界面操作 DB。免装 DBeaver / TablePlus。
04notNull() unique() 是什么?Hint ↓
约束 —— DB 帮你挡坏数据。notNull = 必填 · unique = 唯一(球员名不能重)。
温度计
给「贴标签」打分
今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨
抽屉贴上标签 —— DB 知道你要装什么了。
还有 8 步没打勾。Step 4 studio 看到表 = 算过。