筑基正传 首页 课程总览 咒语库 急救箱 锦囊袋 招生 我的洞府
未登录
码上飞升 · 开页大吉入门课

零基础,也能亲手
做出自己的网站

凡人之身 · 成就「」仙

一门零基础也能学会的 AI 建站入门课。不写代码、不懂英文、怕报错都没关系——把「咒语」复制给 AI,14 天从第一个 index.html 起步,亲手做出、并发布一个真正属于你的网站。

十四天后,亲手
不爱修仙?看正经版:14 天学会用 AI 做网站 →
身份凡人
门派逍遥键派
试炼0 / 14
今日产物index.html
山门主视觉 · 拖入生成图
index.html 开页符
键修日常 · 一遍就懂

开页,不过是
一道咒、一次急救

把想法说给 AI,报错了不慌——照「急救咒」改一处,刷新,开页大吉。你要做的,就这么点事。
键灵 · 终端
10 分钟
先出活
复制一段咒语给 AI,第一个网页今天就开。
Day 2
定题开建
选定自己的主题,从此每天给作品加一块。
Day 8
八页成型
全站页面齐了,有内容有配图,像个真网站。
Day 13
雷动上线
拿到可分享的在线链接,发给任何人都打得开。
大道至键
外门试炼 · 十四键
一天敲一键,凡人到筑基
完整路线 →
凡人 → 一层
DAY 1
破除恐惧
练气二层
DAY 2
立派定题
练气三层
DAY 3
立骨塑形
练气四层
DAY 4
双页互通
练气五层
DAY 5
开炉迁鼎
练气六层
DAY 6
布阵连环
练气七层
DAY 7
灌注真言
练气八层
DAY 8
万象入页
练气九层
DAY 9
丹青妆点
练气十层
DAY 10
小术通灵
练气十一层
DAY 11
十一
渡劫问诊
练气十二层
DAY 12
十二
掌中乾坤
筑基初见
DAY 13
雷动开页
筑基出师
DAY 14
出师大典
index.html 开页符
DAY 1 · 破除恐惧

千里之行,始于一页

第一天不学语法、不装软件、不碰终端。只做一件事:让桌面上出现一个能打开、能改的 index.html

1建文件夹
2打开 AI
3复制咒语
4复制代码
5另存为 index.html
6双击打开
7改字刷新
码上飞升 · 境界长路

开页大吉,只是第一程

14 天外门试炼带你从凡人走到筑基;筑基之上,另有天地。
飞升长路全景图 · 拖入生成图
凡人
你在这里
还没碰过代码,怕英文、怕报错。
练气
开页大吉 Day 1–12
一课升一层,做出自己的多页网站。
筑基
Day 13–14 出师
雷动上线 + 出师大典,独立建站闭环。
金丹
内门 · 锻造中
Claude Code / Codex,让 AI 替你改整个项目。
元婴
远期
自己立项,做出能给别人用的产品。
化神
愿景
以键为生,自成一派。
会当凌绝顶,一「键」众山小
他们都做出来了
看作品墙 →
外婆的菜谱
林阿姨 · 52 岁
城南咖啡地图
阿哲 · 上班族
女儿成长相册
陈先生 · 新手爸爸
买过七八门课没一个学完的,这是第一个。它真的让你第一天就出活。
阿哲 · 已出师 · 更多口碑 →
14 天全免费,无隐藏收费
没有付费墙弹窗 · 不收手机号 · 不强制注册。进阶课(Claude Code / Codex)只在出师后以「内门拜帖」预告,不影响免费课闭环。
适合谁
用中文 Windows、完全没碰过代码的普通人
想在 AI 时代亲手做出点东西的上班族、学生、宝妈
买过很多课没学完,需要「第一天就出活」的人
暂不适合谁
想系统学编程语言、算法和工程化的开发者
想直接做 App、小程序或带后端的产品的人
Mac 用户也能学,但全部截图以 Windows 为准
拖入 gpt-image-2 场景头图 · 建议 1600×500(如:开光工作台)
键来!

10 分钟开光体验

今天只做一件事:保存并打开一个 index.html。不装 Node、不碰 GitHub、不学语法。
开页符
先在炉里试一手
改左边的字,右边立刻变——这就是你之后要做的事
代码(试着改这里的字)
网页(实时预览)
看见了吗?你不用懂这些代码,只要会改其中的字。真正做的时候,把右边这种网页存成 index.html,就成了能发给别人的网页。
选一个首作
选哪个都行,10 分钟都能开出来
个人主页
大标题 + 自我介绍 + 三张小卡片
今日抽签器
点一下,抽一支今日运势签
倒计时牌
给一个重要日子做倒计时
小小贪吃蛇
方向键控制的迷你游戏
复制启动咒语,发给任何一个 AI
豆包 / Kimi / 文心一言 / ChatGPT 都行
启动咒语 · 个人主页
你是我的 AI 编程陪跑教练,我完全不会编程。 请帮我做一个可以直接保存成 index.html 的单文件作品,要简单、但看起来漂亮。 主题:个人主页。 页面内容: 1. 一个醒目的大标题; 2. 一句自我介绍; 3. 三张小卡片,分别写:我会让 AI 帮我做、我会保存文件、我会自己改; 4. 一个点了会有反应的按钮; 最后加一行底部小字:第一版能打开就已经成功。 技术要求: 1. 只给我一个完整 HTML 文件,CSS 和 JavaScript 都写在同一个文件里; 2. 不要让我安装任何东西; 3. 最后用小白能听懂的话告诉我怎么保存成 index.html 并用浏览器打开。
整段复制代码,另存为 index.html
① 把 AI 回的代码从第一行到最后一行全部复制。
② 打开「记事本」,粘贴。
③ 文件 → 另存为 → 文件名填 index.html,编码选 UTF-8
最常见翻车保存类型没选「所有文件」,文件变成 index.html.txt —— 看到这种后缀就回去重新另存。
真实截图位 · 待补
记事本「另存为」对话框
Windows 真机截图 · 不要 AI 生成
双击打开 → 改一个字 → 刷新
① 双击 index.html——看到的应该是网页,不是一屏代码。
② 回到记事本,把大标题改成你的名字,Ctrl+S 保存。
③ 回浏览器按 F5 刷新——你改的字出现了。这一刻,开光完成。
真实截图位 · 待补
浏览器打开网页的成功画面
开页大吉
你已经做出了第一个网页。去 Day 1 把这套动作练熟,正式踏入练气。
一键一阶
外门试炼 · 境界路线

十四天,一键一阶

天行「键」,君子以自强不息
DAY
1
凡人 → 练气一层
破除恐惧
今日产物:第一个 index.html
第一次让 AI 替你干活,桌面上开出第一个能打开、能改的网页。
保存与刷新 改一处看变化
▶ 从这里继续
DAY
2
练气二层
立派定题
今日产物:主题首页 v1
用三把尺子选定自己的主题,立起山头,从此每天给同一个作品加一块。
只改一处 第一枚备份
可开课
DAY
3
练气三层
立骨塑形
今日产物:真实内容区块
首页排出三四个真实区块,假话全部换成真话。
HTML 骨架 回档玉简
可开课
DAY
4
练气四层
双页互通
今日产物:第二页与导航
做出第二个页面并双向跳转——网页从今天起变成网站。
多文件 链接跳转
可开课
DAY
5
练气五层
开炉迁鼎
今日产物:项目搬进 AI IDE
全程唯一一次装软件:Trae 或 CodeBuddy 二选一,让 AI 只改一处。
安装与登录 AI 改一处
可开课
DAY
6
练气六层
布阵连环
今日产物:全站页面清单
定下 4–6 页的全站清单,一条导航通到所有页面。
多页结构 统一导航
可开课
DAY
7
练气七层
灌注真言
今日产物:核心页真实内容
把真实材料喂给 AI 排版:你供真话,它管版面,不许编造。
喂材料咒 提示词工艺
可开课
DAY
8
练气八层
万象入页
今日产物:全站配图与填实
建 images 文件夹给全站配图,顺便弄懂文件路径这件事。
文件路径 相对引用
可开课
DAY
9
练气九层
丹青妆点
今日产物:统一 CSS 风格
一套配色统一全站,所有页面长成一家人。
认得 CSS 改一行颜色
可开课
DAY
10
练气十层
小术通灵
今日产物:简单交互
加一两个点了会动的小交互,知道 JS 长什么样。
认得 JS 验收交互
可开课
DAY
11
练气十一层
渡劫问诊
今日产物:修复记录
全站大体检:列毛病清单,报错三句话逐个修,留修复记录。
排错方法论 修复记录
可开课
DAY
12
练气十二层大圆满
掌中乾坤
今日产物:手机端检查与反馈
手机端过一遍并修掉大问题,发给朋友收一条真实反馈。
移动端意识 避劫备 GitHub
可开课
DAY
13
筑基初见
雷动开页
今日产物:GitHub Pages 上线链接
渡劫日:六步上线,拿到全世界都打得开的链接。
Pages 发布 双路避劫
渡劫日
DAY
14
筑基出师
出师大典
今日产物:出师帖与复盘
五幕仪式:验收、授印、出师帖、三句复盘、内门拜帖。
复盘 进阶预告
出师大典
登顶 · 筑基出师
升层不挂日历——一天一课跟得上,两天一课也不破功。
千里之行
← 返回试炼路线
DAY 1 · 凡人 → 练气一层

破除恐惧

跑通你的第一个 AI 小作品:让桌面上出现一个能打开、能改的 index.html 网页。
开页符
预计用时60–90 分钟
需要工具浏览器 + 记事本 + AI
出关产物index.html
今日边界
不装任何软件 不碰 GitHub 不让 AI 拆成多个文件
先破四个心魔
都不是你的问题,是没人把话说清楚
不会编程
今天你是提需求的人,不是背语法的人。
不会英文
AI 聊天框吃中文,英文提示先复制给 AI 翻译。
看不懂代码
第一天只认 index.html 这一个文件。
遇到报错
报错不是天雷,是电脑表达不清楚。
Day 1 启动咒语一字不改,整段发给 AI
你是我的 AI 编程陪跑教练,我完全不会编程。 请帮我做一个可以直接保存成 index.html 的单文件个人主页,要简单、但看起来漂亮。 主题:[填你的主题,比如「我的第一个网页」]。 页面内容: 1. 一个醒目的大标题; 2. 一句自我介绍; 3. 三张小卡片,分别写:我会让 AI 帮我做、我会保存文件、我会自己改; 4. 一个点了会有反应的按钮; 5. 底部一句小字:第一版能打开就已经成功。 技术要求: 1. 只给我一个完整 HTML 文件,CSS 和 JavaScript 都写在同一个文件里; 2. 不要让我安装任何东西; 3. 最后用小白能听懂的话告诉我怎么保存成 index.html 并用浏览器打开。
主线九步
每一步都写明「看到什么算成功」
新建作品文件夹
在桌面新建文件夹,命名「我的第一个AI网页」。以后你的所有作品都住在这里。
看到什么算成功:桌面出现了这个文件夹
真实截图位 · 待补:新建文件夹
Windows 真机截图 · 不要 AI 生成
打开一个能聊天的 AI
豆包、Kimi、文心一言、ChatGPT 都行——只要能发消息就够了。
看到什么算成功:AI 回了你一句话
复制启动咒语发给 AI
用上面的「Day 1 启动咒语」,一字不改整段发出。
看到什么算成功:AI 开始输出一大段代码
真实截图位 · 待补:AI 对话框和代码回复
Windows 真机截图 · 不要 AI 生成
整段复制 AI 回的代码
从第一行到最后一行,一行不漏。AI 给的代码块右上角一般有复制按钮。
看到什么算成功:代码已在剪贴板里
记事本粘贴,另存为 index.html
打开记事本 → 粘贴 → 文件 → 另存为:保存类型选「所有文件」,文件名填 index.html,编码选 UTF-8。
看到什么算成功:文件夹里出现 index.html
真实截图位 · 待补:另存为 index.html
Windows 真机截图 · 不要 AI 生成
确认后缀真的是 .html
如果显示 index.html.txt,去「卡住急救」第三条,两分钟修好。
看到什么算成功:文件图标变成浏览器图标
真实截图位 · 待补:文件扩展名
Windows 真机截图 · 不要 AI 生成
双击打开,看到第一个网页
双击 index.html,浏览器打开你的网页——不是代码,是网页。
看到什么算成功:看到排好版的网页
真实截图位 · 待补:浏览器打开网页
Windows 真机截图 · 不要 AI 生成
不满意?让 AI 再来一版
直接说「换个颜色 / 换个排版,再给我完整代码」,重复第四、五步覆盖保存。
看到什么算成功:刷新后是新版本
改掉大标题,保存刷新
记事本里找到大标题文字,改成你的名字,Ctrl+S 保存,回浏览器按 F5。
看到什么算成功:网页上出现你改的字
真实截图位 · 待补:改标题刷新后看到变化
Windows 真机截图 · 不要 AI 生成
卡住急救
总原则:不要删,先描述
AI 只解释,不给代码
对它说:「直接给完整代码,从第一行到最后一行,不要省略。」
双击文件没用浏览器打开
右键文件 → 打开方式 → 选 Edge 或 Chrome。
页面空白,或者满屏都是代码
九成是存成了 index.html.txt。另存为时保存类型选「所有文件」,文件名重新填 index.html。
网页上的中文是乱码
重新另存为一次,右下角编码选 UTF-8。
改了内容,刷新没变化
确认按过 Ctrl+S 保存,而且浏览器打开的和记事本改的是同一个文件,再按 F5。
出关自查
全部勾上,今日即可升层(进度自动保存)
桌面(或文件夹)里出现了 index.html
双击后是浏览器打开的网页,不是一屏代码
后缀确认是 .html,不是 .html.txt
改掉大标题,刷新后看到了变化
知道卡住时先查「卡住急救」,而不是删文件重来
一课一层
← 返回试炼路线
DAY 2 · 练气二层

立派定题

选定你自己的网站主题,做出主题首页 v1,并存下第一枚备份。从今天起,每天都在给同一个作品加一块。
DAY
2
预计用时60–90 分钟
需要工具浏览器 + 记事本 + AI
出关产物主题首页 v1 + 备份
今日边界
不装软件 不追求好看 只做首页这一页
本课心法
动手之前,先把今天的「为什么」想明白
工欲善其事,必先立其志
昨天你证明了自己能开一页;今天起,不再做一次性的练习,而是认领一座属于自己的山头。选题不靠灵感,靠三把尺子:你想做什么、手里有没有真材料、两周做不做得完。三把尺子量过,剩下那个就是你这十二天要朝夕相对的作品。
概念点睛
今天你会真正搞懂一个词,以后都用得上
备份(回档玉简)
复制一份留底
备份就是把当前能用的文件复制一份、改个名字存着。一旦哪天 AI 把页面改崩了,你不用慌、不用从头来,把备份复制改名盖回去,就「回档」到上一个好状态。从今天起,每次出关前都存一枚——这是修行路上最便宜的保险。
主线步骤
每一步都写明「看到什么算成功」
用三把尺子选主题
想做啥?手里有没有真实材料?两周做不做得完?比如:家乡美食、宿舍生活、自己的爱好合集。
具体怎么做
1 拿张纸或打开记事本,写下你想做的几个题目
2 第一把尺——你是不是真感兴趣、愿意做两周?
3 第二把尺——手里有没有真材料(照片、文字、清单)?
4 第三把尺——范围够不够小、两周做得完吗?
5 三关都过的那个,写成一句话,例如「我妈的拿手菜谱」
看到什么算成功:写下了一句话主题
师父叮嘱别贪大。「我的咖啡地图」比「全城探店平台」靠谱十倍——能做完的小题,胜过做不完的大题。
把主题告诉 AI,生成首页 v1
用下面的「立派定题咒」,把主题、站名、三张卡片内容填进去发给 AI。
具体怎么做
1 点下面「立派定题咒」卡片右上角的复制按钮
2 粘贴到记事本,把每个[方括号]换成你自己的内容
3 打开你常用的 AI(豆包 / Kimi / 文心一言 / ChatGPT)
4 把改好的整段粘进对话框,发送
5 等它输出一大段代码
看到什么算成功:拿到一份完整代码
师父叮嘱方括号里的字一定要换成你自己的,别原样发出去——AI 会照着「[站名]」四个字给你写上去。
真实截图位 · 待补:AI 给出新主题首页
Windows 真机截图 · 不要 AI 生成
覆盖保存,刷新查看
把新代码盖到旧的 index.html 上,刷新就能看到新主题。
具体怎么做
1 点 AI 代码块右上角的「复制」
2 右键你的 index.html →「打开方式」→ 记事本
3 按 Ctrl+A 全选旧内容,再按 Ctrl+V 粘贴新代码
4 按 Ctrl+S 保存
5 回到浏览器按 F5 刷新
看到什么算成功:首页变成了你的主题
改三处文字,让它像你
标题、介绍、卡片文案,亲手改成自己的话。哪怕只是把「美食」改成「我妈的拿手菜」。
具体怎么做
1 回到记事本里的代码
2 按 Ctrl+F 搜索大标题那几个字,改成你的
3 同样找到介绍语、卡片文字,改成你的话
4 Ctrl+S 保存,回浏览器 F5 看变化
看到什么算成功:页面上三处是你的原话
存下第一枚备份
复制 index.html,粘贴在同一文件夹,重命名为 index-v1.html。这是你的回档玉简。
具体怎么做
1 在文件夹里点一下 index.html 选中
2 按 Ctrl+C 复制,再按 Ctrl+V 粘贴
3 出现一个「index - 副本.html」
4 右键它 → 重命名,改成 index-v1.html
看到什么算成功:文件夹里有两个文件
师父叮嘱命名带上版本号:v1、v2、v3……一眼能看出谁新谁旧,回档时不会拿错。
真实截图位 · 待补:备份文件就位
Windows 真机截图 · 不要 AI 生成
写一张立项卡
新建 立项卡.txt:主题、想给谁看、最想有的三个页面。三行就够。
具体怎么做
1 在项目文件夹空白处右键 →「新建」→「文本文档」
2 把它命名为 立项卡.txt 并双击打开
3 写三行:主题是什么 / 想给谁看 / 最想要哪三个页面
4 按 Ctrl+S 保存
看到什么算成功:立项卡.txt 存在
本课咒语
[方括号]处换成你自己的内容,整段复制给 AI
立派定题咒生成你的主题首页
我的网站主题定为[一句话主题]。请基于这个主题重做首页:大标题用[站名],介绍写[一句话],三张卡片分别是[卡片一/卡片二/卡片三]。整体结构保持不变,只换内容与配色气质。给我完整的单文件 HTML。
师父三诫
前人踩过的坑,你绕开就好
别今天就追求好看
今天只要「是你的主题」就够,配色排版后面有整整一天专门弄。
别一次开三个主题
想法多是好事,记在立项卡里。手上同时只许有一个作品。
别跳过备份
没有 index-v1.html,明天改崩了就只能从头再来。
卡住急救
总原则:不要删,先描述
主题选不出来
用三把尺子挑「最快出活」的那个。今天可以换题,Day 3 之后不许换——做完一个再说。
AI 把页面结构改乱了
发「只改一个地方」咒(咒语库第三条),命令它只换文字不动结构。
备份不会做
右键 index.html → 复制 → 同文件夹粘贴 → 重命名 index-v1.html,完成。
出关自查
全部勾上即可升层(进度自动保存)
首页已经是自己的主题
至少三处文字是自己的话
文件夹里有 index-v1.html 备份
立项卡写了最想要的三个页面
一课一层
← 返回试炼路线
DAY 3 · 练气三层

立骨塑形

给首页排出真实内容区块:每一块都有名字、有真话,不留占位文字。顺便学会回档。
DAY
3
预计用时60–90 分钟
需要工具浏览器 + 记事本 + AI
出关产物有真实区块的首页
今日边界
不碰 CSS 细节 不加新页面 不留假文字
本课心法
动手之前,先把今天的「为什么」想明白
骨正则形不乱
一个网页好不好读,七成看「分块」。同样一堆字,糊成一坨没人看,分成「开场 / 关于我 / 作品 / 联系」几块就清清爽爽。今天不学美化,只练一件事:把内容拆成几块、每块起个名、填上真话。骨架立正了,明天穿什么衣裳都好看。
概念点睛
今天你会真正搞懂一个词,以后都用得上
HTML 区块(section)
网页的分段
一个网页是由一块一块「区块」垒起来的——每块管一段内容,有自己的小标题。你不用记标签怎么写,只要会对 AI 说「我要哪几块、每块讲什么」。把网页想成一篇分了小标题的作文,区块就是那些小标题段落。
主线步骤
每一步都写明「看到什么算成功」
在纸上列区块清单
你的首页该有哪 3–4 块?比如:开场、关于我、作品/内容、联系方式。
具体怎么做
1 打开记事本或拿一张纸
2 想象访客打开首页,从上往下想看到什么
3 列出 3–4 块,例如:开场白 / 关于我 / 我的作品 / 怎么找到我
4 给每块起个简短名字
看到什么算成功:写出了 3–4 个区块名
师父叮嘱先在纸上或记事本里列,别在脑子里想——写下来才看得清缺哪块、多哪块。
让 AI 加区块骨架
用下面的「立骨咒」把清单发给 AI,让它在 <body> 里排好。
具体怎么做
1 复制下面的「立骨咒」
2 把[区块清单]换成你刚列的几块
3 发给 AI,等它给出完整代码
看到什么算成功:拿到完整代码
覆盖保存,刷新检查
每个区块都应该有小标题和示例文字。
具体怎么做
1 复制 AI 的完整代码
2 记事本打开 index.html,Ctrl+A 全选 → Ctrl+V 粘贴
3 Ctrl+S 保存 → 浏览器 F5 刷新
4 确认每块都有小标题
看到什么算成功:首页出现所有区块
真实截图位 · 待补:区块排好的首页
Windows 真机截图 · 不要 AI 生成
把每块的假话换成真话
示例文字全部换成你的真实内容。写不长没关系,三句真话胜过十行假话。
具体怎么做
1 记事本里按 Ctrl+F 逐块找示例文字
2 一段段改成你的真实内容
3 Ctrl+S 保存 → F5 刷新核对
看到什么算成功:通篇没有占位文字
师父叮嘱看到「示例文字」「Lorem ipsum」「这里填写……」这类字样,就是还没换的假话,一个都不许留。
调区块顺序
不顺眼就命令 AI:「把XX区块移到YY区块上面,其他不动。」
具体怎么做
1 决定哪块该往上、哪块往下
2 用下面的「挪块咒」,填上要移动的区块名
3 发给 AI,覆盖保存后刷新
看到什么算成功:顺序是你想要的
备份 index-v2.html
老规矩,复制改名。以后每天出关前都做一次。
具体怎么做
1 选中 index.html,Ctrl+C 复制 → Ctrl+V 粘贴
2 把副本重命名为 index-v2.html
看到什么算成功:文件夹里有 v2 备份
本课咒语
[方括号]处换成你自己的内容,整段复制给 AI
立骨咒排出内容区块
在我首页的 <body> 里排出这些区块:[区块清单,如:开场、关于我、作品、联系]。每个区块要有小标题和一段示例文字,风格与现有页面一致,不要改我已写好的内容。给我完整文件。
挪块咒调整区块顺序
把[区块名]这一块整体移到[另一区块名]的上面,其他任何代码都不要动。给我完整文件。
师父三诫
前人踩过的坑,你绕开就好
别碰颜色字体
今天只管「有哪些块、装什么内容」,长相是 Day 9 的事。
别留一句假话
占位文字会让页面显得很「假」,宁可短,不要假。
别加第二页
专注首页一页排好,第二页明天开。
卡住急救
总原则:不要删,先描述
区块位置不对
对 AI 说:「把[区块名]放到[另一区块]上面/下面,其他任何地方不要动。」
改完页面空白了
别慌,把 index-v1.html 复制改名回 index.html,回档重来,这次让 AI 只改一处。
中文又乱码了
重新另存为,编码选 UTF-8(急救箱第四条)。
出关自查
全部勾上即可升层(进度自动保存)
首页至少有 3 个区块
每块都是真实内容,没有占位文字
区块顺序看着顺眼
有 index-v2.html 备份
一课一层
← 返回试炼路线
DAY 4 · 练气四层

双页互通

做出第二个页面,并让两页之间能用链接互相跳转——你的「网页」从今天起变成「网站」。
DAY
4
预计用时60–90 分钟
需要工具浏览器 + 记事本 + AI
出关产物第二页 + 双向链接
今日边界
只加一页 不做导航栏(Day 6 的事) 不改首页大结构
本课心法
动手之前,先把今天的「为什么」想明白
一生二,二生万页
一页叫网页,两页能互相跳,才叫网站。今天你只加一页、连一根线,但意义重大:你第一次让两个文件「认识」彼此。理解了两页怎么连,二十页也是同一回事。从今天起,你做的不是一张纸,是一座能走来走去的小院子。
概念点睛
今天你会真正搞懂一个词,以后都用得上
链接(超链接 a)
页面之间的门
链接就是网页上能点的那行字或按钮,点一下就跳到另一个页面。它认的是「文件名」——你告诉它去 about.html,它就开那扇门。两个文件只要在同一个文件夹里、名字写对,门就通。网站能逛,全靠这些门。
主线步骤
每一步都写明「看到什么算成功」
决定第二页是什么
从立项卡的三个页面里挑一个,常见的是「关于我」或「作品页」。
具体怎么做
1 翻开 立项卡.txt 看你列的三页
2 挑访客第二想看的那页
3 定个英文文件名,如 about.html
看到什么算成功:定了页面名和文件名(如 about.html)
师父叮嘱文件名用全小写英文 + .html,别用中文名和空格,否则链接容易跳不过去。
让 AI 生成第二页
用下面的「开页咒」。强调风格要和首页一致。
具体怎么做
1 复制下面的「开页咒」
2 填上文件名、内容主题,并把首页代码粘进[]里
3 发给 AI,拿到两份完整代码
看到什么算成功:拿到两个完整文件
把第二页存进同一文件夹
记事本新建 → 粘贴 → 另存为 about.html(所有文件 + UTF-8)。
具体怎么做
1 打开一个新的记事本窗口,粘贴第二页代码
2 文件 → 另存为,进到 index.html 所在的同一个文件夹
3 保存类型选「所有文件」,文件名填 about.html,编码 UTF-8
看到什么算成功:文件夹里有两个 .html
师父叮嘱两个 .html 必须躺在同一个文件夹里,链接才找得到对方。
真实截图位 · 待补:两个页面文件
Windows 真机截图 · 不要 AI 生成
首页加跳转链接
按 AI 给的位置,把 <a> 链接加进 index.html。
具体怎么做
1 记事本打开 index.html
2 按 AI 指示,把那行 <a> 链接粘到指定位置
3 Ctrl+S 保存 → F5 刷新,看到可点的链接
看到什么算成功:首页出现可点的链接
第二页加返回链接
同样加上「返回首页」。
具体怎么做
1 记事本打开 about.html
2 加上「返回首页」链接(AI 会给)
3 保存刷新
看到什么算成功:两边都有链接
互点测试
首页点过去、第二页点回来,来回三次。
具体怎么做
1 首页点链接 → 应跳到第二页
2 第二页点返回 → 应回到首页
3 来回点三次都正常
看到什么算成功:跳转丝滑不报错
真实截图位 · 待补:两页互跳成功
Windows 真机截图 · 不要 AI 生成
备份两个文件
index-v3.html 和 about-v1.html。
具体怎么做
1 index.html 复制改名 index-v3.html
2 about.html 复制改名 about-v1.html
看到什么算成功:备份就位
本课咒语
[方括号]处换成你自己的内容,整段复制给 AI
开页咒生成第二页并连好链接
给我的网站加第二页:文件名 [about.html],内容主题是[…],风格、配色、字体都和首页保持一致(首页代码如下:[粘贴首页代码])。同时告诉我在 index.html 的哪里加 <a> 链接互相跳转。把两个文件的完整代码分别给我。
师父三诫
前人踩过的坑,你绕开就好
别一天开三页
今天只加一页,把「连通」这件事弄明白比堆页面重要。
别用中文文件名
about.html 稳妥,关于我.html 容易在跳转和上线时出问题。
先别做导航栏
一排导航是 Day 6 的事,今天两根链接互通就达标。
卡住急救
总原则:不要删,先描述
点链接显示 404 / 打不开
检查两个文件是否在同一文件夹、href 里的文件名和真实文件名一字不差(含大小写和后缀)。
第二页风格完全不一样
把首页完整代码发给 AI:「以这个为准,重做第二页的样式。」
链接点了没反应
看 <a> 是否写了 href="文件名.html",空 href 点了不走。
出关自查
全部勾上即可升层(进度自动保存)
文件夹里有两个 .html 文件
首页能跳到第二页
第二页能跳回首页
两个文件都有备份
一课一层
← 返回试炼路线
DAY 5 · 练气五层

开炉迁鼎

把项目搬进一个 AI IDE(Trae 或 CodeBuddy 二选一),并成功让它「只改一处」。这是全课程唯一一次装软件。
DAY
5
预计用时60–90 分钟
需要工具Trae 或 CodeBuddy(二选一)
出关产物项目进 IDE + AI 改一处
今日边界
只装一个工具 不碰终端面板 改一处就收手
本课心法
动手之前,先把今天的「为什么」想明白
君子善假于物也
记事本来回复制粘贴,到今天就够了。真正的法器,是 AI 能直接看到你所有文件、直接帮你改的工坊——AI IDE。这是全程唯一一次装软件,装完你会发现:不用再复制代码了,跟 AI 说句话,它自己就改好了。今天的关键不是「装上」,而是学会一句口令——只改一处。
概念点睛
今天你会真正搞懂一个词,以后都用得上
AI IDE(编辑器)
AI 住进的工坊
把它想成「记事本的升级版」:左边是你整个项目的文件清单,中间是代码,右边是一个能直接动手的 AI。你不用懂代码,只要在对话框里说要改什么,它就改对应的文件。比起复制粘贴,它快、准、还不容易出错——这是你后面七天的主战场。
主线步骤
每一步都写明「看到什么算成功」
选你的本命法器
去「工具剑谱」看两段介绍,Trae 或 CodeBuddy 选一个。选不出来就 Trae。
具体怎么做
1 点导航「工具剑谱」,读 Trae / CodeBuddy 两段介绍
2 二选一;拿不定主意就选 Trae
看到什么算成功:做出了选择
师父叮嘱别两个都装。一个用熟,比两个都半生不熟强得多。
下载并安装
官网下载 Windows 版,一路下一步。安装包来源只认官网。
具体怎么做
1 浏览器搜该工具,认准官网(域名对得上)
2 下载 Windows 版安装包
3 双击安装包,一路「下一步 / 同意 / 安装」
4 装完桌面出现图标
看到什么算成功:桌面出现图标
师父叮嘱只从官网下。搜索结果里带「高速下载」大按钮的第三方站点,一律别点。
真实截图位 · 待补:安装完成界面
Windows 真机截图 · 不要 AI 生成
注册并登录
按引导注册账号登录。要手机号或邮箱,正常流程,别紧张。
具体怎么做
1 打开软件,按提示注册(手机号或邮箱)
2 收验证码,设好密码
3 登录,进入主界面
看到什么算成功:进入主界面
打开你的项目文件夹
菜单:文件 → 打开文件夹 → 选「我的第一个AI网页」。
具体怎么做
1 顶部菜单:文件 → 打开文件夹
2 选中「我的第一个AI网页」整个文件夹 → 确定
3 左侧出现文件树,能看到 index.html
看到什么算成功:左侧文件树出现 index.html
师父叮嘱是「打开文件夹」,不是「打开文件」——要让它看到整个项目,而不是单个网页。
真实截图位 · 待补:IDE 文件树
Windows 真机截图 · 不要 AI 生成
让 IDE 里的 AI 只改一处
打开 AI 对话框,发「只改一个地方」咒,比如改首页大标题颜色。
具体怎么做
1 打开侧边的 AI 对话框
2 复制下面「只改一个地方咒」,填上要改的地方
3 发送,等它直接改好文件
看到什么算成功:AI 直接改了文件
真实截图位 · 待补:AI 对话与修改
Windows 真机截图 · 不要 AI 生成
保存刷新验证
Ctrl+S 保存,浏览器刷新,看修改生效。
具体怎么做
1 按 Ctrl+S 保存
2 浏览器打开或刷新页面
3 确认那一处真的变了
看到什么算成功:页面上看到那处变化
今日备份
把整个文件夹复制一份,命名加上日期。
具体怎么做
1 整个项目文件夹 Ctrl+C → Ctrl+V
2 副本改名加日期,如 我的第一个AI网页-备份0205
看到什么算成功:备份文件夹存在
本课咒语
[方括号]处换成你自己的内容,整段复制给 AI
只改一个地方咒让 IDE 里的 AI 小步改动
只改一个地方:[比如「首页大标题的颜色,换成深绿色」]。其他任何代码都不要动。改完告诉我你改了哪个文件的哪几行。
师父三诫
前人踩过的坑,你绕开就好
别碰终端面板
IDE 下方那个黑色命令窗口今天用不到,看见了绕开走。
别让它大改
第一次合作先立规矩:一次只改一处。养成习惯,后面省心。
别装两个 IDE
二选一。装多了只会让你纠结用哪个。
卡住急救
总原则:不要删,先描述
安装到一半卡住
关掉安装程序重新运行一次;还不行检查网络,换个时间段下载。
左侧找不到我的文件
急救箱第六条:文件 → 打开文件夹 → 选整个文件夹,不是单个文件。
AI 一口气改了一大堆
用昨天的备份回档,重发「只改一个地方」咒,一次只许它动一处。
出关自查
全部勾上即可升层(进度自动保存)
IDE 装好且只装了一个
左侧文件树能看到项目
AI 成功只改了一处
改动在浏览器里生效
一课一层
← 返回试炼路线
DAY 6 · 练气六层

布阵连环

定下全站页面清单(4–6 页),生成缺的页面,并给每一页装上同一条导航栏——任意页可达任意页。
DAY
6
预计用时60–90 分钟
需要工具AI IDE
出关产物全站页面清单 + 统一导航
今日边界
页面别超过 6 个 空页先立骨架 不纠结导航样式
本课心法
动手之前,先把今天的「为什么」想明白
纲举而目张
昨天两页能互通,今天把整张网撒开:先定下全站有哪几页,再让每页顶上都长出同一条导航栏。导航就是网站的「总纲」,访客顺着它能去任何地方、也能回到任何地方。今天不填内容,只搭骨架和路——先让人能在你的网站里走通,再谈每间屋子摆什么。
概念点睛
今天你会真正搞懂一个词,以后都用得上
导航栏 / 站点结构
网站的路网
导航栏是每一页顶部那一排链接,点哪个去哪页。站点结构就是「你一共有哪几页、它们怎么连」。把网站想成一栋楼:页面是房间,导航栏是每层都一样的走廊。走廊统一了,访客在哪间屋都不会迷路。
主线步骤
每一步都写明「看到什么算成功」
写下全站清单
基于立项卡定稿:首页 + 3–5 页。写进 页面清单.txt。
具体怎么做
1 在 IDE 里新建 页面清单.txt
2 列出首页 + 3–5 页,每页写好英文文件名
3 例如 index / about / works / contact .html
看到什么算成功:清单落在文件里
师父叮嘱4 到 6 页正好。少了单薄,多了两周做不完——内容比页数值钱。
让 AI 生成缺的页面
用下面的「布阵咒」。空页先放骨架,内容 Day 7–8 再填。
具体怎么做
1 复制下面「布阵咒」,填上你的页面清单
2 发给 IDE 的 AI
3 等它把缺的页面都建出来,文件树里能看到
看到什么算成功:文件树里页面齐了
统一导航栏
同一条导航加到每一页顶部,当前页高亮可以有,花哨动画不要。
具体怎么做
1 继续让 AI 给每页加同一条顶部导航
2 强调「所有页面用完全一样的导航」
3 逐页保存
看到什么算成功:每页顶部长一样
师父叮嘱让 AI「所有页面用完全一样的导航栏」。每页各写一套,迟早会对不齐。
真实截图位 · 待补:统一导航效果
Windows 真机截图 · 不要 AI 生成
逐页点导航
从首页出发,把每个导航项都点一遍,再从任意页回首页。
具体怎么做
1 从首页开始,把导航每一项都点一遍
2 再从其他页点回首页
3 记下点了打不开(404)的链接
看到什么算成功:没有死链
今日备份
整个文件夹复制备份。
具体怎么做
1 整个项目文件夹复制改名加日期
看到什么算成功:备份就位
本课咒语
[方括号]处换成你自己的内容,整段复制给 AI
布阵咒建好全站页面 + 统一导航
我的网站最终包含这些页面:[清单,如 index.html / about.html / works.html / contact.html]。请:1. 生成还不存在的页面(统一风格的骨架即可);2. 给所有页面加同一条顶部导航栏,链接互通,当前页高亮;3. 逐个文件给我完整代码。
补导航咒给漏掉的页面补上导航
这一页缺了导航栏,请给它加上和其他页面完全一样的顶部导航,链接保持一致,其他内容不要动。代码如下:[粘贴这一页代码]
师父三诫
前人踩过的坑,你绕开就好
别贪页数
6 页封顶。页面是用来装内容的,不是用来充数的。
别今天填内容
空页先立骨架,灌真实内容是 Day 7–8 的功课。
别纠结导航好不好看
今天只求「统一 + 能点通」,美化留到 Day 9。
卡住急救
总原则:不要删,先描述
有的页面导航没加上
把那一页的完整代码发给 AI:「给这页也加上同样的导航栏。」
点导航 404
导航里的文件名和真实文件名逐字核对,大小写和 .html 后缀都要一致。
页面太多做不完
砍。4 页足够出师,内容比数量值钱。
出关自查
全部勾上即可升层(进度自动保存)
全站页面都已存在
每页顶部有同一条导航
任意页可跳到任意页
今日备份完成
一课一层
← 返回试炼路线
DAY 7 · 练气七层

灌注真言

把最重要的 1–2 个页面用真实材料填实。今天练的是「喂材料」的提示词工艺:AI 排版,你供真话。
DAY
7
预计用时60–90 分钟
需要工具AI IDE
出关产物核心页真实内容
今日边界
不准 AI 编造内容 不抠样式 一次只做一页
本课心法
动手之前,先把今天的「为什么」想明白
言之有物,行之有恒
到今天你该明白一件事:AI 负责排版,你负责供料。它能把字排得漂漂亮亮,但写什么得是你的真东西。一个写「家乡面馆」的网站,AI 不知道你外婆的汤底熬几个钟头——那是你要喂给它的真话。今天练的是最值钱的手艺:把真实材料整理好,让 AI 替你排进页面,而不是让它替你编。
概念点睛
今天你会真正搞懂一个词,以后都用得上
提示词工艺(喂材料)
给 AI 真话
提示词不是咒语玄学,是「把要求说清楚」的手艺。最核心的一条:给足真材料,并立规矩——「只能用我给的,缺的标[待补],不许编」。AI 一旦开始编造,你的网站就有了假内容;你管得越紧,它产出越实在。这门手艺,会跟着你用一辈子。
主线步骤
每一步都写明「看到什么算成功」
挑出最重要的一页
访客最想看的那页——作品页、菜谱页、文章页,由你的主题定。
具体怎么做
1 想想访客最想看哪一页
2 定下今天只攻这一页
看到什么算成功:定了今天的主攻页
师父叮嘱只挑一页主攻。把一页做实,胜过把五页都做半截。
收集真实材料
把真话先写在记事本里:名字、介绍、故事、清单。photos 后天再说,文字先行。
具体怎么做
1 打开记事本
2 把这页要写的真话一段段敲进去:名字、介绍、故事、清单
3 先不管排版,把内容攒齐
看到什么算成功:攒出一段段材料
把材料喂给 AI 排版
用下面的「灌注咒」。重点:缺的让它标[待补],不许编。
具体怎么做
1 复制下面「灌注咒」
2 把你的材料整段贴进[],保留「不许编造」那句
3 发给 AI,把它给的代码覆盖保存、刷新
看到什么算成功:材料进了页面对应区块
师父叮嘱咒里那句「不许编造、缺的标[待补]」是关键,千万别删——它是防 AI 胡说的护身符。
真实截图位 · 待补:内容成型的核心页
Windows 真机截图 · 不要 AI 生成
通读一遍,改口吻
AI 排的词不像你说的话,就亲手改。
具体怎么做
1 刷新后从头读一遍
2 不像你说话的地方,记事本里直接改
3 保存刷新
看到什么算成功:读起来是你的语气
第二重要的页面同样处理
时间够就做,不够明天继续。
具体怎么做
1 同样:攒材料 → 灌注咒 → 改口吻
2 时间不够就留到明天,不必硬撑
看到什么算成功:第二页也有真内容
今日备份
老规矩。
具体怎么做
1 整个项目文件夹复制改名加日期
看到什么算成功:备份就位
本课咒语
[方括号]处换成你自己的内容,整段复制给 AI
灌注咒把真实材料排进页面
这是我[页面名]的真实材料: [把材料整段粘贴在这里] 请把它们排进该页对应的区块,保持现有样式不变。规则:1. 只能用我给的材料,不许编造;2. 材料不够的地方用[待补]标注;3. 给我完整文件。
收编咒AI 擅自编了内容时
请删掉这一页里所有我没有提供的内容,凡是你自己补的信息一律换成[待补]占位。只保留我给过的真实材料,给我完整文件。
师父三诫
前人踩过的坑,你绕开就好
别让 AI 编
编出来的内容看着丰满,却是假的。宁可标[待补],也不要假话。
别今天抠样式
内容为先,长相是 Day 9 的事。今天只管「话是不是真的、全不全」。
别一次铺满全站
一天攻一页。核心页做扎实,比全站半成品强。
卡住急救
总原则:不要删,先描述
AI 自作主张编了内容
回它:「删掉所有我没提供的内容,用[待补]占位。」然后检查一遍。
材料太长排得乱
让 AI 分段加小标题:「把这段拆成 3 小节,每节配小标题。」
实在没材料可写
三句真话起步:这是什么、为什么做它、你最喜欢哪一点。真比多重要。
出关自查
全部勾上即可升层(进度自动保存)
核心页内容全部真实
页面里没有占位假文
口吻像你自己
今日备份完成
一课一层
← 返回试炼路线
DAY 8 · 练气八层

万象入页

给全站配上图片,并把剩余页面填实。今天顺便弄懂一个真正重要的概念:文件路径。
DAY
8
预计用时60–90 分钟
需要工具AI IDE
出关产物全站配图 + 页面填实
今日边界
图片全部进 images 文件夹 文件名用英文 不用超大原图
本课心法
动手之前,先把今天的「为什么」想明白
致广大而尽精微
文字立住了,今天给网站添血肉——配图。但图片是新手最容易翻车的地方:十个裂图,九个是「路径」没对。所以今天顺手把一个一辈子有用的概念弄懂:文件路径,也就是「文件住在哪、怎么找到它」。理解了它,图片裂了你自己就能判断为什么。
概念点睛
今天你会真正搞懂一个词,以后都用得上
文件路径(相对路径)
文件的住址
路径就是文件的住址。images/noodles.jpg 的意思是「在我旁边的 images 文件夹里,找 noodles.jpg」。网页找图,靠的就是这个住址;写错一个字、大小写不符、图没放对地方,它就找不到,于是裂图。把图统一放进 images 文件夹,住址就整齐,AI 也最不容易写错。
主线步骤
每一步都写明「看到什么算成功」
建 images 文件夹
在项目文件夹里新建 images,以后所有图都住这里。
具体怎么做
1 进入你的项目文件夹
2 空白处右键 →「新建」→「文件夹」
3 命名为 images(全小写英文)
看到什么算成功:文件树出现 images
师父叮嘱所有图集中住一个文件夹,路径才整齐。图片散落各处是裂图的头号原因。
收集图片
自己拍的、有授权的素材图都行。文件名改成英文小写,如 noodles.jpg。
具体怎么做
1 把要用的图片拷进 images 文件夹
2 逐个重命名为英文小写,如 noodles.jpg
3 确认 images 里有 3 张以上
看到什么算成功:images 里有 3 张以上
师父叮嘱文件名用英文小写、不留空格:noodles.jpg 稳,「面 1.jpg」容易出问题。
真实截图位 · 待补:images 文件夹
Windows 真机截图 · 不要 AI 生成
让 AI 插图
用下面的「入页咒」,告诉它哪张图放哪页哪块。
具体怎么做
1 复制下面「万象入页咒」
2 填上图片清单 + 哪张放哪页哪块
3 发给 AI,覆盖保存各页
看到什么算成功:代码里出现 img 标签
逐页检查图片显示
每页刷新看一遍,裂图就按急救处理。
具体怎么做
1 每页刷新看一遍
2 看到破图标(裂图)的,照「卡住急救」处理
看到什么算成功:没有一张裂图
真实截图位 · 待补:图片全部就位
Windows 真机截图 · 不要 AI 生成
剩余页面填实
用昨天的灌注咒把还空着的页面填上真实内容。
具体怎么做
1 用 Day 7 的灌注咒,把还空的页面填上真内容
看到什么算成功:全站没有空骨架页
今日备份
老规矩。
具体怎么做
1 整个项目文件夹复制改名加日期
看到什么算成功:备份就位
本课咒语
[方括号]处换成你自己的内容,整段复制给 AI
万象入页咒把图片插进各页
我在项目里建了 images 文件夹,里面有这些图:[清单,如 noodles.jpg / market.jpg]。请把它们分别插到[哪页的哪个区块],使用相对路径 images/文件名,写好 alt 文字,宽度适配区块不变形。逐文件给我完整代码。
收图咒图片把版面撑破时
让我网站里所有图片的宽度都不超过它所在的区块,等比例缩放、不变形,并且在手机上也不溢出。逐文件给我完整代码。
师父三诫
前人踩过的坑,你绕开就好
别用超大原图
手机拍的几兆大图会让网页很慢,长边压到 1600 像素以内足够清晰。
别用没授权的图
随手搜来的图可能有版权。用自己拍的,或注明可商用的免费素材。
别用中文图名
英文小写文件名最稳,中文名在上线时常常裂掉。
卡住急救
总原则:不要删,先描述
图片全裂了
检查三件事:图真在 images 里、代码里写的是 images/文件名、文件名含后缀逐字一致。
图片巨大把版撑破
让 AI 给图片设最大宽度:「所有图片宽度不超过所在区块,等比缩放。」
手头没有合适的图
先让 AI 放纯色占位块标上[图位],照片以后随时换。
出关自查
全部勾上即可升层(进度自动保存)
所有图片都在 images 文件夹
每页配图正常显示
没有页面还是空骨架
今日备份完成
一课一层
← 返回试炼路线
DAY 9 · 练气九层

丹青妆点

统一全站视觉风格:一套配色、一套字体感觉,所有页面长成一家人。顺便认得 CSS 是什么。
DAY
9
预计用时60–90 分钟
需要工具AI IDE
出关产物统一风格的全站
今日边界
主色不超过 2 个 不加新内容 别追网红特效
本课心法
动手之前,先把今天的「为什么」想明白
腹有真章,自显气华
内容齐了,今天给它穿衣裳。但「好看」不是越花越好,恰恰相反——一套克制的配色、统一的字,比满屏渐变和特效高级十倍。今天的任务是让所有页面「长成一家人」,并第一次认得控制长相的那层东西:CSS。你会发现,改一行,全站的颜色就跟着变。
概念点睛
今天你会真正搞懂一个词,以后都用得上
CSS(样式)
网页的衣裳
如果说 HTML 是网页的骨架和内容,CSS 就是它的衣裳——颜色、字体、间距、圆角,全归它管。妙处在于:一套 CSS 可以管全站所有页面,改一处主色,每一页都跟着变。你不用会写,但今天要亲手改一行颜色、刷新看效果,从此「CSS」对你不再是天书。
主线步骤
每一步都写明「看到什么算成功」
用嘴定风格
说出来:主色什么色、底色什么色、想要什么气质(清爽/温暖/正式)。
具体怎么做
1 想三件事:主色、底色、整体气质
2 用一句话写下来,如「清爽海边感,主色浅蓝」
看到什么算成功:一句话风格定了
师父叮嘱说气质比说代码管用。「清爽的海边感、主色浅蓝」就够 AI 干活了。
让 AI 统一全站
用下面的「丹青咒」。让它顺便告诉你「换主色要改哪一行」。
具体怎么做
1 复制下面「丹青咒」,填上你的风格
2 让它顺便说明「换主色改哪一行」
3 逐页覆盖保存
看到什么算成功:逐文件拿到新代码
逐页检查
每页刷新看:配色统一了吗?字还清楚吗?
具体怎么做
1 每页刷新
2 看:配色统一了吗?字看得清吗?
看到什么算成功:全站一家人
真实截图位 · 待补:统一风格后的全站
Windows 真机截图 · 不要 AI 生成
亲手改一处颜色
按 AI 指的那一行,自己把颜色代码改一下再改回来。认识 #2F4A40 这种写法。
具体怎么做
1 找到 AI 指的那行颜色码(#开头)
2 先记下原值,再随便改个颜色,保存刷新
3 看到变化后,把它改回原值
看到什么算成功:体验了一次改 CSS
师父叮嘱#2F4A40 这种井号开头的就是颜色码。改之前先记下原值,方便改回去。
今日备份
老规矩。
具体怎么做
1 整个项目文件夹复制改名加日期
看到什么算成功:备份就位
本课咒语
[方括号]处换成你自己的内容,整段复制给 AI
丹青咒统一全站配色字体
把我的网站统一成这种风格:主色[…],底色[…],整体气质[清爽/温暖/正式]。要求:1. 所有页面共用同一套配色与字体设定;2. 文字对比度要清楚易读;3. 逐文件给完整代码;4. 最后告诉我以后想换主色该改哪一行。
收敛咒风格太花想压一压
我的网站太花了。请只保留两个主色加黑白灰,删掉所有渐变、光晕和花哨特效,让它干净、克制、好读。逐文件给我完整代码。
师父三诫
前人踩过的坑,你绕开就好
别超过两个主色
颜色一多就乱。两个主色 + 黑白灰,是高级感的安全配方。
别追网红特效
渐变球、霓虹光、满屏动画,看着热闹,读着累。克制才显贵。
别加新内容
今天只换衣裳,不动内容。内容那关 Day 7–8 已经过了。
卡住急救
总原则:不要删,先描述
越改越花哨
下死命令:「全站只允许两个颜色加黑白灰,删掉所有渐变和阴影特效。」
有一页漏改了
把那页代码发给 AI:「把这页也统一成同样风格。」
字看不清了
「正文颜色加深,保证在底色上清晰可读」,让 AI 调对比度。
出关自查
全部勾上即可升层(进度自动保存)
全站配色统一
文字清晰可读
自己动手改过一处 CSS
今日备份完成
一课一层
← 返回试炼路线
DAY 10 · 练气十层

小术通灵

给网站加 1–2 个简单交互(回到顶部、点击展开、图片放大都算),认得 JS 在哪里、怎么验收。
DAY
10
预计用时60–90 分钟
需要工具AI IDE
出关产物能用的小交互
今日边界
最多两个交互 不做登录注册 坏了就回退
本课心法
动手之前,先把今天的「为什么」想明白
四两而拨千斤
到今天,你的网站会看、会读、还好看。今天给它加「手脚」——点一下会有反应的小交互。一个「回到顶部」的按钮、一段「点击展开」的文字,就能让死板的页面活起来。你不用懂 JavaScript,但要认得它在哪、学会怎么验收:该动的动了,就算成功;不动,就把报错原样丢给 AI。
概念点睛
今天你会真正搞懂一个词,以后都用得上
JavaScript(交互)
网页的手脚
HTML 是骨架、CSS 是衣裳,JavaScript 就是让网页「动起来」的手脚——点击、展开、切换、弹出,都归它管。它比前两样难一点,但你今天的任务不是写它,而是「点对需求、会验收」:描述清楚要什么效果,让 AI 实现,再亲手点一遍看灵不灵。
主线步骤
每一步都写明「看到什么算成功」
选 1–2 个小术
推荐难度从低到高:回到顶部按钮、点击展开收起、简易深色模式。
具体怎么做
1 从最简单的选起:「回到顶部」按钮最稳
2 最多选两个
看到什么算成功:选好了要加什么
师父叮嘱从「回到顶部」起步,它最简单、最不容易出错,先尝到甜头再挑战难的。
让 AI 实现
用下面的「通灵咒」,要求它说清「点什么、会发生什么」。
具体怎么做
1 复制下面「通灵咒」,描述你要的效果
2 发给 AI,覆盖保存刷新
看到什么算成功:拿到完整代码
亲手验收
按 AI 说的去点。该动的动、该出现的出现。
具体怎么做
1 按 AI 说的去点那个按钮 / 那块文字
2 该动的动了、该出现的出现了,就算成功
看到什么算成功:交互如约工作
真实截图位 · 待补:交互生效画面
Windows 真机截图 · 不要 AI 生成
坏了就回退
页面异常立刻用昨日备份回档,再让 AI 用更简单的方法重来。
具体怎么做
1 页面崩了别慌
2 把昨天备份的文件复制改名,盖回 index.html
3 再让 AI 用更简单的方法重做
看到什么算成功:页面始终可用
师父叮嘱交互最容易把页面搞崩。所以动手前先确认昨天的备份还在——这是你的后悔药。
今日备份
老规矩。
具体怎么做
1 整个项目文件夹复制改名加日期
看到什么算成功:备份就位
本课咒语
[方括号]处换成你自己的内容,整段复制给 AI
通灵咒加一个小交互
给我的网站加一个小交互:[描述,比如「右下角一个按钮,点击平滑回到页面顶部」]。要求:1. 用最简单的方式实现,JS 写在同一文件里;2. 告诉我点什么、会发生什么、在哪个文件加了什么;3. 给完整文件。
报错回传咒交互点了没反应
我加了一个交互但点了没反应。我按 F12 看到的红色报错是:[把报错原样粘贴]。请告诉我原因并修复,给我完整文件。
师父三诫
前人踩过的坑,你绕开就好
别超过两个交互
贪多必崩。一两个小术做稳,比五个半残强。
别碰登录注册
那需要后端,远超今天的范围,也不在出师要求里。
崩了立刻回退
别在崩掉的页面上继续让 AI 改,越改越乱。先回档,再重来。
卡住急救
总原则:不要删,先描述
点了没反应
按 F12 打开控制台,不用看懂,把红色报错原样复制给 AI:「这是报错,请修复并给完整文件。」
加完整个页面坏了
回退昨日备份,重来时把功能描述得更小更具体。
想要的功能太复杂
砍成最小版。「相册轮播」先做成「点击切换下一张」。
出关自查
全部勾上即可升层(进度自动保存)
至少一个交互能正常用
知道坏了怎么回退
今日备份完成
一课一层
← 返回试炼路线
DAY 11 · 练气十一层

渡劫问诊

全站大体检:把这些天攒下的毛病列成清单,用报错三句话逐个修掉,并留下修复记录。
DAY
11
预计用时60–90 分钟
需要工具AI IDE + 急救箱
出关产物修复记录 + 更稳的网站
今日边界
一次只修一个 修不好的不挡路就放过 动手前必有备份
本课心法
动手之前,先把今天的「为什么」想明白
君子日三省其身
上线前一天,先给网站做次全身体检。这些天攒下的小毛病——裂图、死链、错字、挤一块儿——今天集中清。心法只有一句:一次只修一个,修完验证,再修下一个。最值钱的不是修好了多少,而是你练出了「找毛病、描述毛病、逐个击破」的真功夫,这比任何一个网站都带得走。
概念点睛
今天你会真正搞懂一个词,以后都用得上
调试(找毛病)
排错的功夫
调试就是「发现毛病 → 描述毛病 → 修好毛病」。新手怕报错,高手把报错当线索。你的工具一直是那把「报错三句话」:我做了什么、我看到什么、我想要什么。把现象说清楚,AI 才能对症下药。学会调试,你就不再需要「保姆」,遇事能自救。
主线步骤
每一步都写明「看到什么算成功」
全站走查,列毛病清单
每页过一遍:裂图、死链、错字、挤压、点了没反应,全记进 修复清单.txt。
具体怎么做
1 新建 修复清单.txt
2 当挑剔访客,从头到尾点一遍每一页
3 每发现一个毛病记一行,先别动手修
看到什么算成功:清单成形
师父叮嘱当个挑剔的访客,从头点到尾。先把毛病全找出来记下,别边找边修——会越改越乱。
按影响排序
把「影响别人看懂你网站」的排前面,纯美观的放后面。
具体怎么做
1 把「影响看懂内容」的毛病排前面
2 纯美观的小问题放后面
3 圈出前三名
看到什么算成功:前三名圈出来了
逐个问诊
对每个毛病用「报错三句话」问 AI,一次只修一个,修完验证再修下一个。
具体怎么做
1 对第一个毛病用下面「报错三句话」问 AI
2 改完刷新验证
3 再修下一个,一次只修一个
看到什么算成功:前三名修复
师父叮嘱一次只丢一个毛病给 AI。一口气塞五个,它顾此失彼,你也分不清哪个修好了。
真实截图位 · 待补:修复前后对比
Windows 真机截图 · 不要 AI 生成
修一个记一行
修复清单上标记:什么毛病、怎么修好的。这是你的渡劫心得。
具体怎么做
1 在 修复清单.txt 标记:什么毛病、怎么修好的
看到什么算成功:记录在案
今日备份
老规矩,今天的备份格外重要。
具体怎么做
1 整个项目文件夹复制改名加日期
看到什么算成功:备份就位
本课咒语
[方括号]处换成你自己的内容,整段复制给 AI
报错三句话(问诊版)逐个修毛病
我刚刚做了什么:[…] 我现在看到什么:[毛病的样子,报错原样贴] 我希望它变成什么:[…] 请先告诉我最可能的原因,再只修这一个问题,给我完整文件。
师父三诫
前人踩过的坑,你绕开就好
别一次修一堆
同时改多处,崩了都不知道是哪一处。一次一个,稳扎稳打。
别死磕一个毛病
一个小毛病耗半小时还没好、又不挡上线,先记下放过,别耽误大局。
动手前先备份
今天改动最多,最容易崩。没有备份,别开修。
卡住急救
总原则:不要删,先描述
毛病太多无从下手
只修前三名。出师不要求完美,要求能看、能用、能分享。
越修越坏
立即回档备份,下次让 AI 修之前先说修法,你同意了再动代码。
有个毛病死活修不好
不挡上线就记进清单留到出师后。别让一个毛病拖死整个渡劫。
出关自查
全部勾上即可升层(进度自动保存)
列出了毛病清单
至少修好 3 个
修复记录写了
今日备份完成
一课一层
← 返回试炼路线
DAY 12 · 练气十二层大圆满

掌中乾坤

让网站在手机上也能正常看,收一条真实反馈。加练:注册 GitHub 账号,为明天渡劫备好雷引。
DAY
12
预计用时60–90 分钟
需要工具AI IDE + 手机
出关产物手机端正常 + 一条反馈
今日边界
只修手机端大问题 不重做设计 反馈记下不连夜改
本课心法
动手之前,先把今天的「为什么」想明白
运乾坤于掌心
练气最后一关。今天做两件事:让网站在手机上也好看,再收一条真人的反馈。八成的访客是用手机看你网站的,电脑端再美,手机上挤成一团也白搭。再加一道避劫准备——注册 GitHub,为明天上线备好雷引。今日一过,万事俱备,只待雷动。
概念点睛
今天你会真正搞懂一个词,以后都用得上
响应式(移动端)
随屏变身
响应式就是同一个网站,会根据屏幕大小自动调整:电脑上宽屏排版,手机上自动变窄、字变大、不出现要左右拖的横条。你不用懂它怎么实现,只要会验收:用浏览器的「手机模拟」逐页看一遍,挤了、溢出了、字太小了,就丢给 AI 修。
主线步骤
每一步都写明「看到什么算成功」
手机模拟器里看一遍
浏览器按 F12 → 点手机图标,逐页检查:字太小?横向滚动?图溢出?
具体怎么做
1 浏览器里打开你的网站
2 按 F12 打开开发者工具
3 点左上角的手机/平板图标,切到手机视图
4 逐页看:字太小?要左右拖?图溢出?记下来
看到什么算成功:列出手机端问题
师父叮嘱出现「要左右拖动」的横条,是手机端头号毛病,重点记下来。
真实截图位 · 待补:F12 手机模拟
Windows 真机截图 · 不要 AI 生成
让 AI 加响应式
用下面的「乾坤咒」,要求不改电脑端观感。
具体怎么做
1 复制下面「乾坤咒」,填上手机端的问题
2 强调「不要改变电脑端」
3 发给 AI,覆盖保存
看到什么算成功:手机模拟里正常了
再查一遍
电脑端和手机模拟各过一遍,两边都不能坏。
具体怎么做
1 手机视图再过一遍 → 正常
2 关掉手机视图,电脑端也过一遍 → 没坏
看到什么算成功:双端都正常
师父叮嘱改完一定两端都看。常有「手机修好了、电脑反而乱了」,必须双向确认。
真实截图位 · 待补:手机端修复后
Windows 真机截图 · 不要 AI 生成
发给一位朋友
把本地截图或屏录发朋友看,收一条真实反馈记进 反馈.txt。
具体怎么做
1 截图或录屏发给一位朋友
2 请他说一句真实感受
3 记进 反馈.txt
看到什么算成功:收到一条反馈
加练 · 避劫准备
注册 GitHub 账号(github.com,邮箱+密码+用户名),明天渡劫直接登录。
具体怎么做
1 打开 github.com
2 注册:邮箱 + 密码 + 用户名(纯英文、好记)
3 收邮件验证,能登录就行
看到什么算成功:GitHub 能登录
师父叮嘱用户名会出现在你明天的网址里,起个顺眼、好记、纯英文的。
今日备份
渡劫前最后一次备份,务必做。
具体怎么做
1 整个项目文件夹复制改名加日期(渡劫前必做)
看到什么算成功:备份就位
本课咒语
[方括号]处换成你自己的内容,整段复制给 AI
乾坤咒加移动端响应式
我的网页在手机上有这些问题:[字太小/出现横向滚动/图片溢出]。请加上 viewport 设置和响应式样式,让手机端正常显示,但不要改变电脑端的观感。逐文件给我完整代码。
师父三诫
前人踩过的坑,你绕开就好
别重做设计
今天只修手机端的「挤、溢、小」,不是推翻重来。设计早定稿了。
别连夜改反馈
朋友的建议记进 反馈.txt 就好。出师后慢慢打磨,今晚要养精蓄锐。
别跳过 GitHub 注册
今天不注册,明天渡劫现场手忙脚乱。先把雷引备好。
卡住急救
总原则:不要删,先描述
手机真机打不开本地文件
不用真机也行,F12 手机模拟足够完成今天的验收。
手机好了电脑坏了
要求 AI 用媒体查询:「手机样式只在小屏幕生效,不许影响电脑端。」
朋友说不好看
说声谢谢记下来。出师后有的是时间打磨,今天不连夜重做。
出关自查
全部勾上即可升层(进度自动保存)
手机模拟无横向滚动
电脑端没有被改坏
收到一条真实反馈
GitHub 账号注册好了
渡劫前备份完成
仗键走天涯
道友,回宗了
进度只存在本地与你的账号里 · 全程免费
忘了灵契? 先逛逛山门 →
御键乘风来
除错天地间
卡住了 · 别慌

渡劫急救箱

总原则:不要删,先描述
报错三句话 · 万用问诊模板不管遇到什么,先用它问 AI
我刚刚做了什么:[比如:把大标题改成了我的名字] 我现在看到什么:[把报错信息或异常画面原样描述/粘贴在这里] 我希望它变成什么:[比如:标题正常显示,页面能打开] 请用我能听懂的话说明问题出在哪,并给我改好的完整文件。
按「我看到什么」查
点一个现象,看急救方案
文件变成 index.html.txt
双击后看到一屏代码
改了内容刷新没变化
图片不显示
AI 回答跑偏
IDE 里找不到我的文件
GitHub Pages 链接打不开
文件变成 index.html.txt
最可能的原因
另存为时「保存类型」没选「所有文件」,记事本自动加了 .txt。
先别做什么
别删了重做,文件内容是好的,只是名字不对。
复制给 AI 的话
我的文件后缀变成了 index.html.txt。请告诉我在 Windows 上怎么显示文件扩展名,并把它改回 index.html,一步一步说。
自己检查(三步以内)
资源管理器顶部「查看」→ 勾选「文件扩展名」
右键文件 → 重命名,删掉末尾的 .txt
弹出警告点「是」
修好的标准
文件图标变成浏览器图标,双击打开是网页。
拖入 gpt-image-2 场景头图 · 如:起阵台/符篆壁
可复制 · 填空处用[方括号]标出

咒语库

七道常用咒语,覆盖从开光到发布的全部场景。
开光启动咒
适用:第一次让 AI 生成完整网页
你是我的 AI 编程陪跑教练,我完全不会编程。 请帮我做一个可以直接保存成 index.html 的单文件个人主页,要简单、但看起来漂亮。 主题:[填你的主题,比如「我的第一个网页」]。 页面内容: 1. 一个醒目的大标题; 2. 一句自我介绍; 3. 三张小卡片,分别写:我会让 AI 帮我做、我会保存文件、我会自己改; 4. 一个点了会有反应的按钮; 5. 底部一句小字:第一版能打开就已经成功。 技术要求: 1. 只给我一个完整 HTML 文件,CSS 和 JavaScript 都写在同一个文件里; 2. 不要让我安装任何东西; 3. 最后用小白能听懂的话告诉我怎么保存成 index.html 并用浏览器打开。
只做计划,不改代码
适用:怕 AI 一上来就乱改
先不要改任何代码。请先告诉我:你打算怎么改、会动到哪些文件的哪些位置、为什么这样改。等我回复「可以」,你再给出完整代码。
只改一个地方
适用:每次小步修改,防止改崩
只改一个地方:[说清楚哪里,比如「首页大标题的文字」]。其他任何代码都不要动。改完给我完整文件,并告诉我你只改了哪几行。
报错三句话
适用:遇到任何报错或异常
我刚刚做了什么:[比如:把大标题改成了我的名字] 我现在看到什么:[把报错信息或异常画面原样描述/粘贴在这里] 我希望它变成什么:[比如:标题正常显示,页面能打开] 请用我能听懂的话说明问题出在哪,并给我改好的完整文件。
页面没变化问诊
适用:改了代码但刷新无效
我改了代码但刷新后页面没变化。我用的编辑器是[记事本/Trae],文件路径是[…]。请列出最可能的 3 个原因,按顺序教我逐个排查,每步都告诉我「看到什么算正常」。
图片不显示问诊
适用:配图加载不出来
我的网页图片不显示。图片文件名是[…],它和 index.html 的位置关系是[同一文件夹/在 images 子文件夹里]。请检查我的 src 写法并给我改好的那一行,顺便告诉我以后图片命名要注意什么。
发布前检查咒
适用:Day 13 上线之前
我准备把网站上传到 GitHub Pages。请帮我检查:1. 首页文件是否叫 index.html;2. 图片和页面链接是否都用相对路径;3. 有没有引用我电脑本地的绝对路径。先列出问题清单,不要改代码。
不堆工具百科 · 只讲选择逻辑

工具剑谱

主线只在 Day 5 选一把「本命法器」;其余都是以后再说。
本命法器 · Day 5 二选一
免费、中文界面、装一个就够
Trae
主线推荐
字节出品的 AI IDE,中文界面,对话改代码。Day 5 把项目搬进来之后,「让 AI 只改一处」就在这里练。
适合:想要省心、跟课不绕路的人
CodeBuddy
主线可选
腾讯出品,同样是中文 AI IDE。和 Trae 二选一即可,课程步骤两边都适用。
适合:腾讯系账号体系用得多的人
旁路了解 · 不在主线
OpenCode
开源的终端向 AI 编程工具。课程不用它——知道有这回事就行,等你出师后想折腾再说。
内门进阶 · Day 14 之后
出师大典上会递「内门拜帖」,现在不用碰
了解金丹大道付费课 →
Claude Code
命令行里的 AI 工程师:能读懂整个项目、自己规划、批量改文件。筑基之后的金丹路。
Codex
OpenAI 的编程智能体,云端跑任务、提交代码。同为进阶方向,出师后再选门径。
← 返回试炼路线
DAY 13 · 练气十二层 → 筑基初见 · 渡劫日

雷动开页

把你的网站发布到互联网上,拿到一个发给任何人都能打开的在线链接。像渡劫,但每一步都清楚。
预计用时约 90 分钟
需要工具浏览器 + GitHub 网页版
出关产物可分享的在线链接
今日边界
不碰命令行 不装 Git 不删本地文件夹
渡劫六步
全程在 GitHub 网页上点按钮,不写命令
登录或注册 GitHub
打开 github.com。Day 12 加练已经注册过的直接登录;没注册的现在注册——邮箱 + 密码 + 用户名,用户名以后会出现在你的网址里,起个顺眼的。
看到什么算成功:右上角出现你的头像
真实截图位 · 待补:GitHub 注册/登录页
Windows 真机截图 · 不要 AI 生成
新建仓库
点右上角 + 号 → New repository。仓库名建议小写英文,比如 my-first-site。选 Public,点 Create repository。
看到什么算成功:进入一个空仓库页面
真实截图位 · 待补:新建仓库表单
Windows 真机截图 · 不要 AI 生成
上传网站文件
点 uploading an existing file,把「我的第一个AI网页」文件夹里的所有文件(不是文件夹本身)拖进上传区,点绿色 Commit changes。
看到什么算成功:仓库文件列表里有 index.html
真实截图位 · 待补:拖拽上传文件页
Windows 真机截图 · 不要 AI 生成
开启 GitHub Pages
仓库页点 Settings → 左侧 Pages → Branch 选 main → Save。这一下,就是按下了渡劫的雷引。
看到什么算成功:页面顶部出现你的网址(先别急着点)
真实截图位 · 待补:Pages 设置页与生成的链接
Windows 真机截图 · 不要 AI 生成
等待雷云散去(2–5 分钟)
链接生效需要几分钟。去倒杯水,回来刷新 Pages 页面,等地址旁出现绿色对勾。
看到什么算成功:你的网址前出现绿色标记
打开在线链接,验收
点开你的网址——这是全世界都能访问的你的网站。把链接存进 day13-pages-link.txt,然后到下面的验收卡破境。
避劫小径 · GitHub 全程打不开怎么办
换国内静态托管:腾讯 EdgeOne Pages。流程一样简单——注册 → 新建项目 → 上传文件夹 → 拿链接。课程承诺是「拿到在线链接」,走哪条路都算渡劫成功。
链接验收 · 破境
贴上链接,勾完三项,按下那颗雷键
手机开流量也能打开这个链接
每个页面都能点开,样式没乱
图片全部正常显示
渡劫失败急救
链接打开是 404
先等 2–5 分钟再刷新;还不行就检查仓库里首页文件是否叫 index.html、是否在根目录(不在子文件夹里)。
找不到 Pages 设置
仓库页顶部 Settings → 左侧栏往下找 Pages。Branch 下拉里选 main,旁边目录保持「/ (root)」,点 Save。
打开后只显示文字 README
说明仓库里没有 index.html。回到第三步,把本地文件夹里的文件重新拖上去(要文件,不是整个文件夹)。
← 返回试炼路线
DAY 14 · 筑基出师

出师大典

这不是一节课,是一场收束的仪式。五幕走完,你便不再是外门凡人。
开页符
验收灵契
打开你 Day 13 的在线链接,确认它还活着
筑基授印
你完成了一次完整的建站闭环:从一页纸到一个在线网站
待授印
出师帖
填上道号与站名,截图或复制文字,发给想发的人
逍遥键派 · 开页大吉外门试炼
出 师 帖
道号
站名
灵契(贴上你的 Day 13 在线链接)
十四日外门试炼期满,亲手做出并发布网站一座。
验明正身,授印筑基,准予出师。
2026 年 6 月 29 日
逍遥键派 谨识

建站复盘 · 三句话
写给三个月后的自己(自动保存)
内门拜帖
出师不是终点。金丹路在内门,只先递个帖
Claude Code
让 AI 读懂你的整个项目、自己规划、批量改文件——你只负责验收。
Codex
云端跑任务的编程智能体,睡一觉醒来活已干完的那种修行。
看不懂的词,来这里查 · 不打断正课

参考手册 · 藏经阁

课程里只说够用的,想深究的词条都收在这。用大白话解释,不堆术语。
目录
Windows 文件与后缀
浏览器与刷新
HTML 最小词典
CSS 最小词典
JS 最小词典
AI 提示词模板
GitHub Pages 术语
工具选择
Windows 文件与后缀
文件后缀(扩展名)
文件名最后一个点后面的几个字母,告诉电脑「这是什么文件」。.html 是网页,.txt 是纯文本。后缀错了,双击就打不对。
显示文件扩展名
Windows 默认把后缀藏起来,导致你看不出 index.html 其实叫 index.html.txt。打开任意文件夹 →「查看」→ 勾选「文件扩展名」,从此后缀全显形。这是新手第一个该打开的开关。
另存为「所有文件」
记事本另存时,「保存类型」若是「文本文档」,会强行加 .txt。改成「所有文件」,文件名填 index.html,才存得出真正的网页。
浏览器与刷新
刷新(F5)
改完代码、存好之后,回浏览器按 F5,页面才会重新读取最新文件。没刷新 = 看的还是旧的。
强制刷新(Ctrl+F5)
有时浏览器偷懒用缓存,改了图片或样式没变化。按 Ctrl+F5 强制重读,能解决八成「明明改了却没变」。
开发者工具(F12)
F12 打开。你只需用两样:左上角「手机图标」切手机视图查移动端;红色报错复制下来丢给 AI。其余看不懂没关系。
HTML 最小词典
网页的骨架
<h1>最大的标题。一页通常只有一个。
<p>一段正文文字。
<a>链接,点了能跳到别的页面。
<img>图片。靠 src 指向图片文件的住址。
<body>网页正文区,能看到的内容基本都在这里面。
CSS 最小词典
网页的衣裳
color文字颜色。
background背景颜色或背景图。
#2F4A40颜色码,井号开头。改它就换颜色。
padding内边距——内容到边框的留白。
font-size字号大小。觉得字小就调它。
JS 最小词典
网页的手脚
JavaScript让网页「动起来」的语言:点击、展开、切换都靠它。
点击事件「点了这个按钮,就做某件事」——交互的最小单位。
控制台F12 里显示报错的地方。红字复制给 AI 就行。
单文件HTML、CSS、JS 写在同一个 .html 里。本课全程只玩单文件。
AI 提示词模板
七道可直接复制的咒语——开光启动、只做计划、只改一处、报错三句话、页面没变化、图片不显示、发布检查。全部收在咒语库。
GitHub Pages 术语
Day 13 用得上
仓库(Repository)
放你网站文件的「网盘文件夹」。一个网站一个仓库。
GitHub Pages
GitHub 免费的「把仓库变成网站」功能。开启后给你一个谁都能打开的网址。
404
「页面没找到」。多半是没等链接生效,或首页文件不叫 index.html、没在根目录。
工具选择
本命法器(Trae / CodeBuddy)、旁路(OpenCode)、内门进阶(Claude Code / Codex)的选择逻辑,都在工具剑谱。
凡人
当前境界
凡人
道号:凡人 · 门派:逍遥键派
0 / 14
切换账号 / 回宗登录 →
🔒
内门正传 · 尚未解锁
筑基进阶课需「内门弟子」身份。报名内门或输入激活码即可解锁。
已入内门 · 筑基修士
内门正传已为你解锁。筑基进阶课正文上线后即可直接修习。
已过试炼
0 / 14 关
已习技能
0
下一步产物
Day 1:第一个 index.html
飞升进度 · 十四键
完整路线 →
破恐
1
2
3
4
5
6
7
8
9
10
11
12
渡劫
出师
技能徽章墙
破除恐惧
未解锁
立派定题
未解锁
双页互通
未解锁
开炉迁鼎
未解锁
万象入页
未解锁
小术通灵
未解锁
雷动开页
未解锁
筑基出师
未解锁
修行轨迹
DAY 1
破除恐惧
凡人 → 练气一层 · 第一个 index.html
进行中
DAY 2
立派定题
练气一层 · 主题首页 v1 + 备份
未开启
DAY 3
立骨塑形
练气二层 · 有真实区块的首页
未开启
DAY 4
双页互通
练气三层 · 第二页 + 双向链接
未开启
DAY 5
开炉迁鼎
练气四层 · 项目进 IDE + AI 改一处
未开启
DAY 6
布阵连环
练气五层 · 全站页面清单 + 统一导航
未开启
DAY 7
灌注真言
练气六层 · 核心页真实内容
未开启
DAY 8
万象入页
练气七层 · 全站配图 + 页面填实
未开启
DAY 9
丹青妆点
练气八层 · 统一风格的全站
未开启
DAY 10
小术通灵
练气九层 · 能用的小交互
未开启
DAY 11
渡劫问诊
练气十层 · 修复记录 + 更稳的网站
未开启
DAY 12
掌中乾坤
练气十一层 · 手机端正常 + 一条反馈
未开启
DAY 13
雷动开页
筑基初见 · GitHub Pages 上线链接
未开启
DAY 14
出师大典
筑基出师 · 出师帖与复盘
未开启

遍览藏经

搜课程、咒语、急救、术语——一处找全
报错
备份
index.html
GitHub Pages
Claude Code

常见问答

报名前、修行中最常被问到的那些
入门与适合
完全零基础、年纪大了能学吗?
+
能。课程就是为零基础设计的——不背语法、不学英文,第一天就让你做出能打开的网页。已有 50 多岁的学员顺利出师。
我用 Mac 可以吗?
+
可以。课程两端通用,只是全站演示截图以 Windows 为准,Mac 的对应操作课程里会说明。
需要买什么软件吗?
+
外门 14 天只用浏览器 + 记事本 + 一个免费 AI 对话工具,全程不花钱。Day 5 装一个免费 AI 编辑器,也不收费。
学习与进度
必须每天学吗?跟不上怎么办?
+
不必。一天一课跟得上,两天一课也不破功。进度自动存在本地,随时接着上次继续。
遇到报错卡住了怎么办?
+
用「报错三句话」描述给 AI,或去急救箱按现象查。总原则:不要删,先描述。
我的进度会丢吗?
+
进度保存在你本设备的浏览器里。换设备或清理浏览器数据会清空,重要作品记得自己备份文件。
免费与付费
外门真的全程免费吗?
+
是。14 天外门无付费墙、不收手机号、不强制注册。我们靠出师后愿意深造的人支撑。
内门付费课教什么?值得吗?
+
内门教 Claude Code、Codex、GitHub 进阶,让 AI 替你写整个项目、自动上线。适合已出师、想造真产品的人,支持 7 天无理由退款。
还有疑问?直接开页体验,做了就懂了。

隐私与服务条款

最后更新:示例占位 · 正式上线前请由你替换为合规文本
隐私政策
我们收集什么。免费外门不收手机号、不强制注册;你的修行进度仅保存在本设备浏览器里(localStorage),不上传服务器。报名内门付费课时,你主动填写的称呼与联系方式仅用于开课通知与课程服务。
我们不做什么。不贩卖你的个人信息、不发送营销骚扰、不在你不知情时追踪。
你的权利。你可随时清除浏览器数据以删除本地进度;报名信息可联系我们删除。
服务条款
课程性质。本站教授借助 AI 工具入门网页制作,所涉第三方工具(AI 对话、IDE、GitHub 等)的使用须遵守各自条款,其可能产生的费用与本站学费无关。
免费与付费。外门 14 天课程永久免费;内门为付费进阶课,支持 7 天无理由退款。
免责。课程内容尽力保证准确,但第三方工具界面可能更新;按课程方法操作产生的作品与数据,请自行做好备份。
迷·途
山中无路,键下有门
你要找的页面不在山门之内。别慌——按 Esc 退回山脚,从头开始也是一种修行。
筑基 · 立云阶
筑基正传 · 收费课 · 全栈会员站实战

把静态站,渡成
能上线、能收费的真站

把你练气期做出的静态站,接上后端、加上登录与付费墙,渡成一座能注册、能收费的真实全栈会员站。十八课,一步一步来。

你正在用的这个网站,就是这门课教你做的
注册、试读、付费解锁、个人中心——你眼前这座"会员渡口"的每一块,都是十八课里你要亲手造的。下面这三处,点开课程就能对上号。
顶栏的登录
就是你第 4 课要亲手造的登录组件
会员内容的锁
就是第 12 课你造的付费墙,真拦截靠后端 RLS
个人中心
就是第 13–14 课的"我的洞府"

四阶飞升 · 从静态页到会员站

连接 → 读写 → 闭环 → 复用
立地基 · 连接
接上后端
注册、登录,把数据存进云端数据库——让网页第一次"记住人"。
里程碑 · 注册登录跑通
通经脉 · 读写
建表与 CRUD
设计数据表,让页面真正读写云端数据,增删改查全跑通。
里程碑 · 数据增删改查
凝金锋 · 闭环
付费墙与支付
RLS 行级安全、激活码、解锁——做出真正拦得住的会员墙。
里程碑 · 付费墙拦得住
受香火 · 复用
部署与复刻
连仓上线拿到真链接,把这座会员渡口复刻成你自己的产品。
里程碑 · 真链接上线

他们已经渡过去了

学员亲手做出、真实上线、能注册能收费的站
看全部作品 →
筑基出师
家庭菜谱会员站
家人注册后能收藏菜谱、上传做法,付费解锁进阶菜单。
— 林阿姨
筑基出师
面试题库 Pro
免费题试读,会员解锁全部题解;激活码一兑就开通。
— 小周
筑基出师
独立约拍下单站
客人在线下单、付定金,后台管订单——一个人跑通收款闭环。
— 阿哲

备好渡口令牌,开始筑基

学完,你能复刻你正在用的这套会员渡口——注册、试读、付费解锁、个人中心,全是你亲手造的。

← 返回筑基正传首页
其一 · 先看价值

筑基正传 · 把站做成真站

这门课不只是教学站——你正在用的这套会员渡口,就是它带你亲手造的。

30
仅收 30 名
23
已拜入
11
平均上线用时
¥0
第三方月成本
筑基出师
家庭菜谱会员站
家人注册后能收藏菜谱、上传做法,付费解锁进阶菜单。
— 林阿姨
筑基出师
面试题库 Pro
免费题试读,会员解锁全部题解;激活码一兑就开通。
— 小周
筑基出师
独立约拍下单站
客人在线下单、付定金,后台管订单——一个人跑通收款闭环。
— 阿哲
你正在用的这个网站,就是这门课教你做的
注册、试读、付费解锁、个人中心——你眼前这座"会员渡口"的每一块,都是十八课里你要亲手造的。下面这三处,点开课程就能对上号。
其二 · 学什么

十八课 · 四阶飞升

立地基
法器换代 · 旧站新渡 换上 CLI 法器,把练气期的旧静态站接管过来
试读
命令行不咬人 · 装环境 装好开发环境,认识命令行,跑起第一条命令
试读
cc-switch 配法器 用 cc-switch 配置模型与中转,算力可控不外流
会员
立档存真 · 交给 GitHub 把项目交给 GitHub 看管,学会存档与回档
会员
开户立籍 · 接通 Supabase 注册 Supabase,创建后端项目,拿到连接钥匙
会员
身份初成 · 注册登录真生效 邮箱+密码注册登录真生效,注册即自动建档
会员 ★ 渡劫
通经脉
立库藏珍 · 造第一张表 为你的产品设计并创建第一张数据表
会员
落子成形 · 新增与读取 新增与读取数据(C/R),页面读写云端
会员
改易由心 · 编辑与删除 编辑与删除数据(U/D),跑通完整 CRUD
会员
各守洞府 · 行级安全 RLS 行级安全 RLS:游客与他人看不到你的会员内容
会员 ★ 渡劫
凝金锋
十一 定品分阶 · 免费会员两重天 规划免费 / 会员两级内容与付费边界
会员
十二 设墙立禁 · 付费墙拦住凡客 亲手造付费墙,拦住非会员看会员正文
会员
十三 灵石入袋 · 最小支付跑通 最小支付闭环:收款码 + 激活码解锁会员
会员 ★ 渡劫
十四 雷动真渡 · 全栈站上真线 全栈站部署上线,拿到真实公网链接
会员
受香火
十五 引客入门 · 真人使用变现 真人注册使用,验证变现,陌生人也能用
会员 里程碑
十六 固元体检 · 安全成本双复盘 安全与成本双复盘,给 AI 算力账号上封顶
会员
十七 一键复刻 · 付费墙变模板 把付费墙抽成可复用模板,换主题复刻
会员
十八 筑基出关 · 开宗立派大典 端到端验收,公网可访问,出师大典
会员 ★ 渡劫
为什么这门课用收款码,而不是 Stripe / 商户号?
你做出的是一个完整商业闭环运转的产品——注册 → 解锁 → 支付验证 → 权限激活全部真实运转。支付环节用收款码而非商业接口,是准入公平的设计选择:任何人无需营业执照、无需企业资质,就能跑通完整的商业闭环。你正在学的这个筑基课网站,就是这个闭环的同款实现。
其三 · 诚实成本

把要花的钱,提前讲清楚

不做开局劝退,但也不藏。下面是你跑通这门课,可能真要花的每一笔。

课程买断
¥199
首发筑基期价 · 正式价 ¥299 · 一次买断,终身可学
第三方服务
约 ¥0
Supabase / Cloudflare / GitHub / 域名免费额度足够,且不进我们口袋
AI 算力(悲观估计)
¥30–80
走中转,可人民币付、可设上限、可小额起步
能否 0 元学完
内容 ¥0
课程内容 0 元全给;完整跑通一遍大概率需 ¥30–80 算力
买断 vs 真实成本
≈ 2.5–6.6×
¥199 与 ¥30–80 之间仍是数倍量级——成本透明,不藏
其四 · 安全网

护栏与结账

14 天无理由退款
学了不满意,14 天内原路退回,不问理由。退款后会员状态翻回未渡、激活码作废、会员内容重新上锁。
防超支护栏
AI 算力走中转,可设消费上限、可人民币小额起步。课程专门有一节教你给账号上封顶,绝不让你不知不觉烧钱。
AI 全程答疑
卡住了不孤单:配套咒语库(可复制的 Prompt)+ 渡劫急救箱(现象化排错 + 报错三句话模板),把问题喂给法器就能继续。
📌
说清楚学法:这门课是自学 + AI 答疑——无直播、无真人陪跑、无 1 对 1、无付费社群。你的「老师」是 18 课讲义 + 咒语库 + 急救箱 + 你手里的法器,随时可学、不必等开课。
你已是筑基会员
全部课程已解锁,继续你的修行。
¥199首发筑基期价 · 正式价 ¥299 · 一次买断
全部 18 课 · 终身可学 · 课程更新免费
AI 全程答疑:配套咒语库 + 渡劫急救箱
14 天无理由退款,学了不满意原路退回
一次买断,此外不再收任何钱(无月费/无内购/无加锁)
学完能复刻你正在用的这套会员站
收款码
付款后,在「激活码解锁」页输入收到的码即可开通会员。
本站收款仅用于课程买断。上线前请将此图替换为你的真实收款码。
没有限时倒计时、没有虚高划线原价、没有"错过再等半年"。名额真实(仅收 30 名),价格透明。
我的洞府
你的会员状态、修行进度,都在这里。
登录后查看你的洞府
个人中心只显示你自己的资料与进度。先登录,或注册一个新账号。
键修小白
xiaobai@example.com
散修 · 尚未渡口
你还不是会员,会员内容暂未解锁。解锁后,全部 18 课与会员咒语都会向你打开。
免费试读进度
2 / 2 试读课
试读已看完,解锁继续
你正在用的"我的洞府",就是第 13–14 课你要造的个人中心
你的会员状态 is_member = true ← 整套付费墙的总开关,存在 profiles 表里,由你第 13 课输入的激活码翻成 true。
修行进度 · 十八课境界地图
已出关 6 / 18
立地基
法器换代 · 旧站新渡
命令行不咬人 · 装环境
cc-switch 配法器
立档存真 · 交给 GitHub
开户立籍 · 接通 Supabase
身份初成 · 注册登录真生效
通经脉
立库藏珍 · 造第一张表
落子成形 · 新增与读取
改易由心 · 编辑与删除
各守洞府 · 行级安全 RLS
凝金锋
十一 定品分阶 · 免费会员两重天
十二 设墙立禁 · 付费墙拦住凡客
十三 灵石入袋 · 最小支付跑通
十四 雷动真渡 · 全栈站上真线
受香火
十五 引客入门 · 真人使用变现
十六 固元体检 · 安全成本双复盘
十七 一键复刻 · 付费墙变模板
十八 筑基出关 · 开宗立派大典
14 天无理由退款 ›
十八课 · 四阶飞升
十八课,四阶飞升。顺序解锁、允许回看、不允许跳过。
立地基 里程碑 · 第 6 课 能登录注册的真站
第 一 课 法器换代 · 旧站新渡
换上 CLI 法器,把练气期的旧静态站接管过来
试读
第 二 课 命令行不咬人 · 装环境
装好开发环境,认识命令行,跑起第一条命令
试读
第 三 课 cc-switch 配法器
用 cc-switch 配置模型与中转,算力可控不外流
会员
第 四 课 立档存真 · 交给 GitHub
把项目交给 GitHub 看管,学会存档与回档
会员
第 五 课 开户立籍 · 接通 Supabase
注册 Supabase,创建后端项目,拿到连接钥匙
会员
第 六 课 身份初成 · 注册登录真生效
邮箱+密码注册登录真生效,注册即自动建档
会员 ★ 渡劫
通经脉 里程碑 · 第 10 课 游客看不到会员内容
第 七 课 立库藏珍 · 造第一张表
为你的产品设计并创建第一张数据表
会员
第 八 课 落子成形 · 新增与读取
新增与读取数据(C/R),页面读写云端
会员
第 九 课 改易由心 · 编辑与删除
编辑与删除数据(U/D),跑通完整 CRUD
会员
第 十 课 各守洞府 · 行级安全 RLS
行级安全 RLS:游客与他人看不到你的会员内容
会员 ★ 渡劫
凝金锋 里程碑 · 第 13 课 能拦人付钱解锁
第 十一 课 定品分阶 · 免费会员两重天
规划免费 / 会员两级内容与付费边界
会员
第 十二 课 设墙立禁 · 付费墙拦住凡客
亲手造付费墙,拦住非会员看会员正文
会员
第 十三 课 灵石入袋 · 最小支付跑通
最小支付闭环:收款码 + 激活码解锁会员
会员 ★ 渡劫
第 十四 课 雷动真渡 · 全栈站上真线
全栈站部署上线,拿到真实公网链接
会员
受香火 里程碑 · 第 15 课 真域名 + 陌生人注册
第 十五 课 引客入门 · 真人使用变现
真人注册使用,验证变现,陌生人也能用
会员 里程碑
第 十六 课 固元体检 · 安全成本双复盘
安全与成本双复盘,给 AI 算力账号上封顶
会员
第 十七 课 一键复刻 · 付费墙变模板
把付费墙抽成可复用模板,换主题复刻
会员
第 十八 课 筑基出关 · 开宗立派大典
端到端验收,公网可访问,出师大典
会员 ★ 渡劫
免费试读已开放前两课
其余课程为会员专属。解锁后顺序学习全部 18 课。
← 返回课程总览
第 1 课

法器换代 · 旧站新渡

试读 · 免费开放

# 第 1 课 · 内门初窥 · 法器换代 + 旧站新渡

课头

🪷 境界:筑基初期 · 立地基一层
预计用时:75 分钟
🏆 本课产出:把你练气期做的那个站,搬上一个能长出后端的新渡口,拿到一个真·在线链接(手机能打开)
🚫 今天不做:不装命令行、不请法器、不写一行代码

🧭 你的位置:你现在进入四层能力轴第一层「连接」,本阶练的是把法器和后端接通;驭器手法见 御剑心法
📜 外门试炼已过,你站在内门石阶前。手中练气期的本命法器光芒已弱,门内传来低语:真正的造物,需一件能号令万物的新法器。今日先不取器——先把你练气期那座小楼,搬到一块能通灵脉的新地基上。
📷 修炼笔记卷轴位(待补):内门石阶 · 旧法器微光 · 门内云阶层层上升。

这一课,你在干一件什么事

你免费课做出来的那个站,现在住在 GitHub Pages 上。它很好,但它只能放「死页面」——能看,不能登录、不能存数据、不能收钱。

筑基课要把它升级成一座会呼吸的真站:能注册、能存内容、能收费。但那需要一块能跑「后端」的新地基——GitHub Pages 撑不住。

所以今天第一件事,不是学新东西,而是搬家:把你现成的站,搬到一个能长出后端的新渡口(Cloudflare Pages 或 Vercel)。全程用网页点鼠标,一行命令都不用敲。搬完,你立刻就有一个新的在线链接——今天就能发朋友圈

💡 为什么不继续用 GitHub Pages? 一句话:GitHub Pages 只能托管不会动的静态页;你接下来要给站加的登录、数据库、收款,都需要服务器跑代码,GitHub Pages 做不到。新渡口(Cloudflare/Vercel)能。代码还在你手上,只是换了个能干活的地基。

主线步骤(跟着做,每步都有「看到什么算成功」)

第一步 · 给你的渡口定个主题

你要做的站,本质是一个「注册才能进、付费才能解锁」的会员站。先想清楚:你这座站卖什么?

用三把尺子挑一个主题:

  • 你有没有——你手上是否已有现成内容,能整理出至少 20 条?(能直接整理出来的才选)
  • 有没有人要——这东西有没有人愿意为「解锁」掏一点点钱?优先选你认识、或你自己就是目标用户的人群。
  • 会不会越界——内容你有权出售、不踩版权/合规。

参考菜单(任选其一,以后能换):面试题库 · AI 咒语库 · 素材下载站 · 居家健身计划 · 宝妈辅食食谱 · 考证刷题卡 · AI 小工具 · 短视频选题灵感库。

看到什么算成功:你能用一句话说清——「我要做一个让 [谁],注册后能 [看什么]、付费后能解锁 [什么] 的站。」把这句话写进备忘录。
💡 拿不定主意?默认选 「AI 咒语库」(收藏好用的提示词)——内容你现成就有(就是这门课的咒语卡),最容易填满,最不容易卡。先用它跑通,以后想换再换,代码骨架完全一样。
💡 我免费课做的是贪吃蛇 / 倒计时这类小玩意儿,不像「内容站」怎么办? 完全没关系。你免费课那个作品今天只当热身——第四步照样把它部署上去、照样拿到在线链接。你的会员渡口是从你这一步选的主题新长出来的,旧作品只是起点,会被逐步替换掉,不用硬把游戏塞进付费墙。(真想保留游戏味也行:选「AI 小工具站」,做成「免费玩 N 次、会员不限次」的小工具会员站——但第一次做付费站,内容类最省心。)

第二步 · 找到你练气期那个站的文件夹

打开你电脑,找到免费课最后做的那个站的文件夹——就是里面有 index.html 的那个文件夹。

看到什么算成功:你在电脑上找到了那个文件夹,双击里面的 index.html 能在浏览器里打开你的站。

第三步 · 注册一个新渡口

打开浏览器,进 Cloudflare Pages(本课主线,推荐):访问 pages.cloudflare.com,点注册/登录。你可以直接用 GitHub 账号一键登录(免费课你已经有 GitHub 账号了)。

看到什么算成功:你进入了 Cloudflare Pages 的控制台首页,看到一个「创建项目 / Create a project」之类的按钮。

📷 截图位:新渡口控制台首页。
🌿 新渡口已现。这是你筑基期产物的新地基——别看现在空空如也,二十课后,它上面会跑着你自己的会员站。

第四步 · 把站搬上新渡口(网页操作,零命令行)

在 Cloudflare Pages 里选「上传资源 / Direct Upload」方式(不连仓库的那种,最省事):把第二步那个文件夹整个拖进上传框,给项目起个名字,点部署。

等进度条跑完(出现一堆滚动文字、几十秒到一两分钟,是正常的)。

看到什么算成功:部署完成,页面给你一个形如 https://你的项目名.pages.dev在线链接

📷 截图位:部署成功 · 拿到在线链接。
💡 git 连仓自动部署(更专业的方式)我们留到第 14 课正式上线时再用——今天先用最省事的拖拽,先拿到链接、先有成就感。

第五步 · 手机打开你的新链接

掏出手机,在手机浏览器里打开那个 .pages.dev 链接。

看到什么算成功:手机里出现了你练气期做的那个站,和原来一模一样——但它现在住在一块能长出后端的新地基上了。

📷 截图位:手机打开你的新链接(这是本课的微里程碑)。
🎉 第一张可发朋友圈的截图:「我练气期做的站,现在有了自己的新网址。」——你才上第一课,就已经把作品搬进了真站的地基。

第六步 · 灵石速览(一页看清这门课大概花多少)

最后花两分钟,把这门课的钱看个大概——省得你边学边怕被割。详细的台账在第 3 课会带你一笔笔算,买课前的「诚实成本告知书」也写清了,这里只给你一个总览:

花在哪
大概多少
说明
新渡口(Cloudflare/Vercel)
¥0
免费额度够整门课用,还送免费网址
数据库/登录(Supabase,第 5 课接)
¥0
免费层够用
GitHub(代码仓库)
¥0
免费
AI 算力(请法器干活,第 2–3 课配)
悲观 ¥30–80
唯一真要花的钱;可人民币付、可设封顶、可先充小额
真域名(想要个 .com,可选)
¥0–60/年
纯锦上添花,不买不影响出师
看到什么算成功:你看完这张表,心里有数——整门课唯一真要花的,是 ¥30–80 的 AI 算力,其余大概率 0 元,而且第 3 课会教你把它压到最低、设好封顶不超支。 你不慌了。

📷 截图位:灵石速览一页。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器的提示词。今天你还没请到法器(下一课才装),先把这条收好,第 2 课请到法器后,第一句就对它说这个。

【认主咒】· 让法器认识你要做的站

我在学一门 AI 编程课,要做一个「注册才能进、付费才能解锁」的会员制网站。 我的主题是【在此填你第一步定的主题,例如:大学生宿舍辅食食谱】。 请用 3 句大白话告诉我: 1. 这个网站最核心的 3 个功能是什么; 2. 为什么它适合做成「免费试读 + 付费解锁全部」的会员站; 3. 接下来你会怎么一步步帮我把它做出来。 先别写代码,只讲人话。
填空说明:把 【...】 里换成你自己的主题,其余一字不改。

🆘 卡住了?(按你看到的现象找)

现象:拖上去部署完,打开是一片空白 / 显示 404

先检查:是不是把最外层那个文件夹整个传上去了,导致 index.html 不在根目录。
急救话术(照做):回到上传页,只把含有 index.html 的那一层文件夹内容重新传一遍——确保 index.html 就在最外面,不要多包一层。

现象:不知道该传哪个文件夹

先检查:免费课你最后双击打开站、能看到网页的那个 index.html,它在哪个文件夹里?
急救话术:就传那个文件夹。如果里面还有图片、css 等文件,连它们一起传(整个文件夹拖进去)。

现象:注册新渡口时卡在验证 / 页面打不开

先检查:是不是网络问题——这不是你的错
急救话术:换个网络(比如手机热点)重试;或等几分钟再刷新。Cloudflare 偶尔在国内加载慢,多试一次通常就好。
💬 万能急救 · 报错三句话(任何卡点都能用,记下它):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好,发给会答疑的地方或下一课请到的法器,比你瞎描述管用十倍。

✅ 出关自查(全部勾上才算过这一关)

我有一个新的在线链接(.pages.dev.vercel.app),手机能打开看到我的站
我定好了我的会员渡口主题,能用一句话说清「卖给谁、解锁什么」
我知道整门课大概花多少(唯一真花的是 ¥30–80 算力),心里不慌

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上多了个在线链接——你还拿到了一件能反复用的东西:一张定下你这座站「魂」的立项卡。以后做第二个站、帮朋友、接私单,照着它重填一遍,几分钟就能立项。

  • 渡口立项卡 — 一句话定义你这座站「让 [谁] 注册后能看 [什么] 、付费解锁 [什么] 」,再用三把尺子(你有没有 / 有没有人要 / 会不会越界)量一量主题选得对不对。文件:../takeaways/01-lixiang-ka.md怎么用:把里面的 【方括号】 换成你自己的,填空即用;三把尺子全勾上才算选对;不会填就把整张卡发给法器,让它给你两个例子选。
💡 可分享:「我的会员站立项了:让【谁】注册后能看【什么】、付费解锁【什么】。第一课就把站搬上了真站地基,正式开干。」——只讲方向、不含任何钥匙,放心晒。

🌱 加练(选做)+ 下一课

加练:把你的新链接发给一个朋友,让他手机打开看看。第一次有人在「你自己的网址」上看到你的作品,感觉不一样。

下一课预告:站搬好了,但它现在还是个不会呼吸的凡胎——能看,不能动。

下一课,请新法器入炉。你会装上筑基期的本命法器(Codex),亲眼看它读懂你的项目、自己改文件、自己跑起来。

别怕那个黑窗——命令行不咬人,它只是等你开口。

🔖 小提示:从下一课起,每过一道大关,我们都会让法器顺手「存个档」。改坏了不怕,一句话就能回到上一个境界。
读完了?勾完出关自查,进入下一课。
← 返回课程总览
第 2 课

命令行不咬人 · 装环境

试读 · 免费开放

# 第 2 课 · 请器入炉 · 命令行不咬人

课头

🪷 境界:筑基初期 · 立地基二层
预计用时:120 分钟(这是全课最高的一道崖,慢慢来,不赶时间)
🏆 本课产出:在你电脑上请来筑基期的本命法器 Codex,亲眼看它开口回你一句话,再让它在你桌面上自动建出一个文件——你第一次指挥 AI 直接动你的电脑
🚫 今天不做:不接数据库、不改你的真站、不登录付费供应商(登录卡点全部留到第 3 课专治);今天只要看到版本号 + 法器回话 + 桌面建文件,就算出关
📜 内门石阶之上,有一座炉。炉前立着无数修士——人人手心冒汗,因为传说入炉时炉口会喷出赤红的火舌,吓退过九成来人。可老修士说:那不是拒客,是认主。今日你来请器入炉,屏幕红过,不是你失手,是这道崖本来就这样。红了,照着过劫路径走,半个时辰内,炉火转青,法器认你为主。
📷 修炼笔记卷轴位(待补):丹炉炉口火舌赤红 → 修士不退、伸手按炉 → 火转青、炉中浮出一柄新器。

这一课,你在干一件什么事

上一课你把站搬上了新渡口,但那站还是个不会动的凡胎——能看,不能改、不能长后端。

要给它加登录、加数据库、加收款,你需要一个能直接读你的项目、改你的文件、替你跑代码的助手。这个助手就是 Codex CLI(命令行版的 Codex)——本课要请的本命法器

请它,要做三件事,就这三件,做完就过关

  • 打开终端(那个黑底白字的窗口,下文都叫它「黑窗」)——这是你跟法器说话的地方。
  • 装两样东西:先装 Node(一个底座,法器要踩着它跑),再装 Codex CLI(法器本体)。
  • 点火认主:让法器开口回你一句话,再让它在你桌面上建出一个文件——亲眼确认它真能动你的电脑。
💡 为什么要用「黑窗」,不能像免费课那样点鼠标? 因为接下来法器要干的活(改文件、连数据库、部署),鼠标点不出来,必须通过这个黑窗下指令。但你不用背命令——本课每一句要敲的,我都帮你写好了,你复制粘贴就行。黑窗不咬人,它只是在等你开口。
⚠️ 先把丑话说在前头:这一课,你的屏幕大概率会飘红(出现红色的报错文字)。这是正常的,不是你笨、不是你装坏了。每一个会用 Codex 的高手,都在这道崖前红过屏。本课的 🆘 急救箱专门为这一课配了安装专用急救路径——红屏了别慌,照着第 5 区块走,90% 的人 20 分钟内通关

主线步骤(跟着做,每步都有「看到什么算成功」)

📌 全程提示:下文凡是放在灰色代码框里的内容,都是复制粘贴进黑窗的——选中、Ctrl+C 复制,到黑窗里点右键(黑窗里 Ctrl+V 经常不灵,点右键粘贴最稳)粘贴,再按回车。一次只贴一行,按一次回车,等它跑完再贴下一行。

第一步 · 打开你的第一个黑窗(终端)

Windows 自带这个黑窗,叫 PowerShell,不用另外装。打开它:

  • 按一下键盘左下角的 Win 键(有窗户图标那颗),或点屏幕左下角的开始菜单。
  • 直接用键盘打字:powershell(拼音输入法记得先切回英文)。
  • 看到搜索结果里出现 Windows PowerShell,点它打开。

打开后,你会看到一个深蓝色或黑色的窗口,里面有一行字,结尾是一个闪烁的光标,等着你输入。

看到什么算成功:屏幕上出现了一个深色窗口,最后一行类似 PS C:\Users\你的用户名>,光标在后面闪。这就是黑窗,你已经站在跟法器对话的门口了。

📷 截图位:打开终端 · 第一个黑窗。
🌿 炉门已开。还没火,但你已经站到了炉前——大多数人,连炉门都不敢推。

第二步 · 装「底座」Node(法器要踩着它跑)

法器 Codex 不能凭空运行,它要踩在一个叫 Node 的底座上。我们用 Windows 自带的安装器一句话装好——复制下面这行,右键粘进黑窗,回车

winget install OpenJS.NodeJS.LTS

回车后会跑出一堆滚动文字、可能停顿几十秒到几分钟(在下载安装,正常)。中途如果黑窗问你「是否同意协议 [Y/N]」之类,打一个字母 y 再回车即可。

看到什么算成功:滚动文字停下,最后出现类似 Successfully installed(成功安装)的字样,光标重新开始闪、等你输入。

💡 如果这行报红、或提示找不到 winget先别重装,直接跳到第 5 区块 🆘 的对应现象,那里有备用装法。
📌 关键一步 · 装完一定要重开黑窗:装好底座后,把当前这个黑窗关掉,重新按第一步打开一个新的。原因下一步解释(这是新手最容易卡的坑,照做就好)。

第三步 · 验货:让 Node 报出它的版本号

重新打开的新黑窗里,复制下面这行,右键粘贴,回车:

node -v
看到什么算成功:黑窗回你一行类似 v22.11.0 的版本号(数字可能不同,只要是 v 开头的一串数字就对了)。这一行版本号,就是你今天的第一块硬里程碑——底座装上了。

📷 截图位:node -v 显示出版本号。
🛑 如果这里报红(比如 node 不是内部或外部命令):这是本课最常见的一道红屏,几乎人人都撞。不是你装坏了,八成是「装完没重开黑窗」。别重装、别慌,直接去第 5 区块 🆘「现象:黑窗说 node 不是内部或外部命令」,照急救话术做一遍,基本都能过。

第四步 · 请法器本体:装 Codex CLI

底座有了,现在请法器本体。复制下面这行,右键粘进黑窗,回车:

npm install -g @openai/codex

又会跑出一堆滚动文字(在下载,正常),可能要等一两分钟。中途出现黄色的警告文字(warning)不用管——黄字是提醒、不是报错,只有红字才需要处理。

跑完后,和第二步一样,关掉黑窗、重新打开一个新的(让系统认得新装的法器)。

看到什么算成功:滚动文字停下、不再继续刷新,回到光标闪烁等输入的状态。出现黄字警告是正常的,只要最后没有一整片红字、能回到光标闪烁,就算装完。

💡 如果飘出一整片红字、或提示 npm 不是内部或外部命令,跳第 5 区块 🆘 对应现象。

第五步 · 验货:让 Codex 报出它的版本号

新打开的黑窗里,复制下面这行,右键粘贴,回车:

codex --version
看到什么算成功:黑窗回你一行 Codex 的版本号(类似 codex-cli 0.x.x 的一串数字)。法器本体已经入炉——这是你今天的第二块硬里程碑。到这一步,你今天的「保底过关线」就已经踩到了。

📷 截图位:Codex 装好 · codex --version 显示版本号。
🎉 可以喘口气了:到这里,最难的「装」已经过去了。后面两步是「点火」——让法器开口、让它动手,是今天最有成就感的部分。

第六步 · 点火认主:让法器开口回你一句话

现在让法器醒过来。在黑窗里复制这行,右键粘贴,回车:

codex

第一次启动,它可能会问你几个设置问题(比如选一个主题配色、问你信不信任当前文件夹),看不懂就一路按回车选默认即可。启动成功后,黑窗会变个样子——底部出现一个可以打字的输入框,等你跟法器说话。

在这个输入框里,用中文打字(这次是你自己打,不是粘贴命令),打这一句,回车:

你好,请用一句中文确认你已经在我的电脑上准备好了。
看到什么算成功:法器用人话回了你一句中文(比如「你好,我已经在你的电脑上准备好了,随时可以帮你干活」)。法器开口了——这是本课第一个微里程碑。 你刚刚第一次指挥了一个住在你电脑里的 AI。

📷 截图位:点火成功 · 法器在黑窗里回了你一句话(微里程碑)。

💡 看得懂透明层:法器回你话,说明三件事都通了——底座 Node 正常、Codex 本体正常、它能跟你来回对话。这一句「准备好了」,就是炉火转青的信号。
🛑 如果这一步卡住了(比如它转圈不回话、或提示要登录 / 要 API Key / 报连接错误):今天不解决它,这是预期内的。 Codex 要真正干活,需要连一个「供应商」(说白了就是给它充值算力的地方),而大陆这边怎么用人民币把这条路打通,是第 3 课 cc-switch 专门要教的。今天你只要看到法器愿意启动、能进到那个输入框,就已经达标。具体卡法对应第 5 区块 🆘「现象:法器要登录 / 要 Key / 不回话」。

第七步 · 让法器动手:在你桌面上建一个文件

法器会说话还不够,得看它真能动你的电脑。还在刚才那个 Codex 输入框里,用中文打下面这句(把咒语卡里的话复制进去也行),回车:

请在我的桌面上新建一个名为「法器报到.txt」的文本文件,里面写一句话:法器已入炉,听候差遣。

法器会想一下,然后可能会问你「是否允许它创建/修改文件」——这是它在守规矩、动手前先问你一声。看到这种询问,回复「允许」或按它提示的同意键(通常是回车或打 y),放它干活。

看到什么算成功:法器回你说「已经建好了」之类的话;你回到电脑桌面,亲眼看到多出来一个叫「法器报到.txt」的文件,双击打开,里面正是那句话。法器第一次替你动了手——这是本课第二个微里程碑,也是今天的收官。

📷 截图位:桌面上多出一个法器建的文件(微里程碑)。

💡 看得懂透明层:法器动手前先问你「能不能建文件」,是它的安全习惯——它不会偷偷改你电脑,每次动真格之前都会先问一句。以后它要改你的真站、建数据库表,也是这个规矩:先问、你点头、它才做。你全程是那个拍板的人。
🌿 炉火转青,新器认主。你桌面那个小小的 txt,是法器对你说的第一句「在」——从今天起,你说一句人话,它替你动一次手。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器的提示词。本课请到法器后,前两句就对它说这个。

【点火咒】· 确认法器醒了(第六步用)

你好,请用一句中文确认你已经在我的电脑上准备好了。
填空说明:这条一字不改,直接发。它只是用来确认法器能开口。

【动手咒】· 让法器在桌面建文件(第七步用)

请在我的桌面上新建一个名为「[文件名,默认填:法器报到.txt]」的文本文件,里面写一句话:[随便写一句,默认填:法器已入炉,听候差遣]。 建好以后,用一句中文告诉我你做了什么、文件建在了哪里。
填空说明:[方括号] 里可以换成你想要的文件名和内容,不换就用默认值。最后一句让法器用人话回报它干了啥,这是你看得懂它的透明层,建议保留。

🆘 卡住了?(按你看到的现象找)

📌 本课是全课最高的崖,急救箱也最厚。红屏不是你的错——下面四条覆盖了 90% 的卡点,对号入座。

现象:黑窗飘出一整片红字,看不懂,慌了

先检查:别急着关、别急着重装。 红字不等于失败,先看红字里有没有 Successfully(成功)、already installed(已装过)这类词——有的话其实是成功了。
急救话术(照做):把整段红字截图或复制下来,对照本区块下面三条找你的现象;都对不上,就用文末的「报错三句话」,把「我刚做了什么 / 现在看到什么 / 希望变成什么」填好,连同红字发给会答疑的地方或法器自己。先描述、先求救,不要乱删乱重装。

现象:黑窗说 node 不是内部或外部命令(或 codex / npm 不是内部或外部命令)

先检查:你是不是装完之后没有重开黑窗?新装的东西,必须关掉旧黑窗、重新打开一个新的,系统才认得它(这叫「PATH 没刷新」,重开黑窗就是刷新)。
急救话术:① 把当前黑窗整个关掉;② 按第一步重新打开一个新黑窗;③ 重新敲那行 node -v(或 codex --version)。九成情况下,重开一次就好了。④ 如果重开三次还不行,重启一次电脑再试——重启是最彻底的刷新。

现象:装到一半卡住不动了 / winget 用不了 / 下载特别慢

先检查:是不是网络慢导致下载卡住(这不是你的错,是网络问题);或者你的 Windows 太老,没有 winget 这个安装器。
急救话术:① 网络慢/卡住:按 Ctrl+C 中断,换个网络(比如手机热点)重试那一行;多试一两次通常能过。② winget 用不了:改用官网装 Node——浏览器打开 nodejs.org,下载页面正中那个绿色「LTS」按钮对应的安装包,双击,一路点「下一步 / Next」装完,再重开黑窗node -v 验货。③ 装好 Node 后,第四步那行 npm install -g @openai/codex 照常跑。

现象:法器要登录 / 要 API Key / 转圈不回话 / 报连接错误(第六、七步卡住)

先检查:你装是装好了(codex --version 能出版本号),只是法器还没「充上算力」——它要连一个供应商才能真干活。
急救话术:今天到这里就够了,不用解决它,这是预期内的安排。 Codex 怎么用人民币在大陆打通这条路,是下一课(第 3 课 cc-switch)专门教的。今天你的过关线是:node -v 有版本号 + codex --version 有版本号。这两个版本号你都拿到了,今天就算出关,登录卡点带着它进第 3 课,那一课会手把手带你点亮法器。(如果你连「点火咒」那一步法器愿意启动、进到输入框都没做到,也没关系,第 3 课会重新带一遍。)
💬 万能急救 · 报错三句话(任何卡点都能用,记下它):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好,发给会答疑的地方或法器自己,比你瞎描述管用十倍。例:「我刚在黑窗里敲了 node -v / 现在它回我 node 不是内部或外部命令 / 我希望它回我一个版本号。」

✅ 出关自查(全部勾上才算过这一关)

我能自己打开那个黑窗(PowerShell),看到光标在闪、等我输入
我敲 node -v,黑窗回了我一个 v 开头的版本号(底座装好了)
我敲 codex --version,黑窗回了我一个 Codex 版本号(法器本体装好了)——到这两条,今天的保底过关线已踩到
(加分项)我点火后法器用中文回了我一句话,并且在我桌面上建出了一个文件
我知道:如果法器卡在「要登录 / 要 Key」,那是预期的,第 3 课专治,不影响今天出关

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是「黑窗里装好了法器」——你还攒下了一件以后换电脑、帮朋友、隔半年再起新站都能直接翻出来照着点的东西。

  • 装环境清单 + 命令速查卡 — 一张「照着装不漏件」的勾选清单,加一张「忘了命令就来抄」的速查卡(node -v、装 Codex、点火唤醒、重开黑窗、报错三句话全在上面)。文件:../takeaways/02-装环境清单.md。怎么用:照单点——上半页一项一项勾,下半页要敲的命令整行复制、右键粘进黑窗回车;卡住了就翻到最后「救急」那段照着做。最底下留了几个 【方括号】,把你验出来的版本号填进去,就成了你自己的「装机留底」。
💡 可分享:发圈/发群可以说——「今天我把 AI 法器装进了自己的电脑,还顺手攒了一张装环境速查卡,下次换电脑照着点一遍就行。」(这页清单不含任何钥匙,分享出去只显专业、不漏秘密。)

🌱 加练(选做)+ 下一课

加练:让法器再帮你建一个文件试试手感——在 Codex 输入框里用中文说「请在桌面建一个叫『今日笔记.txt』的文件,写上今天的日期」,看它问没问你「是否允许」、看它建得对不对。多来一两次,你会发现「跟法器说人话、它替你动手」这件事,比你想的简单。

下一课预告:法器请回来了,能说话、能动手——但它现在还没充上算力(你刚才如果卡在「要登录」,就是这个原因)。

下一课,用 cc-switch 给法器接上大陆能用人民币付的算力中转,把今天卡住的登录一次打通。我们还会带你做一张灵石台账,把这门课唯一真要花的那笔钱(悲观 ¥30–80)算到明明白白,并教你设好封顶、不超支——配好之后,第一次让法器改你那个真站

🔖 小提示:cc-switch 只是帮 Codex 选「连哪个供应商充算力」的一个图形小工具(系统托盘里点一下就切),它不改你学的命令、不绑死你——你用的始终是真·Codex,毕业后换个配置照样能用。它正好是从免费课「点鼠标」到「黑窗法器」之间的一座缓坡。
读完了?勾完出关自查,进入下一课。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 3 课

cc-switch 配法器

会员专属

# 第 3 课 · 灵石不外流 · cc-switch 配法器 + 法器改你的真站

课头

🪷 境界:筑基初期 · 立地基三层
预计用时:90 分钟
🏆 本课产出:给法器(Codex)配上一个能用人民币付费的供应商,设好用量封顶 / 只充小额,然后第一次让法器去改你第 1 课那个真站,亲眼看它改完、亲眼看站变了样
🚫 今天不做:不接数据库、不写登录、不碰收款;不让法器大改、不让它一次改一堆
📜 上一课你请来了法器,它会应声、会在你桌上凭空生出一张符纸。可它还认着海外的旧主,灵石(算力)也走着不通的旧渡口。今日要做两件事:一是把它的灵脉接到你够得着、付得起的渡口——人民币可付、上限可封、灵石不外流;二是第一次开口,命它去动你那座真站,让你看清——这法器,从今天起真的听你的。
📷 修炼笔记卷轴位(待补):托盘小印浮现 · 灵石渡口换轨 · 法器伸手轻拂楼台一角。

这一课,你在干一件什么事

上一课你装好了法器(Codex),也让它在桌面生成过一个文件,证明它活着、听你的。但有两件事还没解决:

  • 付费:法器干活要烧「AI 算力」,这算力要花钱买。海外原厂要海外信用卡、可能还要翻墙——对大陆小白门槛太高。今天我们绕开它:给法器配一个大陆能直接用人民币付的「中转供应商」,微信/支付宝就能充。
  • 不超支 + 不泄露:很多人怕「会不会一不小心烧掉几百块」「我的钥匙会不会被偷走乱刷」。今天我们就把这两个怕字一次性焊死:设好用量封顶、只充小额,并搞清楚你的钥匙只存在你这台电脑上、能随时作废重置

干这两件事用的工具叫 cc-switch——一个开源的桌面小工具(系统托盘里一个图标,右键就能切)。

💡 先把一个最大的误会讲清楚:cc-switch 不是给你套一层「假命令」的东西,它不创造任何新命令。你用的、敲的,始终是真·Codex 本人。cc-switch 干的唯一一件事,就是帮你告诉 Codex「去连哪个供应商」——好比给你的法器换个充值渠道,法器还是那个法器,命令还是那些命令。所以你不会被它绑死:哪天你想换回原厂、或换别家,改一下配置就走,没有任何锁定。

配好之后,今天还有一个爽点:第一次真正命令法器去改你第 1 课那个真站——它会读你的项目、自己改文件、改完用人话告诉你「我动了哪个文件、你怎么验证」。你刷新浏览器,就能看到站变了样。

主线步骤(跟着做,每步都有「看到什么算成功」)

💡 先说一句保底:cc-switch 是第三方工具,版本/界面可能和截图略有出入。哪一步对不上、或装不上,别在这儿耗——跳到本课最下面的 🆘 急救区,按你看到的现象找,那里有保底路径(实在不行先用法器的原厂登录方式过渡,配中转的事随时能回来补)。

第一步 · 灵石台账(先把这门课到底花多少钱,一笔笔算清)

第 1 课「灵石速览」给过你一个总览。今天你正要掏钱配供应商了,所以把账一笔笔摊开——省得你边充边慌。

花在哪
大概多少
进谁的口袋
备注
新渡口(Cloudflare/Vercel)
¥0
不进我们口袋
免费额度够整门课
数据库/登录(Supabase,第 5 课接)
¥0
不进我们口袋
免费层够用
GitHub(代码仓库)
¥0
不进我们口袋
免费
AI 算力(法器干活,就是今天要充的)
悲观 ¥30–80
进中转供应商,不进我们口袋
整门课唯一真要花的钱;人民币付、可封顶、先充小额
真域名(想要个 .com,可选)
¥0–60/年
域名商
锦上添花,不买不影响出师
课程本身
¥199(占位)
进我们口袋
一次买断、终身学、14 天可退
看到什么算成功:你看完这张表,能对自己说出这句话——「整门课唯一真要花的算力钱是 ¥30–80,而且今天我会先充个小额(比如 ¥30 起)、再设个封顶,烧不超。」心里有底,不慌。

📷 截图位:灵石台账一页(可截图存档,以后对账用)。
💡 为什么是「悲观 ¥30–80」而不是一个准数? 因为「法器干了多少活」因人而异——你重做几遍、改几次主题,用量就多一点。我们给的是偏贵的估计;多数人学完实际更少。今天设了封顶,最坏也烧不过你定的那条线。

第二步 · 门槛体检(确认你不用海外账号也能走通)

正式动手前,花一分钟自检——确认你绕开了所有海外门槛:

不需要海外信用卡(中转供应商支持微信/支付宝)
不需要翻墙(中转供应商是大陆可直连的)
不需要海外手机号(注册中转供应商用邮箱/国内手机即可)
我上一课已经装好了 Codex(本课是给它换「充值渠道」,不是重装)
看到什么算成功:四条全打勾。如果有一条打不上(比如上一课 Codex 没装完),先回第 2 课补完再来——本课假设法器已经会应声了。

第三步 · 装上 cc-switch(图形界面,托盘里一个图标)

cc-switch 是个普通的桌面软件,像装微信一样装。

让法器帮你确认下载地址(防止下到假货):打开 Codex,把下面 📜 咒语卡里的【取渡口咒】整段发给它,让它告诉你 cc-switch 的官方 GitHub 下载页,并提醒你认准官方仓库(避免装到山寨)。

拿到官方下载页后:

  • 下载 Windows 版安装包(通常是 .exe.msi)。
  • 双击安装(如果 Windows 弹「未知发布者」蓝色提示,点「更多信息 → 仍要运行」——这是开源软件常见的正常提示)。
  • 装完打开,它会缩进系统托盘(屏幕右下角时间附近那排小图标,可能要点那个小箭头 ^ 才看得到)。
看到什么算成功:屏幕右下角托盘里出现了 cc-switch 的图标,右键点它能弹出一个菜单(里面有切换/设置之类的选项)。

📷 截图位:cc-switch 托盘图标已出现。
🌿 托盘小印已浮现。从此你的法器要走哪条灵脉、由你右手一点说了算——不必再求海外旧主。

第四步 · 注册一个「大陆可人民币付费」的中转供应商,拿到一把钥匙

中转供应商 = 一个大陆能直连、能用微信/支付宝充值的服务,它替你把请求转给 AI 原厂。你充钱给它,它给你一把「钥匙」(API Key,一长串字符)。

💡 这把钥匙是什么? 就像你充进游戏的点卡密码——法器拿着它去供应商那儿换算力。它值钱,所以要保密(第六步专门讲怎么不泄露)。

操作:

  • 按本课配套资料给的中转供应商入口注册(邮箱即可)。
  • 微信或支付宝先充一笔小额(建议 ¥30 起,够整门课开个头;不够随时再充)。
  • 在它后台找到「API Key / 密钥」页面,新建一把钥匙,复制下来。
看到什么算成功:你手上有了一串以特定前缀开头的钥匙(形如 sk-xxxxxxxx...),并且账户里显示有余额(比如 ¥30)。

⚠️ 这把钥匙只复制、先别贴到任何聊天框/网页。下一步把它只交给 cc-switch

第五步 · 在 cc-switch 里填好供应商 + 钥匙,并切换过去

回到 cc-switch:

  • 右键托盘图标 → 打开主界面 → 找到 Codex 这一栏(本课主线是 Codex;Claude Code 留到第七步顺手配)。
  • 新增/编辑一个供应商配置:把中转供应商给你的两样东西填进去——
  • 接口地址(Base URL / 接口端点):供应商后台会写明,照抄。
  • API Key(钥匙):第四步复制的那一串,粘进去。
  • 保存后,在 cc-switch 里把当前供应商切换成你刚配的这个(通常是点一下选中它,或右键托盘菜单里选它)。
看到什么算成功:cc-switch 主界面里,你新建的这个供应商显示为「当前已启用 / 已选中」状态(通常有个勾、高亮或「●」标记)。

📷 截图位:中转供应商配置已填好(截图前把钥匙那一栏用马赛克/打码遮住再截)。
⚠️ 切换不会立刻对正在开着的 Codex 生效——这是最常见的一个坑。请把已经打开的 Codex 终端窗口整个关掉,重新打开一个新的,新窗口才会读到刚切换的供应商。(详见下方 🆘 第一条)

第六步 · 设好用量封顶 / 只充小额(把「会不会超支」焊死)+ 钥匙安全心法

这一步是反被割的护栏,务必做:

A. 设用量封顶(在中转供应商后台)

登录中转供应商后台,找到「用量上限 / 消费限额 / 封顶」一类的设置(不同供应商叫法略有差异),设一个你能接受的上限(比如「单月 ¥50 封顶」或干脆靠「只充小额、充完即止」自然封顶)。

💡 最省心的封顶 = 不绑自动续费、只充小额。 你充 ¥30,它最多就烧 ¥30,烧完法器会停下来报「余额不足」(那时你已经学进度很多了,再充也不迟)。这本身就是最硬的封顶。

B. 钥匙安全三句心法(记下它)

  • 只存本机:这把钥匙现在只在你这台电脑的 cc-switch 里,没有上传到任何地方,不会因为你截图发朋友圈而泄露(只要你截图时把它打了码)。
  • 设了封顶:就算万一泄露,对方也只能刷到你那 ¥30/封顶额,烧不穿你的钱包
  • 可重置:任何时候怀疑泄露,回供应商后台把这把钥匙删掉、重新生成一把新的,旧的立刻作废——5 秒钟的事。
看到什么算成功:你能对自己说清——「我充的是小额、设了封顶,钥匙只在我电脑里、随时能作废重置。最坏情况我也只损失我充的那点小钱,不会被刷爆。

📷 截图位:用量封顶/小额充值设置页。

第七步 · (顺手)给 Claude Code 也配一条备用

Codex 是本课主力。但 cc-switch 里顺手也能给 Claude Code(辅助法器)配上同一个供应商,留作备用——万一哪天 Codex 那条线卡了,你有个后手。

操作和第五步几乎一样:在 cc-switch 里切到 Claude Code 栏,新增一个供应商配置,把同一个接口地址 + 同一把钥匙(或供应商为 Claude 单独给的那把)填进去,保存。

看到什么算成功:cc-switch 的 Claude Code 栏里也有了一条已配置的供应商。(配好放着即可,本课不用它,主线始终走 Codex。)

💡 不想现在配也行,跳过这步不影响后面任何一课;想要个后手就花两分钟配上。

第八步 · ★微里程碑:第一次让法器改你那个真站

万事俱备。现在做这门课第一件真正激动人心的事——命令法器去改你第 1 课部署上线的那个真站。

  • 打开你第 1 课那个站的项目文件夹(里面有 index.html 的那个)。
  • 用上一课学的方式让 Codex 在这个项目文件夹里启动(让它「接管」这个项目)。
  • 把 📜 咒语卡里的【小改一处咒】整段发给它(里面有一个 [方括号] 要你填一句想改的小文案)。
💡 为什么只改一处小文案? 本课铁律是小步改。第一次让法器动你的真站,只改一个标题/一句话——改对了你建立信心,改错了一眼能看出、也好回退。别让它一次大改

法器改完后,会用人话回你一句类似:「我修改了 index.html 文件,把首页标题从 A 改成了 B,你可以刷新浏览器看看。」——这就是「看得懂」透明层:你不必读代码,但它会告诉你它动了哪个文件、你怎么验证。

  • 按它说的,刷新浏览器里你那个站(本地双击 index.html 打开的那个就行;上线版要等下一课学会部署才会更新)。
看到什么算成功:浏览器里你的站,那处文案真的变成了你让它改的样子。法器读懂了你的项目、自己改了文件、你刷新就看见了。

📷 截图位:① 法器回话「我改了哪个文件」(透明层) ② 改完后的真站在浏览器里变了样(这是本课微里程碑)。
🎉 可发朋友圈的一刻:「我动嘴,AI 动手——它读懂了我的项目,自己把网站改了。」你这才上第 3 课,法器已经真的在替你干活了。
🌿 法器伸手,轻拂楼台一角,字句应声而变。它认你了。

第八步半 · 写咒语 vs 抄咒语(停一分钟,看清你刚才干了什么)

刚才那条【小改一处咒】之所以一次就成,不是因为它是一句"神咒"、是因为它把话说清了——说清了改哪(index.html)、改成啥、只改这一处、改完怎么验证。法器没得猜,就不会跑偏。

这里要点破一个最值钱的认知:咒语不是背的,是写的。 你不需要一本"100 条神级提示词"去抄;你需要的是——看见自己写的一句模糊话,当场把它改具体的能力。改的招数永远是同一个:「反例 → 正例」

反例(让法器猜):

帮我把首页做好看点。

正例(法器不用猜):

把首页大标题改成「欢迎来到我的会员渡口」,字号调大一号。 只改这一处,别动页面其他文案和样式;改完告诉我你动了哪个文件、我怎么验证。

两句想做的事差不多,但右边把"哪里、改成啥、别动啥、怎么验"都说死了——这就是你刚才那条咒灵的原因。

两张能一字不改直接发的"杀手卡",今天先认个脸,后面课会反复用到:

  • 🃏 Plan-First · 先谋后动:任何大改之前先发它——"先别写代码,给我你的假设 + 要改哪些文件 + 分几步做,等我点头再动手"。今天你只敢让法器小改;等以后要加登录、加付费这种大改,先发这张,它就不会闷头跑偏
  • 🃏 Diagnose-First · 先诊后治:任何报错之后先发它——"先别改,读这段报错,用人话说根因,再给最小改动方案"。下一课起你会开始踩报错,这张是你的救命卡。

这两张完整可复制的整段话,加上 4 组"反例 → 正例"对照,都在锦囊卡里:../takeaways/提示词craft卡.md。今天不用全记,先知道"咒语是写的不是背的"这一句,就够你受用整门课

看到什么算成功:你能用一句话说清你刚才那条咒为什么灵——"因为我把改哪、改成啥、只改这一处、怎么验都说清了,法器没得猜";并且你知道以后遇到大改先发 Plan-First、遇到报错先发 Diagnose-First,这两张卡去 提示词craft卡.md 取。
🌿 秘籍里抄来的咒,念十遍灵三遍;自己写出来的咒,字字都扣着你要的事。从今日起,你不是背咒的人,是写咒的人。

第九步 · 给法器立家规:在项目根目录创建 AGENTS.md

法器认你了,但它每次接管你的项目,都是从零开始的——它不会自动记得「我是零基础」「要小步改」「不许编」。上一步你那条【小改一处咒】里特地写了「只改这一处、改完用人话告诉我、先别上线」——这些其实就是你的规矩。难道每条咒语都得把这套规矩重抄一遍?太累了。

有个一劳永逸的办法:把规矩写进一份「家规」文件,放在项目根目录,法器每次都会先读它。 这份文件叫 AGENTS.md

💡 AGENTS.md 是什么(大白话):项目根目录(就是放 index.html 那一层)里的一张「家规纸」。法器(Codex)每次接管这个项目,第一件事就是读它——所以你的规矩、禁区、当前表结构只写一次,它就一直记得,不用每条咒语都重复三铁律

(主用 Codex 就放 AGENTS.md;Claude Code 读的是同名同内容的 CLAUDE.md,两份内容一模一样,只是文件名不同。)

操作(全程让法器代劳,你不写命令):

  • 打开本课锦囊里的 ../takeaways/AGENTS.md 通用模板,把里面的 [方括号] 按提示填成你自己的(你的主题、你是谁、三铁律照抄、禁区照抄)。填好的内容存到记事本里备用。
  • 在你第 1 课那个项目文件夹里启动 Codex,把 📜 咒语卡里的【立家规咒】整段发给它,并把你填好的家规内容一起贴给它——让它在项目根目录创建一个 AGENTS.md 文件,内容就是你填好的那份。
  • 法器创建好后,会用人话告诉你:「我在根目录建了 AGENTS.md,以后我每次接手都会先读它。」
💡 它会随项目长大:现在这份家规里「数据库表结构」那段还是空的(你还没建表)。等第 5 课接通 Supabase、建了表,你只要叫法器「把最新表结构原样回我一份」,粘进 AGENTS.md 里——这正是三铁律里「交底」的落地。从此无论隔多久、换哪个法器接管,它一读家规就知道你的库长什么样,不会瞎编字段
看到什么算成功:你第 1 课那个项目文件夹里,多出了一个 AGENTS.md 文件,双击能打开、里面是你填好的家规(你的主题 + 三铁律 + 禁区)。从这一刻起,你不用每条咒语都重复「小步改、别编、说人话」了——法器已经记在心里。
🌿 家规既立,法器入门拜帖。此后它一进你的洞府,先读门规,再动手脚——再不必你日日耳提面命。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器(Codex)的提示词。[方括号] 是要你自己填的地方,其余照抄。

【取渡口咒】· 让法器帮你找到 cc-switch 官方下载页(第三步用)

我要在 Windows 上安装一个开源桌面工具 cc-switch(用来切换 Codex/Claude Code 的 API 供应商)。 请告诉我: 1. 它的官方 GitHub 仓库地址是什么; 2. Windows 用户应该下载哪个安装包(.exe 还是 .msi); 3. 提醒我怎么认准官方仓库、避免下到山寨版本。 只给我下载和辨别真假的信息,先别讲怎么配置。

【小改一处咒】· 第一次让法器改你的真站(第八步用)

这是我用免费课做的一个静态网站项目,根目录里有 index.html。 请帮我做一个很小的改动:把 [在这里写你想改的一处小文案,例如:首页大标题改成「欢迎来到我的会员渡口」]。 要求: 1. 只改这一处,别动其他任何地方; 2. 改完用大白话告诉我:你改了哪个文件、具体把什么改成了什么、我该怎么在浏览器里验证; 3. 先不要部署上线,只改本地文件。

【立家规咒】· 让法器在项目根目录创建 AGENTS.md(第九步用)

这是我用免费课做的静态网站项目,根目录里有 index.html。 请帮我在项目根目录创建一个名为 AGENTS.md 的文件,内容就是我下面贴给你的这份家规,一字不改地写进去: 【在这里把你按 takeaways/AGENTS.md 模板填好的家规内容,整段粘贴进来】 要求: 1. 只创建这一个 AGENTS.md 文件,放在根目录(和 index.html 同一层),别动其他任何文件; 2. 创建完用大白话告诉我:文件建在哪、以后你是不是每次接手这个项目都会先读它; 3. 先不要部署上线,只在本地创建这个文件。
填空说明:【小改一处咒】里只有一个 [方括号] 要填——填一句你想改的小文案(标题、欢迎语、按钮字)。其余一字不改。【取渡口咒】整段照发,无需填空。【立家规咒】里的 【...】 替换成你按 ../takeaways/AGENTS.md 模板填好的家规全文,其余照抄。

🆘 卡住了?(按你看到的现象找)

现象:在 cc-switch 里切换了供应商,可法器还是用旧的 / 还是报海外连不上

先检查:你是不是没重开 Codex 终端?切换供应商不会对已经开着的窗口生效
急救话术(照做):把当前所有打开的 Codex 终端/窗口全部关掉,然后重新打开一个新的,再让法器干活。九成的「切了不生效」都是这个原因。

现象:法器报错 401 / Unauthorized / invalid api key(钥匙无效)

先检查:① 钥匙是不是复制时多了空格或少了几位?② 中转供应商接口地址(Base URL)填对了吗?③ 账户还有余额吗(没充值或余额为 0 也会被拒)?
急救话术(照做):回 cc-switch,把钥匙那栏清空、重新从供应商后台复制粘贴一遍(别手打);确认接口地址和供应商后台写的一字不差;再去供应商后台看一眼余额。改完重开 Codex 终端再试。

现象:我担心这把钥匙泄露 / 截图发出去会不会被盗刷

先检查:你截图时有没有把钥匙那一栏遮住/打码?钥匙本身只存在你这台电脑的 cc-switch 里,不会因为你正常用就外泄。
急救话术(照做):①以后截图永远把钥匙打码;②你已经设了用量封顶/只充小额,最坏也只烧那点小钱;③一旦怀疑泄露,回供应商后台删掉这把钥匙、重新生成一把,旧的立刻作废、5 秒搞定。

现象:法器改完站,我刷新浏览器却没看到变化

先检查:① 你刷新的是法器改的那个本地文件吗(它改的是项目文件夹里的 index.html,不是上一课部署到网上的那个链接——线上版要下一课学会部署才更新)?② 浏览器是不是缓存了旧页面?
急救话术(照做):在你的项目文件夹里重新双击 index.html 打开(或在已打开的页面按 Ctrl + F5 强制刷新)。还看不到,就把下面的「报错三句话」发给法器问它。
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好,发给法器或答疑处,比你瞎描述管用十倍。
例:「我刚在 cc-switch 切了供应商并重开了终端 / 现在法器报 401 invalid api key / 我希望它能正常连上干活。」

✅ 出关自查(全部勾上才算过这一关)

cc-switch 已装好,托盘有图标,右键能弹菜单
我配好了一个大陆能人民币付费的中转供应商,并在 cc-switch 里切换并启用了它(重开过终端)
只充了小额(如 ¥30)且设了用量封顶,能说清「最坏只损失这点小钱,钥匙只在本机、可随时重置」
我让 Codex 改了一处我第 1 课那个真站的小文案,法器用人话告诉了我它改了哪个文件,我刷新浏览器看到改动生效
我在项目根目录建好了 AGENTS.md 家规(主题 + 三铁律 + 禁区),知道法器以后每次接手都会先读它、不用再每条咒语重复三铁律
这门课唯一真要花的钱(¥30–80 算力)我心里有数,不慌、不怕超支

📦 本课锦囊(可带走 · 可分享)

你这课赚到的不只是站上多了能改的本事,还有两件能反复用一辈子的东西——尤其那份家规模板,是整门课的「定海神针」。

  • 【旗舰】AGENTS.md 家规通用模板 —— 一份放进项目根目录、法器每次都先读的「家规纸」,让它永远记得你是零基础、要小步改、不许编、有哪些禁区。文件:../takeaways/AGENTS.md。怎么用:复制到你项目根目录(和 index.html 同一层),把里面的 [方括号] 按提示填成你自己的(主题填空、三铁律和禁区照抄),填空即用。从此你不用每条咒语都重抄三铁律——法器一接手就记得。建表后再叫它把表结构交底进去,这份家规会随项目一起长大。(Codex 用 AGENTS.md,Claude Code 用同内容的 CLAUDE.md,模板里有说明。)
  • cc-switch 配置速查卡 —— 一页纸记清 cc-switch 是什么、配置三件套、配完怎么验、三个最常见卡点怎么救。文件:../takeaways/03-cc-switch速查.md。怎么用:配的时候摊开对着填(接口地址 / 钥匙 / 当前供应商三件套),以后想换供应商也照这张查,复制即用
💡 可分享:我整理的 Codex AGENTS.md 家规模板——放进项目根目录、填空即用,法器从此记得你的规矩,不用每次重复交代。拿去用。

🌱 加练(选做)+ 下一课

加练:再让法器改一处别的小文案(比如换个按钮文字、改个副标题),熟悉一下「我动嘴、它动手、我刷新验证」这个节奏。每多用一次,你就少怕它一分。

下一课预告:法器现在能改你的站了——这是好事,也是风险。它一手能改对,也一手能改坏。改坏了怎么办?

下一课,给你的项目立一道「渡劫回档」:把它交给 GitHub 看管。我们会故意把站改坏一次,再用一句话一键回到改坏之前——从此你让法器放手大改也不怕,改崩了,一句话就能回到上一个境界。

🔖 小提示:从下一课起,每过一道大关,我们都会让法器顺手「存个档」。今天你已经敢让它动你的真站了;下一课,你会连「它万一动坏了」都不再怕。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 4 课

立档存真 · 交给 GitHub

会员专属

# 第 4 课 · 立档存真 · 把项目交给 GitHub 看管

课头

🪷 境界:筑基初期 · 立地基四层
预计用时:60 分钟
🏆 本课产出:让法器把你的整个项目推上 GitHub 仓库(一行裸命令都不敲),然后故意把站改坏,再一句话让法器把它复原——亲眼看见「改坏了也能回来」
🚫 今天不做:不学分支、不学合并、不学 PR、不学冲突解决、不碰任何"高级 git"
📜 法器在手,你已能号令它改动这座站。可力量越大,越怕一念之差毁了根基——上一课你已让它动过你的真站。今日筑一道「时光回廊」:每过一劫,便封存一道真身;纵使日后改得天翻地覆,一句咒语,便能让万物回到上一个境界。改坏,从此不再是灾祸,只是一次可逆的试探。
📷 修炼笔记卷轴位(待补):时光回廊层层石门 · 每道门后封存一尊静止的法相 · 修士回身,一道门重新亮起。

这一课,你在干一件什么事

上一课,你已经让法器(Codex)改动过你的真站——它能读你的文件、改你的文件。这很爽,但也藏着一个让所有新手半夜惊醒的恐惧:

「万一它改坏了,我怎么回去?」

今天就解决这个恐惧。你要给项目装上一个叫 GitHub 的"时光回廊"(专业说法叫版本控制)。它干一件事:每次你说"存个档",它就把项目当前这一刻的样子完整封存一份;以后不管改成什么样,你都能一句话回到任何一个存过的档

具体今天做三件事:

  • 立档:让法器把你的整个项目第一次推上 GitHub 仓库(云端的一个保险柜,免费)。
  • 改坏:故意让站坏掉(删掉关键内容、打开变空白)——这是安排好的演练,不是事故。
  • 回档:一句话让法器把项目恢复到推上去时的样子,站又活了。

跑通这一遍,你心里那块石头就落地了:从今往后,每过一道大关,我们都存一个档;改坏不怕,回得来。 这门课后面要给站加登录、加数据库、加收款,越改越大胆,靠的就是今天这道保险。

💡 GitHub 不是免费课上线用的那个 GitHub Pages 吗,怎么又来了? 同一个 GitHub 账号,但用法不同。免费课你用它当"网页托管"(放静态页面给人看);今天你用它当"代码保险柜 + 时光回廊"(存档、回档)。一个账号,两种用途,不冲突。真正连仓自动上线要到第 14 课,今天先把"存档/回档"这套保命功练熟。
💡 为什么不在练气期就学 git? 因为那时你的站没什么可保护的,学了也没动力。现在不一样——你有了一座真站、还有一个会动手改它的法器,值得保护、也需要后悔药了,这时候学,动机最真,也最记得住。

主线步骤(跟着做,每步都有「看到什么算成功」)

第一步 · 确认法器和项目都在位

打开你上一课用的那个法器(Codex)窗口,确认它已经"接管"了你的项目文件夹(就是免费课那个含 index.html 的文件夹,上一课法器已经在里面改过文件)。

如果法器窗口关了,按上一课的方法重新打开它,让它重新进入你的项目文件夹。

把这句话发给法器,确认它看得到你的项目:

请帮我确认一下:你现在能看到我这个项目里的文件吗?请列出最外层有哪些文件和文件夹,先别改任何东西。
看到什么算成功:法器用人话回你一段,列出了你项目里的文件(至少能看到 index.html)。说明法器和项目都在位,可以开始立档了。
🌿 法器已立于洞府之中,环视四壁——它看得见你这座站的每一块砖。今日要做的,是为这一刻的全貌,拓下第一道真身。

第二步 · 让法器把项目"立档"(第一次推上 GitHub)

现在请法器干本课最关键的活:把你整个项目第一次推上 GitHub。你一行命令都不用敲,全部由法器代管。把下面这段(📜咒语卡里的【立档咒】)完整发给法器:

用 📜 咒语卡 · 【立档咒】(在下方咒语卡区,整段复制,把方括号填好)

法器收到后,可能会:

  • 让你先在浏览器里新建一个空的 GitHub 仓库(它会告诉你点哪个按钮、起什么名),然后把仓库地址贴回给它;
  • 或者它能直接帮你建好——按它说的做就行,它会一步步带你。
看到什么算成功:法器最后用一句人话告诉你类似「我已经把你的项目推上 GitHub 仓库了,这是第一个存档」,并给你一个 github.com/你的用户名/仓库名 的地址。

📷 截图位:法器报告「已把项目推上 GitHub」。
💬 透明层 · 法器刚才到底干了啥(看得懂就行,不用记):它在你项目里建了一个隐藏的"账本"(.git 文件夹),把当前所有文件记成了"第一个存档",再把这个存档上传到了 GitHub 云端那个保险柜。以后每次"存档",都是往这个账本里再记一笔,旧的那笔不会丢。
🌿 第一尊真身,已封入回廊。纵使来日天塌,此刻的你,永远可被唤回。

第三步 · 去 GitHub 网页亲眼看见你的文件

光听法器说还不够,要亲眼确认存档真的上去了。打开浏览器,进 github.com,登录后找到刚才那个仓库(首页或你的头像菜单里能找到),点进去。

看到什么算成功:你在 GitHub 网页上看到了你项目里的那些文件index.html 等),和你电脑上的一模一样。这就是云端那份存档,谁也删不掉你电脑上的,你也删不掉云端这份——双保险。

📷 截图位:刷新 GitHub 仓库网页 · 看到你的文件。

第四步 · 故意把站改坏(这是演练,放心坏)

现在做一件你以前绝不敢做的事:故意把站弄坏。因为你有存档了,坏了也能回来——这一步就是为了让你亲身体验后悔药的味道

把下面这段(📜咒语卡 · 【演练改坏咒】)发给法器,让它故意搞坏你的站:

用 📜 咒语卡 · 【演练改坏咒】(在下方咒语卡区,整段复制)

法器改完后,双击你电脑上的 index.html(或刷新你浏览器里打开的那个本地页面)看看。

看到什么算成功:你的站真的坏了——打开是一片空白、或者乱七八糟、或者报错。这一刻你应该有点慌——记住这个感觉,下一步你就要见证它被一句话救回来。

📷 截图位:改坏后站打不开的样子(故意演练)。
💬 透明层:法器刚才只动了你电脑上的文件,没有动 GitHub 云端那个存档。所以云端那份"好的版本"还稳稳地躺在保险柜里——这就是你的后悔药还在的原因。

第五步 · 一句话回档复原(见证后悔药)

现在念出本课的"复活咒"。把下面这段(📜咒语卡 · 【回档咒】)发给法器:

用 📜 咒语卡 · 【回档咒】(在下方咒语卡区,整段复制)

法器会从存档里把"好的版本"取出来,覆盖掉被改坏的文件。改完后,再双击 / 刷新你的 index.html

看到什么算成功:你的站完好如初,跟改坏之前一模一样——好像刚才那场"灾难"从没发生过。你心里那块石头,落地了。

📷 截图位:一键回档后 · 站恢复如初(这是本课的微里程碑:改坏还能回来)。
🎉 可发朋友圈的截图:「故意把项目改坏,一句话就让它满血复活——以后再也不怕动代码了。」
💬 透明层 · 法器刚才到底干了啥:它没有"手动修"任何东西,而是从时光回廊里把第二步那个存档整个调了回来,让所有文件回到了存档那一刻的样子。这就是版本控制的真本事——不是修,是回。

第六步 · 立下规矩:每过一道渡劫,存一个档

最后花一分钟,把今天最重要的一条规矩刻进脑子里:

从今往后,每当你过完一道大关(装好一个新功能、跑通一个新里程碑),就让法器顺手"存个档"。

为什么?因为今天的回档之所以能成,是因为你事先存了档(第二步)。存档就像游戏里的存盘点——你存得越勤,万一后面哪一步改崩了,你能退回去的位置就越近,损失越小。后面第 6、10、13 课这些大关,我们都会在结尾提醒你存一个档。

存档其实就一句话,你已经会了——就是 📜咒语卡 · 【存档咒】,过关时发给法器即可。

看到什么算成功:你能用大白话说清这条规矩——「每过一道大关,让法器存个档;改坏了,一句话回到上一个档。」把这句话记进备忘录。
🌿 回廊之中,从此一劫一门。你每渡一劫,便有一尊真身静候;纵前路雷霆万钧,亦有归途。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器(Codex)的提示词。本课四张,对应:立档、演练改坏、回档、日常存档。

【立档咒】· 第一次把项目推上 GitHub(对应第二步)

我想用 git 给这个项目做版本控制,并第一次推送到 GitHub 上做备份。我从没用过 git 命令,请你全程帮我代办,我不自己敲命令。 请按这个顺序帮我: 1. 先告诉我需不需要在浏览器里新建一个空的 GitHub 仓库;如果需要,请用大白话告诉我点哪个按钮、仓库名建议叫什么、要不要勾选其它选项; 2. 等我把新仓库的地址贴给你之后,你来完成初始化、提交第一个版本、推送到这个 GitHub 仓库的全部操作; 3. 全部做完后,用一句人话告诉我:"已经把项目推上 GitHub,这是第一个存档",并把仓库网页地址给我。 每一步做之前先用一句话告诉我你要干什么,做完再用一句话告诉我结果。
填空说明:本咒无方括号,整段照发即可。若它问你仓库名,可填一个英文名(例如 my-member-site)。

【演练改坏咒】· 故意搞坏站,用来演练回档(对应第四步)

我在做一次"改坏再恢复"的演练,请你故意把我的网站弄坏:把 index.html 里页面主体内容删掉一大段,让我双击打开后看到一片空白或明显出错。 注意:只改我电脑本地的文件,不要碰 GitHub 上那个存档。改完用一句话告诉我你删了什么,方便我等下恢复。
填空说明:本咒无方括号,整段照发即可。这是安排好的演练,放心让它坏。

【回档咒】· 一句话把项目恢复到上一个存档(对应第五步,也是以后救命用的)

站被改坏了,请帮我回到上一个存档的样子——也就是我推上 GitHub 的那个好版本。把所有被改动的文件都恢复成存档时的状态。 我不自己敲命令,请你代办,做完用一句话告诉我:"已经回到上一个存档"。
填空说明:本咒无方括号,整段照发即可。这张卡请收藏好——以后任何一次改崩,发它就能回去。

【存档咒】· 每过一道大关,顺手存一个档(对应第六步,日常用)

我刚做完一个阶段,想存一个档。请帮我把当前项目的所有改动提交并推送到 GitHub,作为一个新存档,存档说明写:[一句话描述你刚做完什么,例如:装好登录功能]。 我不自己敲命令,请你代办,做完用一句话告诉我已经存好。
填空说明:把 [...] 换成你刚做完的事的一句话描述,其余不动。

🆘 卡住了?(按你看到的现象找)

现象:法器推送时提示要登录 / 要授权 / 要 GitHub 账号验证

先检查:这是 GitHub 在确认"你是不是这个账号的主人",很正常,不是出错。第一次把东西推上 GitHub,几乎人人都会撞到这一步。
急救话术(照做):把下面这句发给法器——
``
它好像在让我做 GitHub 登录或授权,但我不知道该点哪里、填什么。请你用大白话一步一步告诉我现在屏幕上该做什么,每次只让我做一件事。
``
法器会带你走完授权(通常是浏览器里点一下"同意/Authorize",或复制一个验证码)。按它说的一步步来即可。

现象:法器说"推送失败 / push 被拒绝 / 远程仓库有冲突"之类

先检查:八成是那个 GitHub 仓库不是空的——比如新建仓库时手滑勾了"添加 README",里面已经有了一个文件,和你要推的对不上。
急救话术:把这句发给法器——
``
推送失败了。我猜可能是 GitHub 那个仓库不是空的。请你帮我看看是什么原因,并用最稳妥的方式帮我把项目推上去,过程你来代办,每一步先用一句话告诉我你要干什么。
``
法器会自己处理掉这个小冲突(它不用你懂"冲突"是什么,这门课也不教——交给它)。

现象:回档之后,站还是坏的 / 没恢复

先检查:①你是不是真的存过档了(第二步法器有没有回你"已推上 GitHub")?没存过档,自然回不去。②你刷新看的,是不是改坏的那个文件本身?有时是浏览器缓存,没真的重新打开。
急救话术:先彻底关掉浏览器里那个页面,重新双击电脑上的 index.html 打开;如果还是坏的,把这句发给法器——
``
我执行了回档,但站看起来还是坏的。请你帮我确认:第一个存档到底存上了没有?现在的文件和那个存档相比,差在哪里?请把它彻底恢复成我第一次推上 GitHub 的那个版本。
``
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好,整段发给法器。例如:「我刚让你把项目推上 GitHub / 现在屏幕上显示 push 被拒绝 / 我希望项目能成功推上去」。这样描述,比你瞎着急管用十倍。

✅ 出关自查(全部勾上才算过这一关)

我让法器把项目推上了 GitHub,并在 GitHub 网页上亲眼看到了我的文件
故意把站改坏过一次,亲眼看到它坏掉的样子
我用一句话让法器回档,站恢复如初了(改坏还能回来)
我能用大白话说清这条规矩:每过一道大关存个档,改坏了一句话回到上一个档
我手里收好了【回档咒】这张卡,知道以后改崩了发它就能救回来

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是给站装上了「时光回廊」——你还带走一张能反复用一辈子的东西:git 存档 / 回档咒语速查卡

  • git 存档 / 回档速查卡 — 一张用「人话」写的咒语卡:存档、回档、查历史、退回更早的档,整段复制发给法器即可,你永远不用敲一行 git 裸命令。文件:../takeaways/04-git-cundang-suvcha.md。怎么用:复制即用——以后任何项目(做第二个站、帮朋友、接私单),改对了发【存档咒】,改崩了发【回档咒】,想看存过哪些档发【查历史咒】。把这张卡收进你的「锦囊袋」,它是你随身的后悔药。
💡 可分享:「学会了给项目存档 / 回档——故意把站改坏,一句话就让它满血复活,以后再也不怕动代码了。」

🌱 加练(选做)+ 下一课

加练:再走一遍"小循环"练手感——让法器随便改点东西(比如改个标题文字),然后发【回档咒】把它收回来。多走一两遍,"改坏不怕"这件事就从"道理"变成了你身体里的"肌肉记忆"。

下一课预告:保险有了,胆子也大了——可你的站到现在还是个没有记忆的凡胎:刷新一下,谁来过、填过什么,全忘光。

下一课,接通灵脉。你会请来一个叫 Supabase 的"云端记忆库",给你的站接上一颗能记住数据的心脏。你会拿到两把钥匙(一红一绿,红的千万不能外传——下一课重点讲),并第一次让你的网页显示出一句来自云端的数据

🔖 小提示:下一课接通 Supabase 是个大动作。按今天立的规矩——接通成功后,记得让法器存一个档。从此你每渡一劫,回廊里就多一尊真身候着你。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 5 课

开户立籍 · 接通 Supabase

会员专属

# 第 5 课 · 开户立籍 · 接通灵脉 Supabase

课头

🪷 境界:筑基初期 · 立地基五层
预计用时:90 分钟
🏆 本课产出:给你的站接上一个云端数据库(Supabase),做一个自检页——连上了显示「灵脉已通」+ 一句从云端读回来的真话;连不上,它明白白告诉你断在哪一步(绝不给你一片空白)
🚫 今天不做:不建表、不写登录、不碰付费——今天只接通管道、确认水能流过来
📜 前四关,你换了法器、立了档案,手里这座站却还是个不会呼吸的凡胎——它没有记性。今日开户立籍:在云端凿一口灵泉(Supabase),引一道灵脉接进你的站。灵脉一通,它便有了第一缕记性——能记人、能存物、能认主。两把钥匙随泉而生:一把可示人,一把藏于丹田,泄之则前功尽毁。
📷 修炼笔记卷轴位(待补):云端灵泉初凿 · 一道灵脉自天而降接入小楼 · 楼中第一盏灯亮起。

这一课,你在干一件什么事

你前面那座站,能看、能上线,但它没有记性——刷新一下,什么都不剩。它不能记住「谁注册过」「存了哪些内容」「谁是会员」。

要有记性,就得给它接一个数据库。我们用的是 Supabase——一个免费就能用的「云端数据库 + 登录系统」,是你这门课后面所有功能(注册、存内容、收费)的地基。

今天不建表、不写功能,今天只做一件最关键、也最容易被教程跳过的事:把管道接通,并且亲眼确认水能流过来。

具体三步:

  • 开户:注册 Supabase、建一个项目(你的云端灵泉)。
  • 配钥匙:拿到两把钥匙,搞清楚哪把能给人看、哪把绝不能外泄,写进一个叫 .env 的秘密文件,并锁好它不让 GitHub 看见。
  • 验通:让法器给你做一个自检页——连通了显示「灵脉已通」并读回云端一句真话;连不上,它直接告诉你断在第几步。
💡 为什么要先做「自检页」、不直接写功能? 因为「接数据库」是整门课最容易闷头卡半天还不知道哪错了的环节。很多人卡在这里,看到的永远是「一片空白」,根本不知道是钥匙错了、还是地址错了、还是没填。我们反其道而行:先做一个会说话的自检页——它永远告诉你「我现在卡在第几步」。后面每一课接数据库,你都能靠它一眼看出通没通。这是你这门课最值钱的一个习惯。

主线步骤(跟着做,每步都有「看到什么算成功」)

第一步 · 注册 Supabase、建一个项目

打开浏览器,访问 supabase.com,点右上角 Start your project(开始你的项目)。可以直接用你的 GitHub 账号一键登录(免费课你已经有 GitHub 账号了,省得再记一套密码)。

登录后进入控制台(Dashboard),点 New project(新建项目)。会让你填几样东西,照下面对:

英文界面写的
你怎么填
Organization(组织)
第一次会让你建一个,名字随便,比如 my-shifei,建好直接用
Project name(项目名)
起个英文名,比如 lingtai-dukou(别用中文)
Database Password(数据库密码)
Generate a password 自动生成一个。这门课基本用不到它,可记可忘——忘了也没关系,Supabase 后台随时能点 Reset database password 重置一个新的
Region(区域)
选离你近的,下拉里挑 Southeast Asia (Singapore)(新加坡)或 Northeast Asia (Tokyo)(东京)都行

填完点 Create new project(创建新项目)。

看到什么算成功:页面进入你的新项目,顶上会转一会儿圈圈、提示 "Setting up project..."(正在搭建项目,约 1-2 分钟),这是云端在给你凿灵泉,正常。转完,你看到一个左边一长条菜单的控制台首页。

📷 截图位:Supabase 控制台新建项目页(英文界面)。
🌿 灵泉初凿,泉眼已成。它现在空空荡荡——但二十课后,你站上每一个注册的人、每一条存下的内容,都流在这口泉里。
💡 控制台全是英文怎么办? 不用慌——这一课你要点的每一个按钮,上面的英文我都给你逐字对齐了。照着英文找按钮,对上字就点。看不懂的地方一律不用动。

第二步 · 找到你的两把钥匙(红绿对照,刻进脑子)

你的站要连上这口云端灵泉,需要两样东西:灵泉的地址 + 一把钥匙。它们在控制台里。

在左边菜单最下方点 Project Settings(项目设置,齿轮图标)→ 点 API(或 API Keys)。你会看到三样东西,这里是今天最重要的认知,请把下面这张表读两遍

你看到的
它是什么
颜色口诀
能不能放进前端代码
Project URL(项目地址)
你这口灵泉的门牌号,形如 https://xxxx.supabase.co
🟢 公开
能(它本来就是公开地址)
anon public(公开钥匙)
给「访客」用的钥匙,故意设计成可以公开
🟢 绿灯
——它就是要写进网页给所有人用的
service_role(管理员钥匙)
「站主总钥匙」,能绕过一切权限
🔴 红灯
绝对不能! 进了前端 = 你的站对所有人门户大开

一句话记住

  • 🟢 anon = 门口的迎宾钥匙,给谁看都行,它打开的门后面还有一道道锁(后面课会教的「行级安全」就是那些锁)。
  • 🔴 service_role = 你家保险柜总钥匙,只能留在你自己手里。今天我们碰都不碰它——你这门课的前 13 课,前端永远只用 anon 那把。
看到什么算成功:你能在这一页里指出哪个是 Project URL、哪个是 anon public、哪个是 service_role,并且能说出口诀「anon 绿灯能公开、service_role 红灯绝不进前端」。

📷 截图位:两把钥匙页(anon 绿 · service_role 红)。截图时请把 service_role 那一行用手指/马赛克挡住再截——养成习惯,这把钥匙连截图都不该露出来。
🌿 一明一暗,两把钥匙。明者迎客,暗者守库。修士泄了暗钥,灵泉一夜被掏空——故曰:service_role,宁烂在丹田,不露于人前。

第三步 · 把钥匙写进 .env 秘密文件

现在把「地址 + anon 钥匙」交给你的站。它们要写进一个专门放秘密的文件,叫 .env(注意:就叫这个,前面一个点,没有别的名字)。

这一步交给法器代你建文件,你不用手动找路径、不用敲命令。打开 Codex,把下面【接灵脉·建 .env 咒】整段发给它(咒语卡里有完整版,记得先填空)。

法器会做三件事,做完会用人话回你一句:

  • 在你项目文件夹里新建一个 .env 文件,把你的地址anon 钥匙填进去;
  • 同时建一个 .env.example传家底单,下面解释);
  • .env 写进 .gitignore护身符,下面解释)。
看到什么算成功:法器回你类似「我已经在你的项目里建好了 .env,写入了你的 Supabase 地址和 anon 公开钥匙;同时建了 .env.example 作为模板,并把 .env 加进了 .gitignore,它不会被上传到 GitHub」。

📷 截图位:.env 文件已建 · .gitignore 已护。
💡 什么叫 .gitignore「护身符」? 你第 4 课已经把项目交给 git 看管了。.env 里有你的钥匙,绝对不能跟着代码上传到 GitHub(那等于把钥匙挂网上)。.gitignore 是一张「黑名单」——写进去的文件,git 会自动当没看见、永远不上传。法器已经把 .env 加进这张黑名单了,这是保命的一步
💡 什么叫 .env.example「传家底单」? .env.example.env空白模板——它只写「这里需要填地址、这里需要填钥匙」,但不填真值。它上传到 GitHub(因为它没有秘密)。作用:以后你换电脑、或者别人帮你弄,一看这张「传家底单」就知道「哦,这个站需要填这两样东西」。真钥匙在 .env(不上传),清单在 .env.example(上传)——这套搭配你记住,后面每个全栈项目都这么干。
⚠️ 本课先埋一个心智,第 14 课会用到:你的钥匙现在写在本地电脑的 .env。等第 14 课把站真正部署上线时,线上平台那边也要再填一遍同一套钥匙(平台读不到你电脑上的 .env)。所以这套秘密是「两处同一套」:本地 .env 一处、线上平台一处。现在不用做线上那处,只要心里有这根弦——第 14 课如果部署成功却白屏,99% 就是线上那处没填。

第四步 · 让法器做一个「会说话」的自检页

现在最关键的一步:确认管道真的通了。我们不靠猜,做一个自检页让它自己说。

把咒语卡里的【自检页·会说话咒】整段发给 Codex。它会在你项目里建一个自检页面,这个页面的规矩是:

  • 连上了 → 显示绿色「灵脉已通」;
  • 连不上 → 显示红色,并指名道姓告诉你断在哪一步(地址没填?钥匙错了?项目睡了?);
  • 绝不允许出现一片空白——空白是最坑人的,它会让你不知道从哪查起。

法器写完会用人话告诉你「自检页建好了,文件叫 xxx,怎么打开看」。

看到什么算成功:法器回你「自检页已经建好,你可以打开 (它会告诉你文件名/地址) 查看」。先别急着看通没通,下一步才看——这一步只要确认文件建出来了、法器告诉你怎么打开就算成功。
💡 为什么自检页这么重要? 因为接数据库十有八九不会一次成功——可能钥匙复制时多了个空格、可能地址填错。普通教程让你直接写功能,错了就是一片空白,你抓瞎。有了自检页,每次都能一眼看出卡在哪——这是你接下来十几课都要靠的「体温计」。

第五步 · 打开自检页,看灵脉通没通

按法器告诉你的方式打开自检页(通常是在浏览器里打开一个本地地址,比如 http://localhost:xxxx,法器会给你确切的)。

两种结果,都正常,都有救:

结果 A——绿色「灵脉已通」+ 一句从云端读回来的话 🎉

恭喜,管道通了。那句话是你的站第一次从云端真的读回来的数据——这就是本课的微里程碑。

结果 B——红色,写着断在哪一步

这不是失败,这是自检页在干它的活。 红字会告诉你大概问题(地址没填好 / 钥匙不对 / 项目睡了)。照着它的提示,回到下面 🆘 卡住了 对号入座即可。改完刷新页面再看,绝大多数人一两次就转绿。

看到什么算成功:自检页显示绿色「灵脉已通」,并且页面上出现一句来自云端的话(比如「云端灵泉运转正常 · 当前时间 ……」之类,由你的库返回)。

📷 截图位:自检页显示「灵脉已通」;以及——网页显示来自云端的一句话(这是本课的微里程碑)。
🎉 可发朋友圈的截图:「我的网站,第一次从云端读回了一句真话——它有记性了。」——你才上到第五课,已经把前端和云端数据库真·接通了,这是很多人学几个月都没摸到的地基。
🌿 灵脉贯通,泉水入楼,第一盏灯亮了。它还说不出长句,但已能应你一声——从此,它记得住人,也认得主。

第六步 · 点破免费层的两条「边界线」(30 秒,免得以后慌)

Supabase 免费层够你整门课用,但有两条边界先告诉你,不是要你现在做什么,是免得以后突然懵

  • 7 天不动会「睡着」:免费项目如果连续 7 天没人访问,Supabase 会自动把它暂停(Paused)省资源。这不是坏了——进控制台点一下 Restore / Resume(恢复)就能唤醒,几十秒就醒。你天天在学不会遇到;等第 15 课拉真人来用之前,我们会专门教你「唤醒检查」。现在只要记住一句:哪天站突然连不上、自检页报「项目睡了」,先去控制台看看是不是被暂停了。
  • 额度很大但不是无限:免费层的数据量、流量额度对你这门课绰绰有余(你就一个人学、几十条数据)。真等到有很多真人用了再说,那是富贵以后的烦恼。
看到什么算成功:你知道了「免费项目 7 天不用会自动暂停、控制台一点就能唤醒」这件事——以后真遇到,你不会以为是自己把站学坏了。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器的提示词。【...】 是要你填的空,其余照抄。今天两张:一张让法器建 .env,一张让法器做自检页。

【接灵脉·建 .env 咒】· 让法器把钥匙安全地写进项目

我在做一个网站项目,要接 Supabase 数据库。请帮我在当前项目里做三件事: 1. 新建一个 .env 文件,写入下面两行(保持这两个名字不变): VITE_SUPABASE_URL=【粘贴你的 Project URL,形如 https://xxxx.supabase.co】 VITE_SUPABASE_ANON_KEY=【粘贴你的 anon public 钥匙】 2. 新建一个 .env.example,内容是上面两行的「空白模板」——只保留变量名、等号后留空,不要填真值(这个文件会上传 GitHub,不能有秘密)。 3. 把 .env 加进 .gitignore,确保它永远不会被 git 上传。 做完请用一句人话告诉我:你建了哪几个文件、.env 是不是已经被 .gitignore 保护住了。 注意:我给你的这两个值里,绝对不要把它们打印/回显到聊天里。
填空说明:把两个 【...】 换成第二步里你自己的 Project URLanon public 钥匙。service_role 那把红钥匙不要给法器、不要进任何文件。

【自检页·会说话咒】· 让法器做一个永不空白的连通自检页

请在我的项目里新建一个「Supabase 连接自检页」,要求: - 从 .env 读取 VITE_SUPABASE_URL 和 VITE_SUPABASE_ANON_KEY 连接 Supabase。 - 连接成功:页面用醒目的绿色显示「灵脉已通」,并向 Supabase 发起一次最简单的读取(比如读取当前服务器时间,或调用一个不依赖任何表的接口),把读回来的内容显示成「来自云端的一句话」。 - 连接失败:页面用醒目的红色,分情况明确告诉我断在哪一步——是地址没填、钥匙缺失/格式不对、还是网络/项目暂停连不上。把具体错误信息也显示出来。 - 任何情况下都【绝不允许】出现一片空白页面,必须有红或绿的明确反馈。 做完请用一句人话告诉我:这个自检页的文件名是什么、我该怎么在浏览器里打开它看结果。
填空说明:这张不用填空,整段照发。如果你的项目还没装 Supabase 的库,法器会顺手帮你装——它装完会用人话告诉你它干了啥,放心。

🆘 卡住了?(按你看到的现象找)

现象:自检页红字写着「连不上 / 地址或钥匙有问题」

先检查:八成是复制钥匙时多带了空格或漏了一截,或者 .env 里地址/钥匙贴反了。
急救话术(发给法器):「自检页显示连不上 Supabase,红字提示是【把红字原话抄进来】。请帮我核对 .env 里的 VITE_SUPABASE_URLVITE_SUPABASE_ANON_KEY 是不是有多余空格、是不是贴反了,并告诉我怎么重新确认这两个值。」改完刷新页面再看。

现象:自检页一片空白 / 报「key 无效」「Invalid API key」

先检查:是不是把钥匙复制错了——特别注意别把 service_role 那把红钥匙误填成了 anon 的位置,或者钥匙只复制了一半。
急救话术:回 Supabase 控制台 Project Settings → API重新复制 anon public 那一整把(点旁边的复制按钮,别手动框选,最稳),让法器重新写进 .envVITE_SUPABASE_ANON_KEY。注意:.env 改完,法器可能让你把本地预览重启一下才生效,照它说的做。

现象:Supabase 控制台打不开 / 注册卡在验证 / 一直转圈

先检查:是不是网络问题——这不是你的错。Supabase 在国内偶尔加载慢。
急救话术:换个网络(比如手机热点)重试;或等几分钟刷新。新建项目时「Setting up project... 转圈 1-2 分钟」是正常的,别以为卡死了,泡杯水等它。

现象:以前能连,今天自检页突然报「项目暂停 / Project paused」

先检查:你的免费项目是不是超过 7 天没动、被自动暂停了(见第六步)。
急救话术:进 Supabase 控制台,打开你的项目,找到 Restore / Resume(恢复)按钮点一下,等几十秒它醒过来,再刷新自检页。这是免费层的正常机制,不是你弄坏了。
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好发给法器。比如:「我刚把 anon 钥匙填进 .env、打开了自检页;我现在看到红字写『Invalid API key』;我希望它变成绿色的『灵脉已通』。」——这样描述,法器十有八九一次就帮你定位。

✅ 出关自查(全部勾上才算过这一关)

我注册了 Supabase,建好了一个项目,控制台能打开
我能指出 anon(🟢 可公开)和 service_role(🔴 绝不进前端)两把钥匙的区别,并知道今天只用 anon
我的项目里有了 .env(含地址+anon 钥匙)和 .env.example(空白模板),且 .env 已被 .gitignore 保护、不会上传 GitHub
自检页显示绿色「灵脉已通」,页面上出现了一句来自云端的话
我知道「本地 .env 和线上平台是两处同一套秘密」,也知道「免费项目 7 天不用会暂停、控制台一点就能唤醒」

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上多了一条「能连云端」的灵脉——还有一件能反复用的随身物料:以后每接一个 Supabase 项目,都照搬这一套。
  • .env.example 模板 — 接 Supabase 的「传家底单」空白模板,填空即用。文件:../takeaways/05-env与钥匙速查.md。怎么用:复制其中那段保存成项目根目录的 .env.example,真钥匙永远只填进 .env(不上传),清单留在 .env.example(可上传)。
  • 两把钥匙红绿速查表 — 🟢 anon 可公开 / 🔴 service_role 禁前端,一张表读两遍刻进脑子。文件:../takeaways/05-env与钥匙速查.md。怎么用:每次进控制台拿钥匙前对照一眼,确认复制的是 anon、不是 service_role,再贴进 .env;截图存手机,下个新项目直接对照。
  • Supabase 连接自检页代码片段 — 一段纯前端、复制即用的自检页,连上显示绿色「灵脉已通」、连不上指名道姓告诉你断在哪、永不空白。文件:../takeaways/05-env与钥匙速查.md。怎么用:保存成 check.html、填好顶部两行、浏览器打开即可;留作对照法器版自检页的兜底,用完记得删或加进 .gitignore
💡 可分享:学接数据库,先记死这张「两把钥匙红绿速查图」——🟢 anon 公开钥匙随便给人看,🔴 service_role 总钥匙烂在丹田也不外露,泄了它整个站一夜被掏空。

🌱 加练(选做)+ 下一课

加练:让法器给你讲解一遍它写的自检页——「请用大白话给我讲讲这个自检页是怎么连上 Supabase 的,哪一行在读 .env、哪一行在向云端发请求。」你不用看懂每个字,但听它讲一遍,下次自检页报红你会更有底。

下一课预告:管道通了,可你的站还不认识任何人——谁来了它都一视同仁,没有「注册」「登录」这回事。

下一课是本阶的大关(★渡劫课):你会让站真正长出邮箱+密码的注册登录,建第一张真表 profiles(名册),并让「有人注册就自动给他立一份档案」。

🏆 下一课结束,你将拿到本门课的第一张大里程碑:一个陌生人能注册、能登录的真站。从此它不再是死页面——它认得人了。
🔖 小提示:今天接通了灵脉、改动了项目,下一课开头我们会照例让法器顺手「存个档」(git 提交)——改坏了不怕,一句话回到这个境界。
💡 本课信息密度较大(注册 + 两把钥匙 + 连接 + 自检 + 读数据)。如果你做到一半觉得满了,完全可以分两次:第一次只做到第三步(注册 + 搞懂两把钥匙 + 建好 .env),歇一口气;第二次再做第四步往后(连接 + 自检页 + 读回云端第一句话)。分两次做完全不丢分——稳比快重要。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 6 课

身份初成 · 注册登录真生效

会员专属

# 第 6 课 · 身份初成 · 注册登录真生效

课头

🪷 境界:筑基初期 · 立地基六层 · ★阶段渡劫①
预计用时:120 分钟(这是一道大关,留足时间,别赶)
🏆 本课产出:你的站真的能注册、能登录、能登出了——注册后系统自动给你建一行「名册」,登录后页面写着「欢迎,你的名字」,关掉浏览器重开它还认得你。这是你第一座能登录的真站
🚫 今天不做:不做付费墙、不做会员解锁、不分免费/会员内容(那是第 11–13 课)。今天只解决一件事——让陌生人能注册成你的用户
📜 五课灵脉已通,云端能回你一句话。可那座站还认不得人——谁来都是过客。今日筑「身份」之基:立一本名册,凡入我门者,自落一籍;再设一道认主阵,去而复返,门自识君。此乃筑基第一道大劫——身份初成,劫过则真站立。
📷 修炼笔记卷轴位(待补):名册玉简自展 · 一道身份令悬于门楣 · 修士离去复返门光自亮。

这一课,你在干一件什么事

到上一课为止,你的站已经接通了云端数据库(Supabase),网页能显示云端的一句话。但它还有个大问题:它不认得人。谁打开都一样,没有「你」和「别人」的区别。

一个「注册才能进、付费才能解锁」的会员站,第一块基石就是身份:得让陌生人能注册成你的用户,能登录进来,能登出离开;登录后页面认得他、叫得出他的名字;他关掉浏览器明天再来,不用重新登录

今天你要给站加上这三样东西:

  • 真·注册 / 登录 / 登出——用「邮箱 + 密码」这条最稳的主路(不用微信、不用手机验证码,那些今天都不碰)。
  • 一本「名册」(profiles 表)+ 自动建档——每个注册的人,系统自动给他在名册里建一行,记下他的邮箱、昵称,还有一个先关着的付费开关 is_member(默认 false)。这个开关今天只是先埋下,第 11–13 课才会用它来分会员、立付费墙。
  • 会话(session)——讲透「为什么关掉浏览器重开它还认得你」。
💡 为什么这是一道「大关」(渡劫)? 因为注册登录牵扯到邮件确认、密码、数据库自动建档好几个环节,中间很可能崩一两次——这是预期之内的剧情,不是你笨。本课每个容易崩的点,我都给你写好了「预设突破」通关路径:90% 的人都在 20 分钟内过了这道劫。你跟着走就行。

主线步骤(跟着做,每步都有「看到什么算成功」)

🔧 法器约定(和前几课一样):以下凡是要「让法器干活」的地方,你都是把咒语卡里的整段话复制给 Codex,由它去改你的项目文件、自己跑起来。你不需要自己敲任何裸命令。 法器每做完一件关键事,会用人话回你一句「我刚干了啥、改了哪个文件、你怎么验证」——看得懂最好,看不懂直接看下一步的「✅看到什么算成功」即可。

第一步 · 在 Supabase 后台打开「邮箱+密码」登录方式

先去云端把登录方式的开关拨对,再让法器写前端,顺序不能反(不然法器写好了也登不进去)。

打开浏览器,登录你第 5 课注册的 Supabase,进你的项目。左边找到 Authentication(认证)→ Providers(登录方式)Sign In / Providers,确认 Email(邮箱) 这一项是打开(Enabled)的。

同一块区域里,通常还有一个开关叫 Confirm email(确认邮箱)Email confirmation本课先把它关掉(设为 Disabled / 关闭)——这样注册后不用去邮箱点确认链接就能直接登录,把这道大关的崩溃点先拆掉一个。

看到什么算成功:你在 Authentication 的设置里看到 Email 登录方式是开启的,并且 Confirm email(确认邮箱)是关闭的。改完记得点保存(如果页面要求保存)。
💡 为什么先关「确认邮箱」? 开着它,注册后系统会先发一封确认邮件,你得去邮箱点链接才算注册成功——新手最常卡在「没收到邮件 / 邮件进垃圾箱 / 点了链接跳转报错」。先关掉,今天先把注册登录跑通、拿到里程碑;想要「真发确认邮件」更安全的玩法,本课最后的「🌱加练」会告诉你怎么开回来。

第二步 · 把任务交给法器:写注册 / 登录 / 登出

现在请出本课主力法器 Codex。把下面 📜咒语卡里的【认主咒·写登录】整段复制给它(记得先把方括号里的内容换成你自己的)。

法器会去改你的项目:加上一个注册框、一个登录框、一个登出按钮,并把它们和 Supabase 的认证接起来。它跑完后,会用人话回你一句类似:「我在你的项目里加了 auth.js(管登录登出)和登录/注册界面,改了首页让它显示登录状态,你现在可以在浏览器里试着注册一个账号了。」

看到什么算成功:法器回复完成,并告诉你站已经能在本地打开(通常是一个 http://localhost:5173 之类的本地地址,它会帮你跑起来)。你在浏览器打开这个本地地址,看到了注册 / 登录的输入框
🌿 认主阵成,门楣已悬识人之光——只是尚未有人入籍。

第三步 · 注册你自己的第一个账号

在那个本地打开的站里,找到注册(Sign up / 注册)入口,用一个你自己的真实邮箱 + 一个你记得住的密码注册。密码建议至少 6 位(Supabase 默认最低 6 位)。

看到什么算成功:点注册后,页面没有报错,提示你注册成功(因为第一步关了确认邮箱,所以你应该能直接进入登录态,或被要求登录一次)。

📷 截图位:注册成功的那一刻。
💡 把这个邮箱和密码记到备忘录里。这是你这座站的第一个用户,也是以后你以「站主」身份登录、发布内容(第 7–8 课)要用的账号。

第四步 · 登录,看到「欢迎,你的名字」

用刚注册的邮箱 + 密码登录。登录成功后,首页应该不再显示「请登录」,而是显示一句「欢迎,xxx」(xxx 是你的昵称或邮箱),旁边有个登出按钮。

如果你的页面还没显示欢迎语,把 📜咒语卡里的【显欢迎咒】复制给法器,让它把「登录后显示欢迎 + 登出按钮」补上。

看到什么算成功:登录后,页面顶部(或某个显眼位置)写着「欢迎,你的名字 / 你的邮箱」,并且有一个登出按钮;点登出后,又回到「请登录」的状态。

📷 截图位:第一次登录成功 · 页面显示「欢迎,你的名字」。
🌿 修士入门,门已识君,自此去留有名。

第五步 · 显式建「名册」profiles 表 + 注册自动建档

这是本课的技术核心,也是 spec 里点名要做的事。

现在的状况是:你注册的账号信息,其实只存在 Supabase 一个系统内置、你不能直接改的隐藏表(auth.users)里。你自己的站要用的资料——昵称、是不是会员、什么时候成为会员——得有一张你自己能管的表来装。这张表就叫 profiles(名册)

我们还要做一件聪明事:每当有人注册,系统自动在 profiles 里给他建一行(这叫「注册自动建档触发器」)。这样你不用每次手动加,名册永远和注册用户对得上。

把 📜咒语卡里的【立名册咒】整段复制给 Codex。法器会:

  • 建一张 profiles 表,包含这些列:id(对应用户)、email(邮箱)、nickname(昵称)、is_member(是否会员,默认 false)member_since(成为会员时间)、created_at(建档时间);
  • 装一个触发器:以后任何人注册,自动往 profiles 写入一行,is_member 默认就是 false(不是会员)

法器跑完,会用人话回你一句类似:「我在你的数据库里建好了 profiles 名册表,并装上了自动建档触发器——以后每注册一个用户,名册自动多一行,默认不是会员。这个 is_member 开关现在对所有人都是关着的,第 11 课起才会用它分会员。」

看到什么算成功:回到 Supabase 后台,左边进 Table Editor(表编辑器),你看到多了一张表叫 profiles,里面有一行——就是你自己email 是你注册的邮箱,is_member 这一列是 false(或不打勾)

📷 截图位:profiles 名册里多出你这一行(is_member = false)。
💡 为什么 is_member 现在全是 false? 因为「会员」是要付费才解锁的。今天所有人都只是「注册用户、还不是会员」——这完全正常。这个开关就是你整座付费墙的总闸,第 11 课给它通电、第 13 课让它「付钱才翻成 true」。今天先把闸装好、确认它默认是关的,就够了。
⚠️ 如果第五步建表时报「已存在 / 触发器冲突」之类的错,别慌——这是渡劫的常见崩溃点,直接看下面「🆘卡住了」的「现象:建 profiles 表/触发器报错」那一条,照急救话术发给法器即可。

第六步 · 讲透「会话」:为什么重开浏览器它还认得你(亲手验证)

现在做一个小实验:完全关掉浏览器(不是关标签页,是整个关掉),再重新打开,访问你那个本地站。

你会发现——它还认得你,不用重新登录(如果你刚才没点登出的话)。

这背后的东西叫 会话(session)。用人话讲:你登录成功的那一刻,Supabase 给了你浏览器一张「门禁卡」,悄悄存在浏览器本地。以后你再打开站,浏览器把这张卡亮一下,站就认得你了——不用每次重输密码。这张卡有有效期,过期了或你点了「登出」(等于交回门禁卡),才需要重新登录。

看到什么算成功:你整个关掉浏览器再重开,访问本地站,它仍然显示「欢迎,你的名字」——没让你重新登录。然后你点一次登出,再刷新,它就回到「请登录」状态了。这一进一出,证明会话确实在工作

📷 截图位:关掉浏览器重开 · 它还认得你(会话还在)。
💡 为什么要懂这个? 因为以后只要出现「怎么老让我重新登录 / 登录完一刷新又掉了」这类问题,你就知道是会话出了岔子——本课「🆘卡住了」里专门有这一条急救。懂了「门禁卡」这个比喻,你排这类错就不慌。

第七步 · 部署上线,拿到里程碑①(能登录注册的真站)

本地跑通了,最后一步:把这个能登录的站推到线上,让它变成真·能被陌生人注册的站。

你第 1 课已经会用网页拖拽部署到 Cloudflare Pages 了。本课同样请法器帮你打包好,再用你熟悉的方式部署(连仓自动部署留到第 14 课,今天还用第 1 课那套最省事的方式)。把 📜咒语卡里的【上线咒】复制给法器,它会帮你把项目打包成可部署的成品,并告诉你「传哪个文件夹上去」。

⚠️ 上线后如果打开是白屏——这几乎一定是「环境变量没填」:你第 5 课在本地 .env 里填的那两把 Supabase 钥匙,线上平台也要再填一遍(同一套秘密、两处都要填,这就是第 5 课埋的「env 双轨」)。具体照「🆘卡住了」的「现象:上线后白屏」那条做。第 14 课会把这件事讲到底,今天先知道「白屏 = 99% 是钥匙没填到线上」。
看到什么算成功:你拿到一个线上链接,用它打开站,能注册一个新账号、登录、看到欢迎语、登出——整套都在线上跑通。回到 Supabase 后台,profiles 名册里能看到刚注册的新行。

📷 截图位:里程碑① · 能登录注册的真站(登录欢迎页 + 你的产品)。
🎉 里程碑①达成 · 第一座能登录的真站:「我做的站,现在真的能注册、能登录了——它认得人了。」这是筑基课的第一道阶段渡劫闸门,你过了。

📜 咒语卡

咒语 = 可以一字不改、整段复制发给法器(Codex)的提示词。方括号 [ ] 里的内容要换成你自己的,其余照抄。

【认主咒 · 写登录】· 让法器给站加注册/登录/登出

我在做一个用 Supabase 做后端的会员制网站,前端是 Vite + 原生 JS。 我已经在本地 .env 里配好了 Supabase 的两把钥匙(URL 和 anon key),第 5 课接通过云端、能读到数据。 现在请你帮我加「邮箱 + 密码」的注册、登录、登出功能,要求: 1. 用 Supabase 自带的 Auth(邮箱+密码),不要自己写后端、不要接微信/手机验证码; 2. 页面上要有:注册框、登录框、一个登出按钮; 3. 未登录时显示登录/注册入口,登录后隐藏它们; 4. 改完后把项目在本地跑起来,告诉我本地访问地址; 5. 用一句大白话告诉我:你改了哪几个文件、我该怎么在浏览器里试。 请小步改、不要一次重写整个项目,先把登录跑通。

【立名册咒】· 建 profiles 表 + 注册自动建档触发器

请帮我在 Supabase 里建一张叫 profiles 的表,作为我网站的「用户名册」,要求: 1. 字段:id(关联 auth.users 的用户 id,一对一)、email、nickname(昵称)、 is_member(布尔,是否会员,默认 false)、member_since(成为会员的时间,可空)、 created_at(建档时间,默认当前时间); 2. 加一个触发器:每当有新用户注册(auth.users 新增一行), 自动在 profiles 里插入对应的一行,is_member 默认 false; 3. nickname 如果注册时没填,就先用邮箱 @ 前面那一段代替; 4. 做完后用大白话告诉我:这张表是干嘛的、is_member 默认值是什么、我怎么在 Supabase 后台看到它。 注意:这一课先不做任何「会员才能看」的读取限制,is_member 只是先建好、默认 false, 以后第 11 课起才会用它。请不要现在就加付费/会员的读取策略。
填空说明:上面两条不用填方括号,直接整段复制即可。

【显欢迎咒】· 登录后显示「欢迎,xxx」(第四步若没自动出现欢迎语时用)

登录成功后,请在页面顶部显示「欢迎,[用户昵称或邮箱]」,旁边放一个登出按钮。 昵称从我的 profiles 表的 nickname 取;如果取不到,就显示邮箱。 登出按钮点一下就退出登录、回到「请登录」的状态。 改完告诉我怎么验证。

【上线咒】· 打包部署上线

请帮我把这个项目打包成可以部署的成品(生产版本), 并告诉我:生成在哪个文件夹、我用网页拖拽方式部署到 Cloudflare Pages 时该传哪个文件夹。 另外提醒我:上线后需要在平台后台填哪些环境变量(就是我本地 .env 里的那两把 Supabase 钥匙), 否则线上会白屏。

🆘 卡住了?(按你看到的现象找)

💡 先稳住:这一课是阶段渡劫,下面每条都是预设突破——你看到的报错,90% 的筑基修士在 20 分钟内解决了,这是你的通关路线。照着对应那条的「急救话术」发给法器即可,别自己瞎改。

现象:注册/登录点下去,提示「Email not confirmed(邮箱未确认)」或要我去邮箱点链接

先检查:是不是第一步没把「Confirm email(确认邮箱)」关掉?本课为了先跑通,这个开关要设为关闭。
急救话术(照做):回 Supabase → Authentication → Providers/Settings,把 Confirm email / Email confirmation 关掉(Disabled)并保存,然后重新注册一个账号试。(想真发确认邮件是「🌱加练」的内容,今天先关。)

现象:登录时提示「Invalid login credentials(账号或密码错误)」,但我确定没输错

先检查:① 是不是注册用的邮箱/密码和现在登录的不是同一个(大小写、空格都算);② 密码是不是少于 6 位导致当初其实没注册成功。
急救话术:先用「忘记密码 / 重置」或干脆换一个新邮箱重新注册一遍(密码 6 位以上),用刚注册的这套登。还不行就把【报错三句话】发给法器。

现象:建 profiles 表 / 触发器时报错(已存在、触发器冲突、权限不足等)

先检查:是不是之前已经建过一半、留下了半成品。这是渡劫最常见的崩溃点,别手动去删,先让法器收拾
急救话术(照发给 Codex):
``
我刚才执行你给的建 profiles 表和触发器的步骤,报了这个错:[把完整报错粘到这里]。
请你检查是不是表或触发器已经部分存在,
用「如果不存在才创建」的安全写法重做一遍,不要丢掉我已经注册的用户,
做完告诉我现在 profiles 表和触发器都正常了没有。
``

现象:登录后页面没显示「欢迎」,或登录完一刷新又变回「请登录」(会话掉了)

先检查:这通常是「会话(门禁卡)」没被正确读取或被清掉了。
急救话术(照发给 Codex):
``
我登录成功后,页面没显示欢迎语(或者一刷新就退回未登录状态)。
请检查是不是页面加载时没有读取 Supabase 当前会话(session)、
或没有监听登录状态变化。请修好「刷新/重开后仍保持登录」,并告诉我怎么验证。
``

现象:上线后打开是一片白屏 / 报「连不上数据库」

先检查:99% 是环境变量没填到线上——你本地 .env 里那两把 Supabase 钥匙,线上平台后台也要再填一遍(同一套秘密、两处都要填,这是第 5 课的「env 双轨」)。
急救话术:去 Cloudflare Pages 项目的 Settings → Environment variables(环境变量),把本地 .env 里的那两把钥匙(URL 和 anon key)原样填进去,保存后重新部署一次。(第 14 课会把这套讲到底。)
💬 万能急救 · 报错三句话(任何卡点都能用,记下它):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好,整段发给法器或答疑处,比你瞎描述管用十倍。例:「我刚点了注册按钮 / 现在屏幕显示红字 Invalid login credentials / 我希望能注册成功并登录进去。」

✅ 出关自查(全部勾上才算过这道渡劫)

我能在线上链接注册一个新账号,并登录进去
登录后页面显示「欢迎,我的名字 / 邮箱」,并且有个登出按钮,点了能退出
Supabase 的 profiles 名册表里有我这一行,is_memberfalse
关掉浏览器重开,它还认得我(会话还在);点登出后才回到「请登录」
我能用一句话讲清「会话」是啥——登录后浏览器拿到一张门禁卡,下次自动认我,登出=交回卡

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上多了「能登录」这块功能——还有一件能反复用的东西:一套「用户名册 + 邮箱密码登录」的成品模板,以后做任何会员站都能直接搬。

  • profiles 名册表 + 注册自动建档触发器 SQL + 邮箱密码注册登录登出 代码模板 — 一段建「用户名册」表的 SQL(含「谁注册就自动建档」的触发器)+ 一套注册/登录/登出/显欢迎的前端代码。文件:../takeaways/06-profiles与登录模板.md。怎么用:复制即用(SQL 贴进 Supabase 跑一次,代码接到你的按钮上)+ 填空即用(只需填两把 Supabase 钥匙)。最省事的办法是把这个文件整个发给法器,让它照着模板建好表、接好登录——你看得懂大意即可,不用自己敲。
💡 可分享:「今天给我的站装上了真·身份系统——能注册、能登录、关掉浏览器重开还认得我。这套『用户名册 + 邮箱密码登录』的模板我存进锦囊袋了,下个站直接搬。」

🌱 加练(选做)+ 下一课

加练 1 · 让别人来注册一个:把你的线上链接发给一个朋友,让他用自己的邮箱注册。然后你去 Supabase 的 profiles 名册里看——多了一行陌生人。第一次有「不是我」的真实用户进你的站,那种感觉很不一样。

加练 2 · 把「确认邮箱」开回来(进阶安全玩法):今天为了跑通,我们关了「确认邮箱」。等你想让注册更正规(防止有人乱填别人邮箱),可以回 Supabase → Authentication 把 Confirm email 打开——之后注册就会先发一封确认邮件,点了链接才算注册成功。

🔖 提醒:开了「确认邮箱」后,最常见的卡点是收不到邮件 / 邮件进了垃圾箱。开之前先想好:你(和你的用户)愿意多走这一步吗?想稳就先别开,等上线拉真人(第 15 课)前再决定。

下一课预告:你的站现在认得人了,但它还没有东西可看——注册进来空荡荡的。

下一课「立库藏珍 · 为产品造一张表」,我们给站造第二张表 contents(藏经阁):这是你真正要卖的内容住的地方。从下一课起,你这座站才开始有货

🔖 小提示:这道渡劫过了,记得让法器顺手存个档(git)——第 4 课你已经学过「改坏了一句话就能回到上一个境界」。把「身份初成」这个状态存下来,后面就算改崩也能退回这个能登录的真站。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 7 课

立库藏珍 · 造第一张表

会员专属

# 第 7 课 · 立库藏珍 · 为产品造一张表

课头

🪷 境界:筑基中期 · 通经脉一层
预计用时:75 分钟
🏆 本课产出:在 Supabase 为你的产品建好藏经阁——一张专门装内容的 contents 表(站主一人发布、字段一栏看清),并把这张表的结构原样交底给法器,从此「控制台」和「代码」用的是同一份说明书
🚫 今天不做:今天不写前端页面不做付费墙不上锁读权限(读权限的渡劫留到第 10 课)。今天只造一个能装东西的库,并让站主自己能往里放、能改、能删。

🧭 你的位置:你现在进入四层能力轴第二层「读写」,本阶练的是让产品能存能改数据;驭器手法见 御剑心法
📜 身份已成(第 6 课你拿到了能登录的真站),可你这座站还空着——它认得人,却没有可藏之珍。今日入通经脉第一层:开一座藏经阁,专为你的产品收纳心法典籍。藏经阁有铁律——藏品由阁主一人增删,外人动不得;阁中每一格的形制,须有一份图纸存档,免得日后「阁里摆的」与「图纸画的」两不相认。
📷 修炼笔记卷轴位(待补):通经脉初成 · 藏经阁开门 · 阁主持册立卷、一格一格定形制。

这一课,你在干一件什么事

第 6 课你给站装上了「身份」——能注册、能登录,后台 profiles 表里每注册一个人就自动多一行。但你的站现在还没有任何「内容」:用户登进来,看到的是一片空。

筑基中期(通经脉)这几课,就是把「内容」这条经脉打通。今天是第一步,也是最关键的一步:为你的产品造一张专门装内容的表

这张表叫 contents(你可以理解成你这座站的「藏经阁」)。你第 1 课定的主题——面试题库、辅食食谱、AI 咒语库……——里的每一条,将来都是这张表里的一行

💡 为什么内容要单独建一张表、而不是直接堆在网页里? 因为堆在网页里的内容是「写死的」,改一条要改代码、要重新部署。放进数据库表里,内容就活了:将来你在后台加一条、改一条、删一条,前端网页自动跟着变——这正是「会呼吸的真站」和「死页面」的根本区别。

今天有一个容易被忽略、但极其重要的动作:表建好后,你要把这张表的结构(有哪些列、每列是什么类型)原样交给法器存进项目。这一步叫「交底」。它解决一个会反复坑新手的坑——控制台里你建的列名,和代码里法器写的列名对不上(比如你建的是 title,法器却猜成 name,结果页面一片空白还查不出原因)。交底之后,「控制台」和「代码」共用同一份说明书,这类「列名对不上」的鬼故事就基本绝迹。

💡 关于「站主」这个词:你这座站的内容,是你一个人发布的(你就是站主)。用户能看、付费能解锁,但不能往里加内容。所以这张表的规矩是:只有站主能增、删、改。这跟「每个用户各发各的朋友圈」不是一回事——你做的是一座由你主理的内容站。这一点会贯穿后面所有课,今天先记住即可。

主线步骤(跟着做,每步都有「看到什么算成功」)

🧭 开工前对一下位置:本课全程在两个地方之间切换——① 浏览器里的 Supabase 控制台(你第 5 课注册、第 6 课建过 profiles 表的那个),② 电脑上你的项目文件夹 + 法器(Codex)。建议把 Supabase 控制台和法器窗口都打开备用。

第一步 · 回到 Supabase 的 SQL 编辑器

打开浏览器,进入 Supabase 控制台,选中你这门课用的那个项目(就是第 6 课建 profiles 表的同一个项目,别新建项目)。

在左侧菜单找到 SQL Editor(图标像一段代码 </>,中文界面叫「SQL 编辑器」),点进去,点 New query / 新建查询,你会得到一个空白的输入框。

看到什么算成功:屏幕中央出现一个大的空白输入框,右上角有一个 Run / 运行 按钮。这就是你「下指令建表」的地方。

💡 为什么又是 SQL 编辑器、不是点鼠标建? 第 6 课你已经在这里建过 profiles 表了,这次轻车熟路。建表的指令我们让法器替你生成(下一步),你只负责粘贴和点运行——你不用自己写一个字的代码

第二步 · 让法器替你写「建藏经阁」的指令

切到法器(Codex)窗口,把下面 📜 咒语卡①「建库咒」 整段发给它(记得先把 【...】 里换成你第 1 课定的主题)。

法器会回给你一段 SQL 建表指令(一段以 create table 开头的文字)。你不用读懂它,但请确认它末尾附了一句人话说明——告诉你这张表有哪些列、每列装什么(这是法器的「透明层」,看不懂修仙没关系,但要看得懂它干了啥)。

看到什么算成功:法器回了你两样东西——① 一段 create table ... 的 SQL(在一个带「复制」按钮的代码框里);② 一段大白话,逐列解释这张表装什么(比如「title 是标题、游客也能看;body 是正文、将来只有会员能看」)。

💡 如果法器只给了 SQL、没给人话说明,就回它一句:「请再用大白话逐列解释一遍这张表,每列装什么、谁能看。」——透明层是你的权利,别省。

第三步 · 把建表指令粘进 Supabase 运行

回到第一步那个 Supabase 的 SQL 编辑器空白框,把法器给你的那段 create table ... SQL 整段复制粘贴进去,点右上角 Run / 运行

看到什么算成功:底部出现绿色的 Success / 成功 提示(或「Success. No rows returned」之类)。没有红色报错就是成功了。

📷 截图位:(下一步建好后一起截)。

🆘 如果出现红色报错,别慌——跳到本课最后的「🆘 卡住了」,按你看到的现象对号入座,多半是「表已存在」或「字段类型」这类小问题,有现成话术。

第四步 · 亲眼确认藏经阁建好了

在 Supabase 左侧菜单点 Table Editor / 表编辑器,你会看到表列表里多出了一张 contents。点开它,上方会一列一列列出这张表的「格子」:idtitlesummarybodycoveris_freesort_ordercreated_bycreated_at

看到什么算成功:表列表里有了 contents,点开能看到上面这一排列名(顺序可能略有不同,但 titlebodyis_freecreated_by 这几个关键列必须在)。表里现在还没有任何数据行,是空的——这是对的。

📷 截图位:Supabase 里 contents 表建成 · 字段一栏看清。
🌿 藏经阁已立。九格形制各有所司:title 立于阁门、人皆可见;body 深藏阁内、留待有缘(会员);is_free 是那道试读与秘藏的分界线——今日只立其形,启用留待后课。
📌 逐列在干嘛(瞄一眼就好,无需背):
- title 标题 / summary 摘要(试读用)/ body 正文(将来只有会员能看全)
- cover 封面图链接 / is_free 是否免费试读(先建着,第 11 课才真正启用
- sort_order 排序用的数字 / created_at 自动记录创建时间
- created_by 记录是谁建的——默认就填当前登录的站主,这是今天的另一个主角(下一步细说)

第五步 · 给藏经阁立两条规矩:「阁主才能动」+「先开着让你自测」

这一步是今天最有产品味的一步。你要给这张表立两条规矩(同样让法器替你写指令,你只负责粘贴运行):

  • 写的规矩(核心):往这张表里新增、修改、删除内容,只有站主自己能做——而且新增时自动盖上「这是站主建的」的印章(这就是 created_by 默认填当前登录用户)。
  • 读的规矩(临时):今天先让登录用户都能读,好让你下一课(第 8 课)能把刚写进去的内容显示在页面上、做自测。

📜 咒语卡②「立规咒」 整段发给法器,它会给你第二段 SQL(开启行级安全 + 写策略锁创建者 + 一条临时读策略)。和第三步一样:复制 → 粘进 SQL 编辑器 → Run。

看到什么算成功:又一次绿色 Success。回到 Table Editor 点开 contents 表,它的名字旁边或设置里会显示 RLS enabled / 行级安全已启用(一个小盾牌或「Enable RLS」已变成已开启状态)。

💡 说人话,这两条规矩干了啥:从现在起,别人就算偷到你的接口,也往你的藏经阁里塞不进东西、改不了你的内容——写权限被牢牢锁在站主手里。这是「内容站由站主主理」的地基。
⚠️ 重要 · 别被吓到(这是预期内的):第 2 条「读的规矩」今天是临时开着的。到第 10 课(行级安全渡劫),你会把「读」收紧成第一道门——免费内容(is_free)谁都能读、非免费内容先一律暂挡(那时站上还没有「会员」这个概念,所以先一刀切挡住)。再往后第 11、12 课加上「会员」身份,才把这道门扩成「免费谁都能读、会员能读全部」。每一步都是在今天这道「读门」上继续加固,不是推翻重来。 而「写的规矩(站主才能动)」今天就锁死,以后一直不变。
🌿 阁规初定:藏品由阁主一人增删,此为铁律,永不更易;至于何人可阅、何人止于阁门,今日暂只虚掩,待第十课「各守洞府」之劫,再亲手落锁。

第六步 · 站主亲手放一条内容进去(自测)

光建好空库不踏实,亲手放一条进去验一下。回到 Table Editor → contents,点 Insert / 插入 → Insert row / 插入一行,最少填这几格:

  • title:随便写一条,比如 测试内容·我的第一条
  • is_free:勾上(或填 true)——当作一条免费试读
  • 其余能留空的先留空(created_atid 这类会自动生成)
📌 关于 created_by 怎么填:理想情况它会自动填上当前登录你的那个用户 ID(这就是「默认 auth.uid()」的效果)。但在控制台手动插入时,你这会儿的「登录身份」可能和网页前端不同——如果它要求你填 created_by 而你不知道填啥,本步可以先跳过这条手填自测,等第 8 课用前端页面、以真正登录的站主身份写入时,created_by 会自动盖章。控制台手填只是想让你眼见为实,不是必须项。

点保存。

看到什么算成功contents 表里出现了一行真实数据title 那一格是你刚写的字,created_at 自动填了当前时间。你的藏经阁,有了第一件藏品。

📷 截图位:站主账号成功写入一条测试内容。

🆘 如果保存时报错说 created_by 不能为空 / 违反策略之类——这正是「写规矩」在生效(它要确认是站主在写)。按上面📌的提示先跳过控制台手填,留到第 8 课前端写入即可,不影响今天过关

第七步 · 交底:把表结构存进项目(今天的关键动作,别省)

这一步防的是新手最常踩、又最难查的坑:控制台里你建的列名,和代码里法器写的列名对不上

做法很简单:把 📜 咒语卡③「交底咒」 整段发给法器,让它把这张 contents 表的结构原样写成一份说明文件,存进你的项目文件夹里(文件名通常是 schema.sqldocs/数据库表结构.md 之类,法器会替你建文件、替你写、替你存,你不动手)。

看到什么算成功:法器回话告诉你「已在项目里建好一份表结构说明文件」,并用一句人话复述这张表有哪些列(这是透明层)。你打开项目文件夹,能看到多出来这么一个文件。

📷 截图位:表结构交底给法器 · 项目里多出一份 schema 单。
📷 截图位:法器用人话复述这张表(透明层)。
💡 为什么这一步价值千金:从这一刻起,法器写任何跟内容相关的代码时,都会先看这份说明书,照着 titlebodyis_free 这些真实列名来写,不再瞎猜。你和法器从此「看同一张图纸」——这就是专业开发里说的「单一事实源」。第 8、9 课写内容页面时,你会真切感到它「不犯低级错」了。
🌿 阁有图纸,则形神不二。自此控制台所立、代码所书,皆出同一卷册——「单一事实源」既定,日后纵有千行代码,也不致与阁中形制相悖。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器(Codex)的提示词。【...】 是要你替换的填空,其余照抄。

【建库咒】· 让法器写出「建藏经阁」的指令(对应第二步)

我在做一个会员制内容站,主题是【在此填你第一步定的主题,例如:宝妈辅食食谱】。 现在要在 Supabase(PostgreSQL)里建一张装内容的表,表名 contents,平台内容模型—— 内容只由我(站主)一个人发布,普通用户能看、不能发。 请帮我生成一段 create table 的 SQL,包含这些列: - id:主键,自动生成 - title:标题,文字 - summary:摘要 / 试读片段,文字,可空 - body:正文,文字,可空 - cover:封面图链接,文字,可空 - is_free:是否免费试读,true/false,默认 false - sort_order:排序用的整数,默认 0 - created_by:记录是谁建的,关联登录用户的 id,默认取当前登录用户(auth.uid()) - created_at:创建时间,自动填当前时间 要求: 1. 先只给我这一段建表 SQL,放在可复制的代码框里; 2. 然后用大白话逐列解释这张表每列装什么、谁能看; 3. 暂时不要写任何「读/写权限(RLS 策略)」,那一步我下一条咒语再让你写。

【立规咒】· 让法器写出「阁主才能动 + 临时可读」的指令(对应第五步)

接着上一步的 contents 表,请帮我生成第二段 SQL,做两件事: 1. 给 contents 表开启行级安全(RLS); 2. 写「写策略」:只有 created_by = 当前登录用户(auth.uid())的人,才能新增/修改/删除—— 也就是只有站主本人能动这张表的内容; 3. 写一条「临时读策略」:暂时允许所有已登录用户读取这张表的全部内容, 方便我下一课把内容显示到页面上自测。 请说明:这条「临时读策略」我打算在后面的「行级安全课」先收紧成 「免费内容谁都能读、非免费内容先一律暂挡」,再往后加上会员身份后才扩成 「免费谁都能读、会员能读全部」,所以现在先这样、后面会逐步加固,这是预期内的。 同样:先给可复制的 SQL,再用大白话解释这两条规矩分别拦住了谁、放行了谁。

【交底咒】· 让法器把表结构存进项目(单一事实源)(对应第七步)

我刚在 Supabase 里建好了 contents 表,结构就是你上面那段 create table 的样子。 请你把这张表的结构原样整理成一份说明文件,存进我当前项目的文件夹里 (文件名你来定,比如 schema.sql 或 docs/数据库表结构.md 都行)。 要求: 1. 文件里列清楚每一列的列名、类型、是否可空、默认值,和一句中文用途说明; 2. 以后你给我写任何跟内容相关的代码,都要先以这份文件为准,按真实列名来写,不要自己猜列名; 3. 建好文件后,用一句话告诉我文件存在哪、这张表大概长什么样。
填空说明:三张卡里唯一要改的是【建库咒】里的主题。其余整段照抄。三条咒语按顺序发(建库 → 立规 → 交底),别跳。

🆘 卡住了?(按你看到的现象找)

现象:粘进 SQL 编辑器点 Run,红字报错里有 already exists(已存在)

先检查:是不是这张表(或某条策略)你之前已经建过一次了——比如咒语发了两遍、SQL 跑了两遍。
急救话术(照做):把这句发给法器——「我跑你给的建表 SQL,报错说 contents already exists。我想保留已经建好的表,只确认它字段对不对就行。请告诉我:怎么在不删表、不丢数据的前提下,检查现有 contents 表的列是否和你设计的一致?」按它给的检查指令做即可,别急着删表重建

现象:报错里有 typecolumnsyntax 这类词(字段类型 / 列 / 语法)

先检查:多半是法器生成的某一列类型写法和你的 Supabase 版本对不上,或粘贴时漏了/多了一段。
急救话术:用报错三句话原样回给法器——「我刚做了什么:把你给的建 contents 表 SQL 粘进 Supabase SQL 编辑器点了 Run。我现在看到什么:(把整段红色报错复制粘贴给它)。我希望它变成什么:成功建好这张表。请帮我改对这段 SQL 再给我一版完整可复制的。」拿到新版重跑。

现象:建表成功,但站主手动插入一行时,报错 created_by 不能为空 / 违反策略(violates row-level security / not-null)

先检查:这其实是「写规矩」在正常生效——它要确认是登录的站主在写,而控制台手动插入时身份可能对不上。
急救话术:这不是 bug,是安全在起作用。本步的控制台手填只是想让你眼见为实,可以直接跳过——等第 8 课用前端页面、以真正登录的站主身份写入,created_by 会自动盖章、一切正常。今天不影响过关。

现象:交底时,法器说「不知道你项目在哪 / 找不到文件夹」

先检查:法器(Codex)当前是不是在你这个产品的项目文件夹里启动的?(就是第 3、4 课让它接管、立 git 档的那个文件夹。)
急救话术:把这句发给它——「请先确认你现在的工作目录是不是我的项目文件夹,把当前目录告诉我。如果不对,我会重新在项目文件夹里打开你。」确认在对的文件夹里,再重发【交底咒】。
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好,连同红色报错整段复制,发给法器。法器最怕你只说「它报错了」,最爱你把这三句和原文给全——给全了,它十有八九一次就帮你改对。

✅ 出关自查(全部勾上才算过这一关)

我在 Supabase 里建好了 contents 表,点开能看到 titlebodyis_freecreated_by 这几个关键列
这张表已开启行级安全(RLS),并且「只有站主能新增/修改/删除」的写规矩已生效
我明白今天的「读规矩」是临时开着的,第 10 课先收紧成「免费谁都能读、非免费暂挡」,第 11/12 课再扩成「会员能读全部」——一路都是加固、不是推翻
我让法器把这张表的结构存进了项目文件夹(多出一份 schema / 表结构说明文件),从此控制台和代码看同一份说明书
法器用人话给我复述了这张表装什么、谁能动(我看得懂它干了啥)

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上多了一张能装内容的表——你还揣走了一件能反复用的东西:一套「建表 + 上锁 + 交底」的完整模板。换个主题做第二座站时,照着改几列就能再立一座藏经阁。

本课物料:

  • contents 建表模板 —— 内容表的建表 SQL + 「站主才能动」写策略 SQL + 「交底法」提示词,三段配齐。文件:../takeaways/07-contents建表模板.md

怎么用(复制即用):整段交给法器(Codex 为主,Claude Code 为辅),让它替你粘进 Supabase 运行;表建好后,把第三段「交底法」发给法器,它会把真实表结构回贴一份存进项目(这正是「交底优先」铁律的落地)。你不写一个字、不用懂每一行。

💡 可分享:「今天给我的站建好了内容表,还顺手让 AI 把表结构回贴存了档——以后它写代码再也不会把列名猜错了。这就是专业开发说的『单一事实源』。」

🌱 加练(选做)+ 下一课

加练:打开法器替你存的那份「表结构说明文件」自己读一遍(中文部分就行)。试着对照 Supabase 里的表,确认两边列名一字不差。这一眼,就是你第一次以「站主」的视角,看清自己产品的「数据底盘」长什么样——很多人做了半年站都没认真看过自己的表结构,你第 7 课就看了。

下一课预告:藏经阁建好了,可它还空着、用户也看不见。

下一课,落子成形——你会请法器给站加一个「站主后台」,让你在网页上新增内容,并把藏经阁里的内容列出来显示给用户看(增 + 读,C/R)。亲手敲进去一条,刷新页面,它还在——那一刻,你的站才算真正「会记事」了。

🔖 小提示:下一课写完内容页面,记得照老规矩让法器顺手「存个档」(git 回档)。从有数据库这一课起,每加一块功能就存一档,改坏了一句话就能回到上一个境界。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 8 课

落子成形 · 新增与读取

会员专属

# 第 8 课 · 落子成形 · 新增与读取 C/R

课头

🪷 境界:筑基中期 · 通经脉二层
预计用时:120 分钟
🏆 本课产出:你的站第一次能往里存东西——你在网页上填一条内容、点保存,它就被写进云端的 contents 表,并自动出现在页面列表里;关掉重开、刷新,它还在
🚫 今天不做:不做编辑、不做删除(下一课);不上锁、不分免费/会员(暂时谁都能存、谁都能看,这是故意留的雷,本课结尾会点破)。
📜 经脉初通,灵气可纳。昨日你为藏经阁立了空架(contents 表),今日要往里落下第一子——亲手写一条心法,看它沉入云端,再从云端浮回你眼前。落子无悔,存档为证。
📷 修炼笔记卷轴位(待补):空荡的藏经阁石阁 · 一枚玉简自掌心落入阁中 · 阁壁亮起第一行金字。

这一课,你在干一件什么事

上一课,你让法器在云端建好了一张空表 contents(藏经阁)——它现在空空如也,一行数据都没有。

今天要做的,是程序员口中最基础、也最让人有成就感的两件事,合称 C / R

  • C = Create(新增):你在网页上填一条内容、点「保存」,这条内容被写进云端的 contents 表。
  • R = Read(读取):页面从云端读出 contents 里的所有内容,列在屏幕上给你看。

把这俩接通,你的站就第一次「能往里存东西、还能再拿出来」了——这是它从「死页面」变成「活产品」的关键一跳。

💡 为什么 C 和 R 要一起做? 因为只做新增(C)你看不见结果,只做读取(R)又没东西可读。两个一起做,你才能形成闭环:填一条 → 存进去 → 立刻列出来 → 刷新还在。每一步都看得见,才不慌。
💡 做第一个功能的正确切法 ·「垂直切片」:今天你做的「发一条内容」,是从界面(填表单)→存数据(写进 contents 表)→(下一课再补)上锁(谁能存、谁能看),把一个功能端到端做通一小片。别一上来横向铺一堆——同时上发布、编辑、删除、搜索、分类。先把这一小片从头到尾跑通、看得见结果,再切下一片。这正是 Supabase 全栈最稳妥的切法:每次只端到端打穿一条窄缝,每片都能验收,不容易崩、崩了也好查。
⚠️ 本课有一颗故意埋的雷:今天做完,任何人打开你的站都能新增、都能看到全部内容——还没有「谁能存、谁能看」的门。这不是 bug,是我们刻意留到第 9、10 课才补的锁。本课结尾会专门点破它,你心里有数就行,别现在就慌着上锁。

主线步骤(跟着做,每步都有「看到什么算成功」)

全程法器代管:你不用自己写代码、不用自己敲命令。你的活儿是——把下面的咒语(提示词)发给法器、看法器干活、按「看到什么算成功」对照验收。法器做完关键动作会用人话跟你回报一句,那就是给你的「透明层」,看得懂最好,看不懂也不影响过关。

第一步 · 先确认藏经阁是空的(建立「之前 / 之后」对照)

打开浏览器,登录你的 Supabase 后台,点左侧 Table Editor(表编辑器),找到上一课建好的 contents 表,点开它。

现在它应该是一行数据都没有的(除非你上一课手动加过测试行)。先看一眼这个「空」的状态——等会儿你发布完,再回来看它「多了一行」,对比最明显,成就感也最强。

看到什么算成功:你在 Supabase 后台看到了 contents 表,它的数据区是空的(或只有你上一课加的测试行),列名里有 titlesummarybodyis_freecreated_by 这些。

📷 截图位:表里空空如也(发布前的 contents 表)。
💡 看不懂那些列名? 没关系,记住三个就够:title=标题(这条内容叫啥)、summary=简介(试读那一小段)、body=正文(完整内容)。其余的 is_free(是否免费)、created_by(谁发布的)现在先不管,后面几课才用到。

第二步 · 把「任务」交给法器(发新增+读取咒语)

打开你的法器 Codex(第 2、3 课装好配好的那个),把下面 📜 咒语卡①「落子咒」 整段复制发给它(记得先把方括号里的内容换成你自己的)。

这条咒语会让法器给你的站加两样东西:一个能填内容的表单,和一个把内容列出来的列表

看到什么算成功:法器开始读你的项目、说它要改哪几个文件,然后动手改。你不用看懂它写的代码,只要它没报错、说「改好了」即可。

📷 截图位:法器报告它改了哪个文件(透明层回话)。
💡 法器改了一堆文件,我看不懂,正常吗? 完全正常。它通常会改你站里负责「内容页」的那一两个文件。看不懂不等于出错——下一步真正打开网页验收,才是检验它干得对不对的标准。

第三步 · 让法器跑起来,在浏览器打开你的站

发完咒语、法器说改好了,对它说一句「帮我把项目在本地跑起来,告诉我打开哪个网址」(或直接用 📜 咒语卡②)。法器会启动本地预览,给你一个形如 http://localhost:5173 的本地网址。

把这个网址复制到浏览器打开。

看到什么算成功:浏览器里打开了你的站,页面上出现了一个能填内容的表单——通常有「标题」「简介」「正文」几个输入框和一个「保存 / 发布」按钮。

📷 截图位:网页上的发布表单。
🆘 如果打开是一片空白、或者根本没出现表单——先别改东西,直接跳到下面 🆘 卡住了 第一条照做。
💡 localhost 是啥? 就是「只有你这台电脑能打开的预览地址」——相当于法器把站先搭在你自家客厅给你试,还没搬到公网。第 14 课才会把它正式推上线给陌生人看。现在它只给你一个人看,放心试、随便填。

第四步 · 填第一条内容、点保存(这就是 Create)

在表单里填一条真内容(别填「测试测试」,就填你这个站第一条真正想放的内容——比如你主题是「AI 咒语库」,就填一条你常用的提示词):

  • 标题:这条内容叫什么
  • 简介:一两句话的试读摘要
  • 正文:完整内容

填完,点「保存 / 发布」。

看到什么算成功:点完保存,按钮没报错,表单清空了或给了你一句「保存成功」之类的提示。先别管列表,下一步专门验收它有没有真的列出来。

🆘 如果点了保存毫无反应、或者跳出一串红字——别慌,跳到 🆘 卡住了 第二条,那是本课最常见的卡点,照做能修。

第五步 · 看它出现在列表里(这就是 Read)

保存成功后,看页面的列表区域——你刚填的那条内容,应该自动出现在列表里了(标题、简介都在)。

如果没自动出现,手动刷新一下页面(按 F5 或点浏览器刷新)再看。

看到什么算成功:列表里出现了你刚发布的那条内容——这是你的站第一次「存进去的东西又被读出来摆在你面前」。

📷 截图位:列表里出现你发布的第一条内容(这是本课的微里程碑)。
🎉 可发朋友圈的截图:「我的站第一次能存东西了——这条是我亲手发布、从云端读回来的。」你已经从『做死页面』跨到『做能存数据的真产品』了。

第六步 · 刷新验证「它真的存进云端了」(关键的一脚)

这一步最重要,别跳过:把整个浏览器标签页关掉,重新打开那个 localhost 网址(或者按 Ctrl+Shift+R 强制刷新)。

如果你刚才填的那条内容还在列表里——恭喜,它不是「暂时显示在屏幕上」,而是真的被写进了云端数据库,下次打开还能读回来。这就是「数据持久化」,是产品和玩具的分界线。

看到什么算成功:重开页面后,你发布的内容依然在列表里,没消失。

📷 截图位:刷新页面后内容还在。
💡 为什么这一步是分界线? 死页面里你写的字,刷新就没了(它只活在浏览器内存里)。现在你的内容能扛过刷新、扛过关机重开——因为它住进了云端的数据库,而不是你这台电脑的临时画面。这就是「后端」给你的第一个真本事。

第七步 · 回 Supabase 后台,亲眼看那一行数据

最后,回到第一步打开的 Supabase 后台 → Table Editor → contents,刷新一下。

看到什么算成功:表里多出了一行——就是你刚发布的那条内容,titlesummarybody 都对得上。云端确确实实收到了你的数据。

📷 截图位:Supabase 后台 contents 表里多出一行。
🌿 藏经阁不再空寂。第一枚玉简已落入阁中,金字在壁上长明——它会一直在那儿,直到你亲手取走。
💡 透明层 · 法器今天到底干了啥(看得懂层,看不懂可跳过):法器给你的页面加了两段逻辑——一段在你点「保存」时,把表单内容打包发给 Supabase 的 contents(这叫 insert / 插入);另一段在页面打开时,contents 表把所有内容捞回来铺成列表(这叫 select / 查询)。你做的 C 和 R,底下就是这两个动作。

📜 咒语卡

咒语 = 可以整段复制、直接发给法器(Codex)的提示词。方括号 [...] 里的内容换成你自己的,其余一字不改。

【咒语① · 落子咒】· 让法器给站加「新增 + 读取」

我在做一个会员制内容站,已经用 Supabase 建好了一张内容表 contents, 它的主要列有:title(标题)、summary(简介)、body(正文)、is_free(是否免费,先不用管)、created_by(创建者,先不用管)。 请帮我在我的站上实现两个功能,先做最简单能跑通的版本就好: 1. 新增(Create):页面上有一个表单,能填 title、summary、body 三个字段,点保存后把这条内容写进 Supabase 的 contents 表; 2. 读取(Read):页面打开时,从 contents 表读出全部内容,列成一个列表显示出来(至少显示 title 和 summary)。 要求: - 先不做编辑、删除、权限、登录校验,本课只做新增和读取; - 字段名严格用 title、summary、body,不要自己改名(否则会和我的表对不上); - 改完告诉我你改了哪些文件、我应该打开哪个网址来看效果。
填空说明:本咒语正文不需要填方括号;如果你的表列名和上面不一致(上一课法器可能起了别的名),把第一段「它的主要列有……」改成你表里真实的列名,这是本课最容易踩的坑(见急救第二条)。

【咒语② · 起灶咒】· 让法器把项目跑起来给你看

请帮我把这个项目在本地启动起来,并直接告诉我应该在浏览器打开哪个网址(例如 http://localhost:5173)。 如果启动报错,请把报错原因用一句大白话解释给我,并告诉我下一步该怎么办。

🆘 卡住了?(按你看到的现象找)

现象:页面打开一片空白,或者根本没出现「填内容的表单」

先检查:法器是不是把表单加错了页面,或者本地预览没真正启动。
急救话术(照做,发给法器):把下面这三句填好发给它——
我刚做了什么:我让你加了新增内容的表单,并启动了本地预览。
我现在看到什么:浏览器打开 [你的 localhost 网址] 是一片空白 / 没有表单。
我希望它变成什么:页面上能出现一个填 title、summary、body 的表单。请先帮我确认本地预览有没有真的跑起来,再检查表单加在了哪个页面。」

现象:填好点「保存」,毫无反应 / 跳出一串红字 / 列表一直是空白(本课头号卡点)

先检查:八成是「列名对不上」——法器写代码时用的字段名(比如 contenttextname),和你 Supabase 表里真实的列名(titlesummarybody)没对齐,于是数据写不进去、也读不出来。
怎么自己确认:在网页上按 F12 打开浏览器开发者工具,点上面的 Console(控制台) 标签,再点一次「保存」——如果蹦出红色报错,里面常会写着类似 column "xxx" does not exist(某列不存在)或 400 / Bad Request。这就是「列名对不上」的铁证。
急救话术(照做):别自己改代码,把现象连同那行红字一起丢回给法器——
我刚做了什么:我点了保存按钮。
我现在看到什么:F12 控制台里报红:[把那行红字原样复制粘贴进来],列表还是空的。
我希望它变成什么:内容能成功保存进 contents 表、并出现在列表里。我怀疑是代码里的字段名和我 Supabase 表里的列名(title、summary、body)对不上,请你核对并改成和我表里一致的列名。」

现象:保存成功了,但刷新页面(第六步)内容就没了

先检查:内容可能只是「临时显示在屏幕上」,并没真正写进云端的 contents 表。
怎么自己确认:去 Supabase 后台 → Table Editor → contents 表看一眼——如果表里没有你那条数据,说明只是前端假装存了、其实没进数据库。
急救话术(照做,发给法器):
我刚做了什么:我发布了一条内容,刷新页面后它消失了。
我现在看到什么:Supabase 的 contents 表里其实没有这条数据。
我希望它变成什么:保存时要真正写进 Supabase 的 contents 表,刷新后还能从表里读回来。请检查保存逻辑是不是真的调用了向 contents 表插入数据的操作。」

现象:F12 / Console 我没找到 / 不会用

先检查:你是不是在网页空白处右键,没看到「检查 / Inspect」。
急救话术:在网页任意位置按键盘最上排的 F12 键(有些笔记本要同时按 Fn + F12),右边或下边弹出一个带很多英文标签的面板,点其中写着 Console 的那个标签即可。看到的红字就是报错,把红字整行复制下来丢给法器就行——你不用看懂它,法器看得懂。
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好,连同 F12 里的红字一起发给法器,比你瞎描述管用十倍。

✅ 出关自查(全部勾上才算过这一关)

我能在网页表单里填一条内容、点保存,它成功保存(没报错)
保存后,这条内容出现在页面列表里(自动出现,或刷新后出现)
关掉页面重开 / 刷新后,这条内容还在(没消失)
我去 Supabase 后台 contents 表,亲眼看到多了这一行数据
我知道:现在任何人都能存、都能看,这把「锁」是故意留到后面几课补的

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上多了「能存能读」这块功能——还有一件能反复用的东西:把今天这次成果沉淀成的标准代码模板,下次做新站直接拿来就用。

  • 【增 / 查代码模板】 — 把内容写进 contents 表(insert)、把内容读出来铺成列表(select)的两段标准代码,配好了「加载中」和「空列表」两种状态。文件:../takeaways/08-增查代码模板.md怎么用:整段复制 → 交给法器(Codex 为主,Claude Code 为辅),让它按你真实的列名接进内容页文件,你不写一行裸代码。表名 / 列名换成你自己的,即复制即用。
💡 可分享:「我手里有一套增 / 查标准代码模板——任何能发内容、能看内容的网站,底层都是这两段,换个表名就能复用。」(通用骨架,不含真实数据和钥匙,放心发同学。)

🌱 加练(选做)+ 下一课

加练:多发布 3–5 条真内容,把你的列表填得像点样子(这些以后都能改、能删,今天先不管)。发布时留意——列表是不是越来越长、刷新都还在?这就是你的「藏经阁」在慢慢攒货。

下一课预告:今天你的站能存、能读了(C 和 R),但还差两件事——(U 和 D)。

下一课,改易由心:你会让法器补上「编辑」和「删除」,把内容的「增、查、改、删」四件套(程序员叫它 CRUD)彻底打通,你的内容就完全攥在自己手里了。

⚠️ 下一课结尾,我们会正式点破今天埋的那颗雷:CRUD 全通之后,你会发现一个让人后背发凉的事实——现在谁都能改你的内容、谁都能看你的全部内容,还没上一把锁。别急,这正是第 10 课「行级安全 RLS」要渡的那道劫:给你的藏经阁装上真正的门——游客只能看免费的,会员内容只有会员能看,改内容只有你站主能改。先把东西存进来,下下课再上锁,顺序刚刚好。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 9 课

改易由心 · 编辑与删除

会员专属

# 第 9 课 · 改易由心 · 编辑与删除 U/D

课头

🪷 境界:筑基中期 · 通经脉三层
预计用时:90 分钟
🏆 本课产出:给藏经阁里每一条内容补上编辑(改)删除(删)两件本事。从这一课起,你站里的内容能增、能看、能改、能删——一个完整的 CRUD 闭环跑通了。
🚫 今天不做:不加权限锁(任何人都能改的隐患下一课立刻补)、不碰登录会员判断、不连支付
📜 藏经阁已立,典籍可入可阅。可你忽然发现:写错的字改不得,多录的页删不掉——经卷一旦落架便成死物。今日修「改易由心」之法,落架之卷亦可随手增删勾抹,藏经阁这才真正活了过来。只是……笔锋太利亦是祸根,今日你甚至能改到不属于你的那一卷——此患,留与下一课立锁。
📷 修炼笔记卷轴位(待补):藏经阁内一卷悬空展开,朱笔自行勾抹增删,卷成即归架;架尾一卷微微发烫(伏笔:尚无锁)。

这一课,你在干一件什么事

上一课(第 8 课)你已经能新增内容、读取列表(CRUD 里的 C 和 R)。但你一定试过:录错一个字、想改个标题,却只能删了重录;或者多录了一条,根本删不掉——只能眼睁睁看着它躺在列表里。

今天补上剩下两块拼图:

  • U(Update 编辑):点「编辑」,表单自动回填这条的原内容,你改完保存,列表里那条就变成新的了。
  • D(Delete 删除):点「删除」,先弹一个二次确认(防手滑误删),确认后这条从列表和数据库里一起消失。

做完,你的内容管理就是一个完整闭环:增(C)、查(R)、改(U)、删(D)四件事齐活。这正是任何一个「能管理内容的真站」最核心的底座。

💡 CRUD 是什么? 就是对数据的四个基本动作:Create(增)、Read(查)、Update(改)、Delete(删)。前两个上一课做了,今天做后两个。听着像四个英文缩写,其实就是「这条内容我能不能改、能不能删」这么朴素的事。
⚠️ 今天故意留一个洞:你这一课做出来的编辑/删除,谁登录都能改、都能删——包括改到别人的内容。这不是 bug,是我故意先不上锁,让你先把「改和删」本身跑通。下一课(第 10 课)第一件事,就是给它装上行级安全锁,让每个人只能动自己那份。先别急,今天先把闭环跑顺。

主线步骤(跟着做,每步都有「看到什么算成功」)

全程法器(Codex)替你改代码,你只负责:发咒语 → 看法器人话回报 → 在浏览器里点一点验证。你不需要自己写一行代码。

第一步 · 让法器先看懂现状,再动手

打开你的项目(Codex 已经在第 4 课接管了它)。先别急着让它加功能——让它先把上一课的「新增 + 列表」那段代码摸清楚,这样它后面加编辑/删除才不会改乱。

把 📜 咒语卡里的 【交底咒】 整段发给 Codex。

看到什么算成功:Codex 用人话回你一段,大意是「我看到了:你有一个内容列表页,数据存在 Supabase 的 contents 表,每条有 title / summary / body 等字段;目前能新增和显示,但还没有编辑和删除」。它复述对了你的现状,就算成功——说明它读懂了,没瞎猜。
🌿 动土之前先勘地基。法器先识得旧物,方能在其上落笔而不毁旧章。

第二步 · 加「编辑」按钮 + 表单回填

现在让法器给列表里每一条内容旁边加一个「编辑」按钮。点它,页面上方那个「新增内容」的表单,要自动填进这条的原标题、原简介、原正文——这叫回填

把 📜 咒语卡里的 【编辑回填咒】 发给 Codex。它改完会告诉你它动了哪个文件、加了什么。

看到什么算成功:刷新页面后,列表里每条内容旁边多出一个「编辑」按钮。点其中一条的「编辑」,上方表单的标题/简介/正文输入框里,自动出现了这条原来的内容(不是空白)。

📷 截图位:每条内容旁多出「编辑 / 删除」两个按钮;点编辑后表单回填了原内容。
💡 为什么「回填」这么重要? 编辑的本质是「在原内容基础上改」。如果点编辑后表单是空的,你就得把没改的部分重新打一遍——那不叫编辑,叫重录。回填 = 把原文先放进框里,你只动要改的地方。

第三步 · 让「保存」分清是「新增」还是「编辑」

这里有个关键细节,法器会替你处理,但你要看懂:同一个表单,现在要干两件事——

  • 没点编辑、直接填:保存时是新增一条(上一课的老行为)。
  • 点了某条的编辑:保存时是更新那一条(不能再新增出一条重复的)。

法器的做法是:点编辑时偷偷记住「我正在改的是哪一条的 id」,保存时按这个 id 去更新;没记 id 就当新增。你不用管它怎么记,但你要会验证它记对了没有。

把 📜 咒语卡里的 【保存分流咒】 发给 Codex(如果第二步它已经一并做了分流,这步它会回你「已经处理过了」,那就直接跳到验证)。

看到什么算成功:点某条「编辑」→ 表单回填 → 你把标题改一下 → 点保存。列表里那一条变成了新标题,而且列表没有多出一条重复的(数量不变,只是内容变了)。

📷 截图位:改完保存 · 列表里那条已变成新内容。
🌿 同一支笔,落在空卷上是新著,落在旧卷上是修订——分寸全在落笔前那一念「我此刻改的是哪一卷」。

第四步 · 加「删除」按钮 + 二次确认

现在加「删除」。但删除不能点一下就没——手一滑就删错了,删错的还可能是费半天劲录的内容。所以要加二次确认:点「删除」先弹一个「确定要删除『某某标题』吗?」的确认框,你点「确定」才真删,点「取消」就什么都不发生。

把 📜 咒语卡里的 【删除确认咒】 发给 Codex。

看到什么算成功:列表每条旁边出现「删除」按钮。点它,弹出一个二次确认框(带着那条的标题)。点「取消」——那条还在;点「确定」——那条从列表消失了

📷 截图位:点删除弹出二次确认框。
💡 为什么非要二次确认? 删除是 CRUD 里唯一不可撤销的动作——新增可以再删、编辑可以再改回去,但删了就真没了(除非走第 4 课的 git 回档,那是大动作)。二次确认是给手滑留的一道刹车。专业产品里几乎所有「删除」都有这道确认,不是啰嗦,是负责。

第五步 · 验证「删除是真的删了」(不是只在屏幕上藏起来)

这一步最容易被忽悠,一定要做。有时候法器会偷懒,只把那条从屏幕上藏起来,但数据库里还在——你一刷新它就又冒出来了。我们要确认它是真删了

删掉一条后,按 F5 刷新整个页面(或者关掉标签页重新打开)。

看到什么算成功:刷新后,刚才删掉的那条没有再回来——说明它是从 Supabase 数据库里真删掉了,不是只在屏幕上藏了一下。

📷 截图位:删除后那条从列表消失 · 刷新也不再回来。
💡 这招你上一课就学过(第 8 课用「刷新还在不在」验证新增是不是真存进了云端)。同一招反过来用:新增看「刷新还在不在」,删除看「刷新还回不回来」。能扛住刷新的,才是真的动了数据库。

第六步 · 编辑也要扛住刷新

同理,编辑完也别急着信。改完保存后按 F5 刷新,确认你改的新内容还在(不是只在屏幕上改了样子、数据库里还是旧的)。

看到什么算成功:刷新后,那条仍然显示你刚改的新内容,没有被打回旧版。至此,增(C)、查(R)、改(U)、删(D)四件事全部扛住了刷新——你的 CRUD 闭环是真的。

第七步 · 让法器用人话给你交个底(透明层)

闭环跑通了。最后让法器用大白话给你复盘一句:它这一课到底改了哪些文件、编辑和删除分别是怎么实现的。你不必看懂代码,但要听它把「干了啥」说成人话——这是你看得懂的透明层,将来排错有用。

把 📜 咒语卡里的 【交底复盘咒】 发给 Codex。

看到什么算成功:Codex 回你一小段人话,大意是「我在 [某个文件] 里加了编辑按钮和回填逻辑、加了删除按钮和二次确认;编辑走的是 Supabase 的 update,删除走的是 delete;目前还没有任何权限判断,谁都能改删任意一条」。它主动点出了「还没上锁」这个洞——说明它和你认知一致,下一课补锁有的放矢。
⚠️ 记住它这句「还没上锁」:这不是它做错了,是今天故意的留白。下一课第一件事就是把这个洞补上。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器(Codex)的提示词。[方括号] 里是要你按自己情况替换的,其余照发。Claude Code 同款可用,把同一段发给它即可。

【交底咒】· 动手前先让法器摸清现状

我在做一个会员制内容站,内容存在 Supabase 的 contents 表里。 请先不要改任何代码,只读一遍我现在的内容列表/新增功能相关的文件, 然后用大白话告诉我: 1. 内容列表显示在哪个文件、长什么样; 2. 新增内容时,数据是怎么存进 contents 表的、用了哪些字段; 3. 目前有没有"编辑""删除"功能(如果没有,直说没有)。 读懂了再开口,不确定就说不确定,不要猜。

【编辑回填咒】· 加编辑按钮 + 表单回填

请给我的内容列表里每一条内容,旁边加一个"编辑"按钮。 点"编辑"时,要把这条内容的原标题、原简介、原正文, 自动填进页面上方那个新增内容的表单里(这叫回填), 让我可以在原内容基础上修改,而不是从空白重打。 先小步只改这一处,改完告诉我你动了哪个文件、加了什么, 以及我该怎么在浏览器里验证回填成功了。

【保存分流咒】· 让保存分清新增还是编辑

现在同一个表单要做两件事:没点编辑时直接保存=新增一条; 点了某条编辑、回填后保存=更新那一条(不要再新增出重复的)。 请帮我处理:点编辑时记住正在编辑的那条的 id, 保存时如果有这个 id 就用 Supabase 的 update 更新那一条, 没有 id 就走原来的新增。改完告诉我怎么验证"编辑不会多出重复条"。 如果你前一步已经做了这个分流,直接告诉我"已处理",不用重复改。

【删除确认咒】· 加删除按钮 + 二次确认

请给每条内容旁边加一个"删除"按钮。 点"删除"时,先弹出一个二次确认框,显示"确定要删除『这条的标题』吗?", 我点"确定"才用 Supabase 的 delete 真正删掉这条,点"取消"就什么都不做。 删除成功后,把这条从屏幕列表里也去掉。 先小步只做这一处,改完告诉我怎么验证"刷新后这条不会再回来"。

【交底复盘咒】· 听它把这一课干了啥说成人话

这一课结束了。请用大白话给我复盘: 1. 你一共改了哪几个文件; 2. 编辑功能、删除功能分别是怎么实现的(用人话,不用贴代码); 3. 现在有没有任何权限判断? 也就是说,如果换一个人登录, 他能不能改、能不能删别人录的内容? 老实告诉我。
填空说明:本课咒语基本无需填空,直接整段发即可。若你的内容字段名和我这里不同(比如你叫 content 不叫 body),法器在【交底咒】那步会自己读出来并对齐,你不用手动改。

🆘 卡住了?(按你看到的现象找)

现象:点了「编辑」,表单是空的,没有回填原内容

先检查:你点的「编辑」按钮,是不是确实绑到了那一条的数据上?(最常见是法器只加了按钮、没把那条的内容传进表单。)
急救话术(照发给 Codex):
``
我点编辑后,表单是空白的,没有自动填进这条的原标题/原简介/原正文。
请检查编辑按钮有没有把这条内容的数据带进表单,修好回填。
改完告诉我怎么验证。
``

现象:编辑保存后,列表里多出一条重复的(原来那条还在,又冒出一条新的)

先检查:这是「保存没分清新增还是编辑」——它把你的编辑当成了新增。
急救话术(照发给 Codex):
``
我点编辑、改完保存后,列表里多了一条重复的,原来那条没被更新。
说明保存时把编辑当成了新增。请改成:有正在编辑的 id 就用 update 更新那一条,
不要新增。改完告诉我怎么验证编辑不再产生重复。
``

现象:删除点了一下就没了,没有弹确认框 / 删错了

先检查:是不是二次确认没加上,导致一点就删。
急救话术(照发给 Codex):
``
我点删除时没有弹确认框,一点就直接删了,容易误删。
请加上二次确认:点删除先弹出"确定要删除『标题』吗?",点确定才真删。
``
💡 已经删错了、想救回来怎么办? 单条内容删了,Supabase 里没有「回收站」。但你第 4 课学的 git 渡劫回档保护的是代码,不是数据库里的内容——所以删错的内容没法用 git 回档救回来,只能重新录一遍。这也正是我们今天加二次确认的原因:删除不可撤销,靠的是删之前那道确认刹车,不是删之后的后悔药。(数据库整体快照属于更进阶的话题,本课不展开。)

现象:删除/编辑当时看着成功了,一刷新又变回原样 / 删的那条又回来了

先检查:法器可能只改了屏幕显示,没真改数据库。能不能扛住刷新,是「真改了数据库」的唯一标准。
急救话术(照发给 Codex):
``
我编辑/删除后当时看着对,但一按 F5 刷新就变回原来的样子(删的那条又回来了)。
说明只改了页面、没真改 Supabase 数据库。
请改成真正调用 Supabase 的 update/delete 改动数据库,确保刷新后结果还在。
``
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好发给法器,比你瞎描述管用十倍。例:「我刚点了某条的编辑改了标题保存(我刚做了什么);列表里多出一条重复的(我现在看到什么);我希望它只更新原来那条、不要多出新的(我希望它变成什么)。」

✅ 出关自查(全部勾上才算过这一关)

列表里每条内容旁边都有「编辑」和「删除」两个按钮
点「编辑」表单能自动回填原内容;改完保存,那一条变成新内容、列表不多出重复
点「删除」会弹二次确认;点确定才删,点取消不删
刷新页面后:删掉的不再回来、改过的仍是新内容(增/查/改/删四件事都扛住了刷新)
我知道现在还没上锁——谁登录都能改删任意内容,这是故意留的洞,下一课补

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上多了「编辑 / 删除」两块功能——你还拿到了一件能反复用的东西:一套改 / 删标准代码模板。它和第 8 课的「增 / 查」两囊一合,就是完整的增删改查四件套(CRUD)。以后做第二个站、帮朋友、接私单,换个表名就能复用。

  • 改 / 删代码模板(U/D) — 三段复制即用的标准代码:编辑回填、保存分流(分清新增还是更新)、删除二次确认 + 真删,配齐验收清单和踩坑急救。文件:../takeaways/09-改删代码模板.md怎么用:把整份文件连同一句话发给法器(「按我项目真实的 contents 列名、复用已有连接和列表函数,接进我的内容页」),它替你对齐列名、接进正确文件、复用现成连接,你不写一行裸代码;接好后照文件里的「验收五条」逐项勾。
💡 可分享:「我手里有一套增删改查(CRUD)标准代码模板了——能存、能读、能改、能删,删除还带二次确认,换个表名就能复用到下一个站。」——只讲能力、不含任何钥匙和真实数据,放心晒。

🌱 加练(选做)+ 下一课

加练:给自己出一道「闭环演练题」——新增一条测试内容(C)→ 在列表里看到它(R)→ 编辑改个标题(U)→ 最后删掉它(D),每一步都按 F5 刷新确认。一口气把 CRUD 四件事走一遍,你会对「我这站真的能管理内容了」有实感。截一张「编辑回填成功」的图,这是你通经脉三层的微里程碑。

下一课预告:闭环是通了,可你有没有发现一件细思极恐的事——

现在任何一个登录的人,都能编辑、删除你站里的任意内容,包括别人录的、甚至将来付费会员才能看的内容。门是开着的,谁进来都能动手脚。

下一课(第 10 课)是这一阶的 ★渡劫关:我们给数据库装上行级安全锁(RLS)——让每个人只能动自己那份,游客连会员专属内容都读不到。

🔖 小提示:第 10 课会先让你亲眼看到「没锁有多危险」(用两个账号互相改对方数据),再把锁一道道加上。这道渡劫九成修士二十分钟内过——别怕,崩坏是预期剧情,过劫路线我都给你备好了。这一课结束,记得让法器顺手「存个档」(git 回档点),下一课大改之前留个退路。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 10 课

各守洞府 · 行级安全 RLS

会员专属

# 第 10 课 · 各守洞府 · 行级安全 RLS

课头

🪷 境界:筑基中期 · 通经脉四层(★阶段渡劫)
预计用时:90 分钟
🏆 本课产出:给你的数据库装上行级安全锁(RLS)——每个人只能动自己那行档案,游客读不到「非免费」内容。装完,你的站第一次有了真正的后端门禁:能存能改、刷新还在、别人看不到不该看的内容。这是筑基中期的渡劫关,里程碑②
🚫 今天不做:不分会员等级(is_member 下一课才加)、不做前端遮罩(第 12 课)、不碰支付
📜 藏经阁可增可删,却门户洞开——任谁踏入皆可翻你典籍、改你心法。今日筑「各守洞府」之禁制:一念落下,洞门轰然封闭,连你自己也被挡在门外(此乃渡劫正景,非你之过)。莫慌——禁制立而钥匙未配而已。补全四道法诀,洞门重启,从此各守各的洞府,外人只能见你愿示之物,深藏者,他窥之不得。
📷 修炼笔记卷轴位(待补):洞门骤闭、修士被弹于门外(先黑后亮);四枚法诀逐一嵌入门楣(增/删/读/改),门重启微光,门内典籍游客侧朦胧不可读、站主侧清晰可阅。

这一课,你在干一件什么事

上一课(第 9 课)你做完了 CRUD 闭环——内容能增、能查、能改、能删。但你应该还记得我反复提醒的那个故意留的洞

现在任何一个登录的人,都能改、能删你站里的任意内容。 门是开着的,谁进来都能动手脚。这对一个将来要收费、要放会员专属内容的站来说,是致命的。

今天就来补这个洞。我们用的工具叫 RLS(Row Level Security,行级安全)——它是 Supabase 数据库自带的一道后端门禁。一句话说清它干嘛的:

RLS = 给数据库的每一行数据,立一条「谁能读、谁能改」的规矩。规矩写在数据库里,谁也绕不过去。

为什么强调「绕不过去」?因为这是它和「前端遮罩」最大的区别——前端那种遮罩(第 12 课才做),任何人按 F12 打开浏览器开发者工具就能掀开看。而 RLS 是长在数据库里的,不管你从哪个页面、哪个工具、甚至直接拿密钥来访问,它都先拦一道。真正的付费墙,靠的就是它。

今天我们给两张表上锁:

  • profiles(名册)各管各的:每个人只能读、只能改自己那一行档案,看不到也动不了别人的。
  • contents(藏经阁)立读门is_free = true(免费试读)的内容任何人都能读is_free = false(非免费)的内容暂时先挡住所有人——因为此刻你的站还没有「会员」这个概念is_member 下一课才加)。所以今天的读门只到「免费能读 / 非免费暂挡」为止,会员能解锁是第 11、12 课的事。
⚠️ 今天最重要的一句心理建设——这一课会先「翻车」,而且是故意的。
行级安全有个出了名的特性:你一开锁,第一个被锁在门外的往往是你自己——页面上的内容会「唰」地全部消失,变成一片空白。这不是你做错了,这是渡劫的正景(预期剧情)。 原因很简单:锁是「默认全部禁止,你许可的才放行」,你刚开锁、还没来得及写「许可谁读」的规矩,所以连你自己都被默认挡住了。
别慌、别回退、别以为搞砸了。 接下来四步就是一道道把「许可」的规矩补上,内容会重新出现——而且这次是带着门禁重新出现的。这就是我们一路在用的「预设突破」:先把「必然会翻车的那一下」摊开告诉你,再立刻把整条过劫路线递到你手里。这个报错/这一下,90% 的筑基修士 20 分钟内过——这是你的通关路线。

主线步骤(跟着做,每步都有「看到什么算成功」)

全程法器(Codex)替你写规矩、改代码,你只负责:发咒语 → 看法器人话回报 → 在浏览器里用两个账号点一点验证。你不需要自己写一行 SQL。 但今天有几个概念你要看懂(不用会写),我会用人话讲清。

第一步 · 先存个档(渡劫之前,留条退路)

今天要动数据库的安全策略,是这一阶最「玄」的一关。动手之前,先让法器顺手存个档——就是第 4 课学的 git 渡劫回档。万一今天哪一步彻底乱了,一句话就能回到现在这个「CRUD 能跑、还没上锁」的干净状态,重新来过。

把 📜 咒语卡里的 【存档咒】 发给 Codex。

看到什么算成功:Codex 回你一句人话,大意是「已经把当前状态存了一个档(git 提交),备注是『RLS 渡劫前·CRUD 已通』。需要的话随时能让我回到这里」。有了这个档,你今天就可以放心大胆地试错。
🌿 渡劫之前,先在身后系一根回魂索。劫中纵然神魂俱裂,一念便可归来重炼。

第二步 · 让法器先看懂现状,并给你交底「RLS 是什么、四件套是什么」

先别急着开锁。让法器先读一遍你的数据库结构,并用人话给你讲清楚今天要做的事——这样它后面动手才不会改乱,你也能听懂它在干嘛。

把 📜 咒语卡里的 【交底咒】 发给 Codex。它会读你的 profilescontents 表,然后给你交个底。

这里有个概念你要听懂(不用会写):RLS 不是一道笼统的锁,而是分四件套,对应数据的四个动作——

缩写
管什么
大白话
SELECT
谁能
这行数据,谁打开页面能看到
INSERT
谁能新增
谁能往这张表里塞新的一行
UPDATE
谁能
这行数据,谁能编辑它
DELETE
谁能
这行数据,谁能删掉它

还有一个关键词你会反复听到:auth.uid()。它是数据库里的一句「当前登录的这个人是谁」——返回当前登录用户的身份编号。RLS 的规矩就是靠它来判断「这行是不是你的」:比如「只有 auth.uid() 等于这行的 id 时,才允许读/改」,翻译成人话就是「只有本人能动自己那行」。

看到什么算成功:Codex 用人话回你一段,大意是「你有两张表:profiles 每个用户一行(id/email/nickname 等),contents 是内容条目(有 is_free 字段区分免费/非免费,有 created_by 记录是谁发布的)。今天要做的是:给 profiles 配『各管各的』四条策略、给 contents 配读门和写策略。我会用 auth.uid() 来判断身份」。它把现状和计划复述对了,就算成功。
💡 为什么 RLS 要分这么细(四件套)? 因为「能读」和「能改」是两码事。比如别人的档案,你可能能看到他的昵称(读),但绝不能改他的(不能改)。分开管,才能做到「这件事你行、那件事你不行」这种精细的门禁。你不用记这些英文,知道「读、增、改、删各有各的规矩」就够了。

第三步 · 给 profiles 开锁(开了之后,准备迎接「黑屏」)

现在动真格。让法器给 profiles开启 RLS,并配上「各管各的」四条策略:每个人只能 读 / 改自己那一行(用 auth.uid() 判断),新增交给注册时的自动建档(第 6 课那个触发器),删除暂不开放。

把 📜 咒语卡里的 【profiles 上锁咒】 发给 Codex。

⚠️ 开锁瞬间你可能会看到的「翻车」:如果你的「我的洞府 / 个人中心」页面在显示你的昵称、邮箱,开锁那一刹那它可能变空白或报错——这是预期的。因为开了 RLS、规矩还没完全生效前,数据库默认「全部挡住」。法器配完这四条策略,刷新一下,你自己那行就重新读得到了
看到什么算成功:法器回报「profiles 已开启 RLS,配好了四条策略:本人可读自己那行、本人可改自己那行,新增由注册触发器负责,删除暂关」。你刷新「我的洞府」页面,还能看到你自己的昵称/邮箱(说明「本人读自己」这条放行了)。

📷 截图位:Supabase 后台 Policies 页 · 四条策略都已开启。
🌿 第一道洞府禁制立成。从此名册各归其主,他人之册,你窥不得、改不得;你之册,亦无人能擅动。

第四步 · 给 contents 开锁(这一步最可能「黑屏」——别慌,这是渡劫正景)

现在给 contents(藏经阁)开 RLS。这一步就是今天的渡劫主场,请做好心理准备:

让法器给 contents 开启 RLS 的那一刻,你站里的内容列表很可能「唰」地全部消失,变成一片空白——连你自己录的、你自己能看的,全都不见了。

这正是渡劫的黑屏正景。 我再说一遍原因:RLS 一开,默认「全部禁止读」,而你还没写「许可谁读」的规矩,所以连你自己都被默认挡在外面。这不是搞砸了,这是劫的中段。

把 📜 咒语卡里的 【contents 上锁咒】 发给 Codex。先单独开锁、先看到黑屏,再配读门——我特意让你完整经历这个「先黑后亮」的过程,因为亲眼见过黑屏,你将来排错时才不会被它吓退。

看到什么算成功(这一步成功的标志,就是「失败」):开锁后刷新页面,内容列表变空了 / 一条都不显示了。看到这个空白,说明 RLS 真的生效了——锁是真的锁上了。这一步「看到黑屏」=成功。 下一步就重生。

📷 截图位:开 RLS 后自己也读不到内容(预期的黑屏 · 渡劫开始)。
⚠️ 此刻请务必忍住「我是不是弄坏了,赶紧撤回」的冲动。 你没弄坏。你只是站在劫的最低点。撤回反而前功尽弃。深吸一口气,进下一步——补钥匙,重生。

第五步 · 配 contents 读门 + 写策略(重生:内容带着门禁回来)

现在补钥匙,让洞门重启。给 contents 配上今天的核心规矩

  • 第一件事 · 先撤掉第 7 课那条「临时读策略」:第 7 课为了让你第 8 课能自测,临时开了一条「所有登录用户都能读全部内容」。今天必须先把它 drop 掉——否则它会和下面的新读门叠加:数据库里同一张表、同一个「读」的多条规矩是「满足任意一条就放行」的关系(OR),那条临时的一直全开,新读门就形同虚设——登录的游客照样能读到非免费内容、第六步互验必失败。所以法器今天动手第一步,就是 drop 掉第 7 课那条临时读策略,再配下面的真读门。
  • 读门(SELECT)is_free = true 的内容——任何人都能读(包括没登录的游客,这是你的免费试读);is_free = false 的内容——暂时挡住所有人

> 为什么非免费内容现在「挡住所有人」、连你自己都看不到?因为此刻你的站还没有「会员」这个开关is_member 下一课才加)。所以今天的读门只能做到「免费放行 / 非免费暂挡」。让会员能解锁非免费内容,是第 11、12 课的事——今天这道门是付费墙的地基,第 12 课会在它上面自然扩展成「免费 OR 会员可读」,不是推翻重做。

  • 写策略(INSERT / UPDATE / DELETE):只有站主本人(发布这条内容的人,即 created_by 等于 auth.uid())才能新增、修改、删除内容。这就把第 9 课那个「谁都能改删」的洞彻底补上了。

把 📜 咒语卡里的 【contents 读门+写策略咒】 发给 Codex。

看到什么算成功:法器配完、刷新页面——
- 你(站主,已登录)重新看到了内容:免费的、以及你自己发布的内容都回来了;
- 你试着新增/编辑一条内容,还能成功(写策略认你是站主)。
内容带着门禁回来了——你过了劫的最低点。

📷 截图位:配好 SELECT/INSERT 策略后内容重新出现(重生)。
🌿 钥匙归位,洞门重启。同样的典籍,再现眼前——只是这一次,门楣已悬四道禁制。可示之卷敞于堂前,深藏之卷隐于帘后,各得其所。

第六步 · 两个账号互验(游客 vs 站主,亲眼看见门禁生效)

光自己看着对不算数。RLS 的验收,必须用两个不同身份各看一遍——这才是「门禁真的拦住人了」的铁证,也是今天里程碑②的核心。

准备两个身份(法器会在 📜 咒语卡里教你怎么快速造一个测试账号):

  • 会员账号(站主你自己):登录后,免费内容 + 非免费内容(你自己发布的)都看得到,还能新增、能改。
  • 游客账号(另一个新注册的普通账号,或干脆退出登录用游客身份):登录/进入后,只看得到 is_free = true 的免费内容is_free = false 的非免费内容一条都看不到;想改、想删任何内容,都被拦下

把 📜 咒语卡里的 【互验咒】 发给 Codex,它会带你走一遍两个账号的对照验证。

看到什么算成功(这就是里程碑②,请逐条对照):
- 站主登录:免费 + 非免费内容都能看,能存能改;
- 切到游客:只看得到免费内容,非免费内容看不到;游客改不了、删不了任何内容;
- 关键一招——把你刚改的内容按 F5 刷新,站主侧还在(说明真存进了带门禁的数据库,不是屏幕假象)。

📷 截图位:用游客账号登录 · 看不到非免费内容;用会员账号(站主)登录 · 能看到全部、能新增能改。
🎉 第二张可发朋友圈的截图(里程碑②):「我的站现在能存能改、刷新还在,而且别人看不到我设为非公开的内容——它有真正的后端门禁了。」你刚刚亲手过了筑基中期的渡劫关。

第七步 · 让法器用人话给你交个底(透明层)+ 再存一个档

渡劫过了。最后让法器用大白话复盘一句:它今天给哪两张表、各加了哪些策略,用人话说清「现在谁能读什么、谁能改什么」。你不必看懂 SQL,但要听它把门禁规则讲成人话——将来排错、第 12 课扩展付费墙时都用得上。

复盘完,再让它存一个档(备注「RLS 渡劫已过」),把这个「带门禁的干净状态」固定下来。

把 📜 咒语卡里的 【交底复盘+存档咒】 发给 Codex。

看到什么算成功:Codex 回你一小段人话,大意是「profiles:每个人只能读改自己那行;contents:免费内容人人可读、非免费暂时挡住所有人(等下一课加会员),内容只有站主本人能增删改。is_member 还没加,所以非免费内容现在连会员都没有——这是下一课的事」。并告诉你「已存档:RLS 渡劫已过」。它主动点出「is_member 下一课才加」,说明它和你认知一致,付费墙地基已就位。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器(Codex)的提示词。[方括号] 里是要你按自己情况替换的,其余照发。Claude Code 同款可用,把同一段发给它即可。

【存档咒】· 渡劫前留退路

今天要动 Supabase 数据库的安全策略(RLS),风险比平时大。 动手前,请先帮我把项目当前状态存一个档(git 提交), 备注写"RLS 渡劫前·CRUD 已通"。 存好后告诉我:万一今天搞乱了,我怎么一句话让你回到这个档。

【交底咒】· 动手前让法器看懂现状并讲清 RLS

我在做一个会员制内容站,用 Supabase。现在 CRUD 已经通了,但还没上任何权限锁, 谁登录都能改删任意内容。今天我要上行级安全(RLS)。 请先不要改任何东西,只读一遍我的 profiles 表和 contents 表的结构, 然后用大白话告诉我: 1. 这两张表现在各有哪些字段;contents 里 is_free、created_by 分别是干嘛的; 2. 今天上 RLS 要分 SELECT/INSERT/UPDATE/DELETE 四件套,你打算怎么用 auth.uid() 判断身份; 3. 计划:profiles 配"各管各的"(本人只能读改自己那行), contents 配"读门"(is_free=true 人人可读、is_free=false 暂时挡住所有人,因为现在还没有 is_member) 加"写策略"(只有站主本人 created_by=auth.uid() 能增删改)。 先把现状和计划复述给我确认,我说"开始"你再动手。

【profiles 上锁咒】· 名册各管各的

请给 profiles 表开启 RLS,并配上"各管各的"策略: - SELECT(读):只有 auth.uid() 等于这行 id 的人,才能读自己那行; - UPDATE(改):同样,只有本人能改自己那行; - INSERT(新增):保持注册时自动建档的触发器能正常建档(别把注册建档挡死了); - DELETE(删):暂时不开放给普通用户。 配好后告诉我:1) 这四条策略分别是什么意思(人话); 2) 我刷新"我的洞府"页面,应该还能看到我自己的昵称邮箱(本人读自己放行)。 如果开锁后我自己那行也读不到了,说明 SELECT 策略没配对,请你修。

【contents 上锁咒】· 先单独开锁(我要亲眼看到黑屏)

请只给 contents 表"开启 RLS"这一步,先别配任何读写策略。 我想先亲眼看到开锁后内容列表变空的样子(我知道这是预期的,RLS 默认全禁)。 开完告诉我:现在内容列表应该一条都读不到了,对吗? 确认后我会让你再配读门和写策略把内容放出来。

【contents 读门+写策略咒】· 配钥匙,让内容带门禁回来

现在给 contents 表配上读写策略。 - 第一步(重要):先删掉第 7 课为自测临时加的那条"所有登录用户可读全部内容"的读策略(drop 掉它)。 否则它会和下面的新读门叠加——同一张表多条读(SELECT)策略是 OR 关系、满足任意一条就放行, 临时那条一直全开会让新读门失效,登录游客照样读到非免费内容。请先 drop,再建新读门。 - SELECT(读门):is_free=true 的内容,任何人(包括没登录的游客)都能读; is_free=false 的内容,暂时挡住所有人(因为现在还没有 is_member 字段,会员解锁是下一课的事)。 - INSERT/UPDATE/DELETE(写策略):只有站主本人(created_by 等于 auth.uid())能新增、修改、删除内容。 配好后告诉我:1) 你删掉了哪条临时策略、现在 contents 上的读(SELECT)策略只剩这一道新读门; 2) 现在我(站主登录)应该能重新看到免费内容和我自己发的内容,还能新增能改; 3) 这道读门和第 12 课的付费墙是什么关系(我想确认它是地基、不会被推翻重做)。

【互验咒】· 游客 vs 站主两个账号对照验证

我要验证 RLS 真的拦住人了。请教我: 1) 怎么快速再注册/造一个"游客"测试账号(普通账号,不是站主); 2) 用这个游客账号登录后,我应该看到什么、看不到什么 (应该:只看得到 is_free=true 的免费内容;is_free=false 的看不到;改删都被拦); 3) 换回我站主账号登录,我应该能看到全部内容、能新增能改; 4) 一个简单的对照清单,让我能逐条核对"游客被挡住、站主放行"。 如果游客能看到非免费内容、或游客能改内容,说明策略漏了,请你修。

【交底复盘+存档咒】· 听人话复盘并固定成果

RLS 这一课结束了。请用大白话给我复盘: 1. profiles 和 contents 现在各有哪些策略,分别是"谁能读、谁能改、谁能增删"; 2. 现在 is_free=false 的非免费内容,为什么连会员都还看不到?(我想确认是因为 is_member 下一课才加) 3. 这道门跟下一课、第 12 课的付费墙是什么衔接关系。 说完,请再帮我存一个档(git 提交),备注"RLS 渡劫已过"。
填空说明:本课咒语基本无需填空,直接整段发即可。若你之前给字段起的名字和我这里不同(比如 is_free 你叫 freecreated_by 你叫 owner),法器在【交底咒】那步会自己读出真实字段名并对齐,你不用手动改。

🆘 卡住了?(按你看到的现象找)

今天最常见的卡点只有一类,而且几乎都不是真故障,是「锁开了、钥匙还没配齐」。对照下面找你看到的现象。

现象:开 RLS 后,连我自己(站主)也看不到任何内容 / 页面一片空白

先检查:这八成是正常的渡劫黑屏——RLS 默认「全部禁止」,你还没配「许可读」的 SELECT 策略,所以连自己都被挡了。这不是故障,是预期剧情。 只要你还没走到第五步「配读门」,看到空白就是对的。
急救话术(照发给 Codex):
``
我给 contents(或 profiles)开了 RLS 后,内容/我的档案全看不到了,页面空白。
我知道这可能是 RLS 默认全禁、还没配读策略导致的(预期黑屏)。
请帮我配上 SELECT 读策略:is_free=true 人人可读,我自己发的内容站主可读;
profiles 我自己能读自己那行。配好后告诉我怎么刷新验证内容回来了。
``

现象:开 RLS 后,我(站主)想新增内容,存不进去 / 报错存不了

先检查:这是 INSERT 写策略没配——锁开了但没许可「站主能新增」,所以连站主自己也被挡着塞不进数据。
急救话术(照发给 Codex):
``
开 RLS 后我新增内容存不进去了(报错/没反应)。
应该是 contents 的 INSERT 写策略没配,把站主新增也挡了。
请配上:站主本人(created_by=auth.uid())可以新增内容。改完告诉我怎么验证能存了。
``

现象:新增能存进去,但存进去后我自己又读不到刚存的那条 / 新增的 created_by 是空的

先检查:这是个经典连环坑——新增时没把 created_by 填成当前用户auth.uid()),结果这条内容「不属于任何人」,读门和写策略都不认它,于是你存了却看不见、也改不了。
急救话术(照发给 Codex):
``
我新增内容时,created_by 是空的,导致存进去后我自己也读不到、改不了这条。
请改成:新增内容时自动把 created_by 设成当前登录用户(auth.uid())。
已经存进去的那几条 created_by 为空的,也帮我补上是我的。改完告诉我怎么验证。
``

现象:游客账号居然也能看到非免费内容 / 还能改内容(锁好像没拦住)

先检查:这是读门或写策略太松了——SELECT 没把 is_free=false 挡住,或者 UPDATE/DELETE 没绑 created_by=auth.uid(),等于门虚掩着。
急救话术(照发给 Codex):
``
我用游客账号登录,居然也能看到 is_free=false 的非免费内容(或者还能改内容)。
说明 RLS 策略太松了。请收紧:
SELECT 只放行 is_free=true 给所有人,is_free=false 暂时挡住所有人;
UPDATE/DELETE 只允许 created_by=auth.uid() 的站主本人。改完带我用游客账号再验一遍。
``
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好发给法器,比你瞎描述管用十倍。例:「我刚给 contents 开了 RLS(我刚做了什么);现在内容全看不到了,连我自己的也看不到(我现在看到什么);我希望免费内容人人能看、我自己发的内容我能看能改(我希望它变成什么)。」
🔧 彻底乱了、想推倒重来? 你第一步存了档。把这句发给 Codex 就行:「今天 RLS 改乱了,请把我回退到那个备注是『RLS 渡劫前·CRUD 已通』的存档,我们重新走一遍。」回到干净状态,从第三步重来——这正是渡劫前存档的意义。

✅ 出关自查(全部勾上才算过这一关)

profiles 表已开 RLS,每个人只能读、只能改自己那一行(别人那行读不到、改不了)
contents 表已开 RLS:免费内容(is_free=true)任何人能读非免费内容暂时挡住所有人
写策略已立:只有站主本人能新增、编辑、删除内容——第 9 课那个「谁都能改删」的洞已补上
两个账号互验通过:站主能看全部+能存能改;游客只看得到免费内容、改删都被拦
改过的内容按 F5 刷新还在(确认是带门禁的数据库真存了,不是屏幕假象)——这是里程碑②
听懂了:今天非免费内容连会员都看不到,是因为 is_member 下一课才加;这道读门是付费墙的地基,第 12 课自然扩展、不是推翻

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上多了道后端门禁——你还拿到了一件能反复用的东西:一套写明白的 RLS 四件套 SQL 模板。以后做第二个站、帮朋友、接私单,凡是「要给数据库立门禁」的活,照着它改几条列名,几分钟就能把读门和写策略立起来,不用再从零琢磨。

  • RLS 四件套 SQL 模板profiles 各管各、contents 立读门,SELECT / INSERT / UPDATE / DELETE 四条规矩配齐,靠 auth.uid() 认人。文件:../takeaways/10-RLS四件套.sql.md怎么用:整段复制 → 发给法器 → 让它替你粘进 Supabase SQL 编辑器点运行,你一行 SQL 都不用自己写[is_free][created_by] 这些列名若和你的不同,把整段连同真实字段名发给法器,让它对齐后回贴;最后一段「交底法」记得发,让法器把这套门禁规则更新进 AGENTS.md。
💡 可分享:「Supabase 的 RLS 四件套(读/增/改/删四条策略 + auth.uid() 认人)我整理成一套模板了,拿去用——给数据库立门禁,免费内容人人看、付费内容锁住,几分钟搞定。」——只讲方法、不含任何钥匙,放心晒。

🌱 加练(选做)+ 下一课

加练:给自己出一道「越权演练题」——用游客账号,试着去改一条站主发的内容(在页面上点编辑、改个字、保存)。你会看到它改不动 / 被拦下 / 报错。亲手撞一次这堵墙,你才真信「锁是真的锁住了」。截一张「游客看不到非免费内容」的对照图,这是你通经脉四层、过完中期渡劫的里程碑②。

下一课预告:门禁立起来了,可你有没有注意到一个别扭的地方——

现在 is_free = false 的非免费内容,连付了钱的会员都看不到(因为压根还没有「会员」这个身份)。门是锁上了,但还没给任何人发钥匙

下一课(第 11 课),我们给 profiles 加上 is_member(会员开关) 这个字段,让「免费用户」和「会员」第一次分成两重天——is_free 这个字段也终于要真正派上用场了。等到第 12 课,付费墙就会在今天这道读门上自然长出来:把读策略统一成「免费内容 OR 会员可读」。今天你打的这道地基,下一课就要在上面盖墙了。

🔖 小提示:你这一课已经让法器存了「RLS 渡劫已过」的档。下一课加 is_member 是在这个干净底座上动小手术,放心改——真出岔子,一句「回到『RLS 渡劫已过』那个档」就能重来。九成修士都在这道渡劫关二十分钟内重生——你已经是过了劫的人了。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 11 课

定品分阶 · 免费会员两重天

会员专属

# 第 11 课 · 定品分阶 · 免费与会员两重天

课头

🪷 境界:筑基后期 · 凝金锋一层
🚪 从今天起,你正式踏入第三层「闭环」——前两层你打通了「连接」(装法器、接后端)和「读写」(数据增删改查),从这一课起,你要把它收成一门生意:会员 + 支付 + 上线。本课先立「会员」的界,后面几课接上收款、再正式上线,一整条商业闭环就此起步。
预计用时:75 分钟
🏆 本课产出:给名册(profiles 表)装上付费开关——一个叫 is_member 的字段;再把藏经阁(contents 表)里的内容分出两档:哪些免费给所有人看(is_free = true),哪些只留给会员(is_free = false)。最后把「免费能拿什么、会员多拿什么」写成一张对照表存进项目。
🚫 今天不做:今天不做付费墙(前端遮罩、后端拦截统一留到第 12 课)、不碰收款(第 13 课)、不写激活码。今天只是给内容定档、给人定级——立好「两重天」的界,墙明天再砌。
📜 入凝金锋第一层。藏经阁中典籍已能增删改阅,可阁中所藏,至今一视同仁——路过的散修与入门的真传,看到的竟是同一架经卷。今日不动刀兵,先定品分阶:为每一卷典籍盖上印——「此卷公示,任人取阅」或「此卷秘传,唯我门人」;再于名册之上,立一道「门人」朱记,记下谁已登堂、谁仍在外。界既已分,明日方能于界上立墙。
📷 修炼笔记卷轴位(待补):藏经阁经卷自动分作两架,一架敞亮供人取阅、一架蒙上薄纱待启;名册上一行行朱记次第亮起(门人/散修),分野初现,墙未起。

这一课,你在干一件什么事

回顾一下你现在站到哪了:

  • 第 6 课,你的站能注册、能登录了——每注册一个人,后台 profiles 表(名册)就自动多一行。
  • 第 7-9 课,你给站建好了 contents 表(藏经阁),站主自己能增、查、改、删内容(一套完整 CRUD)。
  • 第 10 课,你给内容上了第一道读权限锁(行级安全 RLS):当时定的规矩是——is_free = true 的内容任何人能读,is_free = false(非免费)的暂时一律挡住。那时候你站里还没有「会员」这个概念,所以非免费内容是「先一刀全挡」,等的就是今天。

今天做两件事,把那个「等的就是今天」补上:

  • 给人定级:在 profiles 表里加一个字段 is_member(是不是会员,默认 false)。这就是你整座站唯一的付费开关——以后谁付了钱,就把谁这一行的 is_member 翻成 true
  • 给内容定档:把藏经阁里的内容分两档——一部分标成 is_free = true(免费试读,吸引人进来),一部分标成 is_free = false(会员专属,留作付费理由)。第 7 课建表时 is_free 字段就已经埋好了,今天才第一次真正用上它
💡 为什么把「定级」「定档」单独拎出来做一课,不直接做付费墙? 因为「墙」要拦人,得先知道拦谁、拦在哪条内容前is_member 决定「拦谁」(不是会员的拦),is_free 决定「拦哪条」(非免费的才拦)。这两样是付费墙的两个开关,今天先把开关装好、各自试通;第 12 课才把它们接成一道真正能拦人的墙。先立界,再砌墙,一步一个脚印,不容易乱。
💡 今天会写一行代码吗? 不会。加字段、改内容档位,都在 Supabase 网页控制台点鼠标完成;改完之后,照例把改动交底给法器(让控制台和代码用同一份说明书)。你只负责点和确认,法器负责记账。

主线步骤(跟着做,每步都有「看到什么算成功」)

第一步 · 在名册上加「付费开关」字段 is_member

打开浏览器,登录 Supabase,进你这个项目,左边点 Table Editor(表编辑器),选中 profiles 这张表(你的名册)。

我们要给它加一个新字段(数据库里叫「列 / Column」):

  • 字段名:is_member
  • 类型:boolean(布尔,意思是「是 / 否」两种值)
  • 默认值(Default Value):false新注册的人默认都不是会员——这一点很重要,下面会专门强调)

操作:在 profiles 表上方找 「+ 新建列 / Add Column」(或表名旁的下拉菜单里的 New Column),填上面三项,保存。

⚠️ 务必把默认值设成 false。如果忘了设、或设成了 true,那以后每个新注册的人一进来就是会员,等于你的付费墙天生漏了个大洞(所有人不付钱也是会员)。设成 false,才是「默认非会员、付费才解锁」的正路。这一条第 12 课砌墙时会再验一次。
看到什么算成功profiles 表里多出一列 is_member,类型是 boolean,已有的几行(包括你自己那行)这一列都显示 false(或空格代表 false)。

📷 截图位:profiles 表里多出 is_member 字段(默认 false)。
🌿 名册之上,朱记之位已留。此位空悬,记的是「门人」二字——今日只是凿好印槽,他日付费者至,朱印自落。

第二步 · 把你自己这一行手动改成会员(给后面测试用)

光有字段还不够——你得有至少一个会员账号,才能在后面几课里测试「会员能看到、游客看不到」。最方便的就是把你自己先设成会员。

还在 profiles 表里,找到你自己那一行(按 email 认,就是你第 6 课注册登录用的那个邮箱),双击 is_member 那个格子,把它从 false 改成 true,保存。

看到什么算成功:你自己那一行的 is_member 显示 true(打勾 / 显示 true),其他行(如果有别的测试账号)还是 false

📷 截图位:把自己那行 is_member 手动改成 true · 保存成功。
💡 这就是「手动开通会员」的本体。第 13 课做收款时,所谓「输激活码解锁」,本质就是自动帮用户做了你现在手动做的这件事——把某个人的 is_memberfalse 翻成 true。你现在亲手翻的这一下,就是整套付费系统最核心的那个动作。先看清它,后面就不神秘了。

第三步 · 把内容分出「免费 / 会员」两档(用上 is_free)

切到 contents 表(你的藏经阁)。第 7 课建表时,这里就留好了一个字段 is_free(这条内容免不免费)。今天第一次真正用它。

打开 Table Editor,逐条给你已有的几条内容定档(双击 is_free 格子切换 true / false):

  • 留 2-3 条标成 is_free = true(免费试读):挑你内容里最能勾人、最像"样品"的那几条。这是免费用户进站后唯一能看全的东西,作用是让人尝到甜头、产生"想看更多"的冲动
  • 其余标成 is_free = false(会员专属):这些就是你将来收费的理由——只有会员才能看全。
💡 免费几条、收费几条没有标准答案,但有个朴素经验:免费的得足够好(差了没人想付费),又不能太多(多了没人需要付费)。常见做法是免费放总量的 10%-20%、且挑最亮的。今天先随手分,以后随时能改(双击切换而已)。
看到什么算成功contents 表里,有几条 is_free = true、有几条 is_free = false,你能一眼说清「哪几条免费试读、哪几条会员专属」。

📷 截图位:站里某条内容标成会员专属(is_free = false)。
🌿 经卷已分作两架:一架敞亮,散修可阅;一架覆纱,唯候门人。界,至此立成。

第四步 · 把这两处改动交底给法器(控制台和代码对齐)

你刚在 Supabase 网页上动了两处结构:profiles 多了 is_membercontentsis_free 开始投入使用。照老规矩——网页上改了什么,就得让法器也知道,免得日后「控制台里是这样、代码里以为是那样」对不上。

打开你的法器 Codex,把下面 📜 咒语卡里的【交底咒】整段发给它(记得把方括号填成你刚才的真实改动)。

看到什么算成功:法器读完后,用人话给你复述一遍它理解的「这一刀切在哪」——大意应是:「profiles 表新增 is_member 布尔字段、默认 false,用来标记谁是付费会员;contents 表用 is_free 区分免费试读和会员专属。我已在项目的表结构说明里同步记下,今天还没动读权限策略(那是第 12 课)。」

📷 截图位:法器用人话复述「这一刀切在哪」(透明层)。
💡 法器干了啥(看得懂的透明层):它把你网页上的两处改动,抄进了项目里那份"表结构说明书"(第 7 课起就在维护的那份),让代码侧和数据库侧重新对齐。它没有碰你站的读权限、没有改任何页面、没有上墙——这些都得你下一课明确点头才做。它只是个记账员,把"现在表长这样"记准。

第五步 · 列一张「免费 vs 会员」权益对照表,放进项目

最后一步,把今天定的"两重天"写成一张人能看懂的对照表——不是给数据库看的,是给你自己和将来的买家看的:免费用户能拿到什么、会员多拿到什么。这张表第 13 课做招生页时会直接拿来用(它就是你"凭什么收费"的说明)。

让法器帮你生成(见 📜 咒语卡【对照表咒】),存成项目里一个文件,比如 docs/membership-benefits.md。一张最朴素的对照表长这样:

权益
免费用户
会员
注册登录
浏览免费试读内容(is_free
解锁全部会员专属内容
(按你主题加,如:下载 / 收藏 / 更新提醒)
看到什么算成功:项目里多出一份 membership-benefits.md(或类似命名),里面这张对照表用你自己的主题词填好了(不是"内容 1 / 内容 2",而是"基础食谱 / 全部进阶食谱"这种具体话)。

📷 截图位:项目里多出一份「免费 vs 会员 权益对照表」。
💡 这张表是给"人"看的,前面三步是给"机器"看的——is_member / is_free 是机器判断用的开关,对照表是把这套开关翻译成买家能懂的"我花钱买到啥"。两边说的得是同一件事,第 13 课写招生页时它俩会对上。

番外 · 你的会员卡定多少钱(极简「定价心理」)

这一节不动数据库、不写代码,是纯思路。前面你定好了"免费 vs 会员"分别给什么,剩下一个绕不开的问题:会员卡到底标多少钱、怎么把这个价说得不像割韭菜? 第 13 课做招生页就要填这个数字,今天先把脑子里的账理顺。读 5 分钟,第 13 课能少纠结半天。

定价不是玄学,下面 4 个人尽皆知的小套路,你知道了不一定全用,但至少被别人用时能看穿、自己用时不心虚

1. 尾数价(¥9 / ¥99 比 ¥10 / ¥100 顺手)

把价格标成 ¥9¥39¥99,而不是 ¥10¥40¥100。差一块钱,但买家第一眼读到的是"几十块"而不是"上百块",心理门槛低一截。这不是骗——它是给犹豫的人一个台阶,价格本身没变。别滥用到 ¥99.9 这种小数点,普通会员卡 ¥9 / ¥19 / ¥39 / ¥99 这种整尾数就够了。

2. 年付优惠(用"省了多少"代替"贵了多少")

如果你想做"按月续",那就同时给一个年付价,并把它标成"相当于每月 ¥X、立省两个月"。买家算的不是"年付要一次掏一笔",而是"原来年付更划算"。一句话原则:月付让人轻松上车,年付让人觉得占了便宜——两个都给,让人自己挑。如果你嫌按月续麻烦(很可能),那就只做一次买断,反而最干净(你买这门课就是一次买断,没有任何续费——这本身就是个让人放心的定价)。

3. 锚定(先给个"贵的",再给"它")

人对价格没有绝对感觉,只有对比。所以聪明的招生页会先亮一个高价做参照,再把你真正想卖的价摆出来,后者立刻显得便宜。

📌 你已经见过一次锚定了:你买这门课时,页面写的是「首发筑基期价 ¥199 / 正式价 ¥299」——那个划掉的 ¥299 不是骗你,它是个诚实的静态锚:没有倒计时、没有虚高划线、没有"还剩 3 个名额"。它只是老老实实告诉你"正式期会涨到这个数,你现在是首发价"。这就是锚定的正路——给真实参照,不制造假紧迫。你给自己会员卡定价时,也可以这么干:标出"单买全部内容值 ¥X,开会员只要 ¥Y",但那个 ¥X 得是你真敢单卖的价,不能是凭空编的虚高数。

4. Most Popular(替犹豫的人做选择)

如果你给了好几档(比如月卡 / 年卡 / 永久卡),在中间那档上贴个"最受欢迎 / Most Popular"小标签。大多数人面对一排选项会懒得想、直接选你推荐的那个——所以你想主推哪档,就给哪档贴标。这不是耍诈,是帮选择困难的人省脑子;前提是那档确实是性价比最好的,否则就成了坑人。

💡 第一次做付费站,建议你别上多档——招生页上单推一档最省心(你买这门课也是单档 ¥199 一次买断,没让你在"基础版 / 高级版 / 旗舰版"里挑花眼)。等你有了真实用户、摸清他们愿意为什么付钱,再考虑分档不迟。
🌿 定价之术,看似在算钱,实则在替买家把账算明白。割韭菜与不割,只差一念:是用真参照让人看清值不值,还是用假紧迫逼人冲动下单。你这门课怎么对你,你就怎么对你的人——把账摊开,把选择留给对方。
这一节学到什么算成功:你能用一句话说清"我的会员卡打算卖多少、为什么这么标"——比如「我单推一档 ¥39 永久会员,招生页上标『单买全部进阶食谱值 ¥99,开会员只要 ¥39』,那个 ¥99 是我真敢单卖的价,不是编的」。把这句写进备忘录,第 13 课直接拿来用。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器的提示词。【...】 是要你替换成自己真实情况的填空,其余照抄。

【交底咒】· 把"加字段 / 用 is_free"两处改动同步给项目(第四步用)

我刚在 Supabase 网页控制台改了两处,请你把项目里的表结构说明同步更新,并用大白话给我复述一遍你的理解: 1. profiles 表新增了一个字段 is_member,类型 boolean,默认值 false,用来标记某用户是不是付费会员。 2. contents 表里原有的 is_free 字段开始投入使用:is_free = true 表示免费试读、任何人可读;is_free = false 表示会员专属。 要求: - 只更新项目里记录表结构的那份说明文件,保持和数据库一致; - 【今天不要改任何读权限 / RLS 策略,不要改前端页面,不要做付费墙——这些是第 12 课的事】; - 改完后用一句人话告诉我:你理解这次"免费 vs 会员"这一刀切在哪、你具体改了项目里哪个文件。
填空说明:把 【今天不要改…】 这一整条原样保留(这是给法器的红线,防它擅自上墙)。如果你第三步实际分档和上面描述不同,按你的真实情况微调 1、2 两行即可。

【对照表咒】· 生成「免费 vs 会员」权益对照表(第五步用)

我的会员站主题是【在此填你第 1 课定的主题,例如:宝妈辅食食谱】。 我已经把内容分成两档:免费试读的有【举 1-2 个具体例子,例如:6 月龄入门米糊】,会员专属的有【举 1-2 个例子,例如:全部进阶辅食 + 周计划表】。 请帮我生成一份 Markdown 格式的「免费 vs 会员 权益对照表」,要求: - 用我这个主题的真实词汇(不要写"内容1/内容2"这种占位); - 三列:权益项 / 免费用户 / 会员,用 ✅ ❌ 标注; - 至少包含:注册登录、浏览免费试读内容、解锁全部会员专属内容这三项,再按我的主题补 1-2 项; - 存成项目里的 docs/membership-benefits.md 文件,存好后告诉我路径。
填空说明:两个 【...】换成你自己的主题和真实内容例子,其余照抄。

🆘 卡住了?(按你看到的现象找)

现象:加字段时报错,或保存不了 / 没反应

先检查:字段名是不是写成了 is_member(全小写、下划线、没空格没大写)?类型是不是选的 boolean?类型选错(比如选成 text 文本)最容易出问题。
急救话术(照做):删掉刚加的那一列重来一次,字段名严格输 is_member,类型严格选 boolean(bool),默认值那一栏填 false。三项都对了再保存。

现象:加完字段,已有的行 is_member 那一格是空的,不是 false

先检查:空格在数据库里通常等于 false(NULL),多数情况不影响——但为了干净、也为了第 12 课砌墙时不出岔子,最好让它明确是 false
急救话术:把【交底咒】发给法器前,先加一句:「请告诉我:profiles 表里 is_member 为空(NULL)的行,是否需要统一刷成 false?如果需要,给我一句在 Supabase SQL Editor 里能直接跑的语句,并解释它干啥。」按它给的去 SQL Editor 跑一次即可(一句 UPDATE 语句,法器会解释)。

现象:把自己 is_member 改成 true 保存后,刷新又变回 false / 没保存上

先检查:是不是改完没点保存(Supabase 表格里改完格子,有的版本要点一下「Save / 保存」或回车确认)?或者改的不是你自己那一行(认 email,别认错行)?
急救话术:按 email 重新找到你自己那一行,双击 is_member 格子改成 true确认页面上出现了"已保存 / Saved"提示再离开。刷新页面,确认那一格稳定显示 true

现象:不确定到底免费几条、收费几条,怕分错

先检查:这事没有标准答案、且随时能改(双击切换而已),不用纠结。
急救话术:今天先按"最亮的 2-3 条免费、其余会员专属"随手分,跑通流程要紧。等第 13 课做招生页、第 15 课让真人来用时,你自然会想调——到时候双击改就行,不影响任何代码。
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好,原样发给法器或答疑处,比你瞎描述管用十倍。例如:「我刚在 profiles 表加了 is_member 字段、类型 boolean;我现在看到保存时报红字 ...;我希望它能加成功、默认 false。」

✅ 出关自查(全部勾上才算过这一关)

profiles 表里多了一个 is_member 字段,类型 boolean默认值是 false(我亲眼确认过默认不是 true)
我把自己那一行is_member 改成了 true,刷新后仍然是 true(我有了一个会员测试账号)
contents 表里的内容已分出两档:几条 is_free = true(免费试读)、几条 is_free = false(会员专属),我能一句话说清哪是哪
我把这两处改动交底给了法器,法器用人话复述了"这一刀切在哪",并确认没动读权限 / 没上墙
项目里多出一份「免费 vs 会员」权益对照表(用我自己主题词填好),存在 docs/membership-benefits.md

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上多了个付费开关——你还拿到了一件能反复用的东西:一套把「免费 / 会员」立起来的标准件。以后做第二个站、帮朋友、接私单,照着改几个词,几分钟就能再分出一道「两重天」。

  • 会员分级模板 — 一段加付费开关的 is_member 字段 SQL(点鼠标加列卡住时的等价后路)+ 一张「免费 vs 会员」权益对照表模板(给买家看的「凭什么收费」说明书)+ 一段交底法。文件:../takeaways/11-会员分级模板.md怎么用:加字段优先按课文点鼠标,想让法器一句话搞定就把第一段 SQL 整段发给它运行(默认值已写死 false,照抄别改);对照表把里面的 【方括号】 换成你自己主题的真实词、前三行照抄保留、后面按主题补 1-2 行,存成 docs/membership-benefits.md;改完照例发第三段交底法给法器同步。
💡 可分享:「我的会员站今天分出了『两重天』:免费的能尝鲜,会员的解锁全部——付费开关、权益对照表都立好了,就差砌墙了。」——只讲进度、不含任何钥匙,放心晒。

🌱 加练(选做)+ 下一课

加练:在 Supabase 里再注册一个全新的测试邮箱(或让法器告诉你怎么在 Authentication 里手动加一个测试用户),它的 is_member 会自动是 false。这样你手头就有了一个会员(你自己)+ 一个游客(新账号)——这正是第 12 课验证付费墙时要用的"两个账号互验"的两位主角。提前备好,下一课更顺。

下一课预告:界已经分好了——人分了级(is_member)、内容分了档(is_free),可是……墙还没砌

此刻你站里那些 is_free = false 的会员内容,游客其实还能不能看到? 第 12 课,你会先亲手验证这道"细思极恐"的隐患,然后把今天装好的两个开关(is_member × is_free)接成一道真正能拦人的付费墙——非会员看会员内容,直接被后端拦在门外。这是凝金锋最关键的一道渡劫,也是你这座站第一次真正"能凭权限拦人"。

🔖 小提示:第 12 课砌墙用的读权限规则,正是第 10 课那道读门(is_free 可读 / 非 free 暂挡)的自然长大——到时把"暂挡"那半句,扩成"is_free 可读 是会员可读"。不是推倒重来,是顺着同一条路往前走一步。今天先把开关备齐,墙明天就好砌了。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 12 课

设墙立禁 · 付费墙拦住凡客

会员专属

# 第 12 课 · 设墙立禁 · 付费墙拦住凡客

课头

🪷 境界:筑基后期 · 凝金锋二层
预计用时:120 分钟
🏆 本课产出:给你的会员专属内容立起一道真·付费墙——免费账号只能看到简介和一张「解锁令牌卡」(试读墙),会员账号才能看到完整正文。前端用渐隐遮罩拦住眼睛,后端 RLS 真正拦住数据,两层一起上。
🚫 今天不做:不做收款、不做激活码(下一课才教把钱收进来)、不碰 webhook / 自动发码(那是金丹期的事)
📜 藏经阁已分阶:免费试读之卷敞开示人,会员心法之卷却需缘分。今日设墙立禁——凡客至此,但见经卷上半截字迹清晰、下半截云雾缭绕,墙头悬一枚「渡口令牌」,曰:持令者方可越墙窥全篇。然则障眼之雾终是浅术,雾下经文仍在;真正的禁制,是藏经阁深处那道「行级安全」的法阵——无缘者纵掀开云雾,掌中亦只余空卷。
📷 修炼笔记卷轴位(待补):一卷经书上半截清晰、下半截被云雾渐隐遮住,雾上悬一枚发光令牌;卷后另有一道隐形法阵,凡客掀雾只见空白,会员近前则字字浮现。

这一课,你在干一件什么事

到上一课(第 11 课)为止,你已经有了两样东西:

  • 每个用户的 profiles 里有一个 is_member 开关(true = 已解锁会员 / false = 普通免费用户);
  • 每条内容的 is_free 标记(true = 免费试读 / false = 会员专属)。

它俩还没真正连起来干活——现在一个免费用户,照样能看到会员专属内容的完整正文。开关装好了,墙还没砌。

今天就砌这道墙。它分两层,缺一不可:

  • 前端遮罩(试读墙):免费用户打开一条会员专属内容时,正文只显示上面一截、下面渐隐成雾,雾上压一张「渡口令牌卡」——告诉他「这是会员内容,解锁后可看全文」。这一层管好看、管引导,让人知道墙在哪、怎么进。
  • 后端 RLS(真拦截):把第 10 课就立好的 contents 读策略统一升级——会员专属内容,数据库只对会员返回正文,对免费用户根本不发。这一层管真安全
⚠️ 一句大实话,今天必须记住前端遮罩是给人看的,不是给坏人挡的。 那层渐隐的雾,任何人按一下键盘上的 F12(打开浏览器开发者工具)就能掀开看到雾下的正文——因为正文已经下发到他浏览器里了,只是用样式盖住而已。真正拦住数据不外泄的,是后端那道 RLS。 所以今天我们前端后端两层都做:前端负责体面和引导,后端负责真刀真枪地拦。这也正是上一阶第 10 课那道行级安全渡劫,今天自然长出来的样子。
💡 这不是新机制,是老门的自然扩展:第 10 课你给 contents 立读策略时是「is_free 可读 / 非 free 暂时全挡」(那时还没 is_member,连会员自己都被挡在外面,是临时的)。今天等于把那道门的判断从「非 free 一律挡」改成「非 free 时,会员放行、非会员挡」——is_free OR is_member。同一道门,只是补上了「会员例外」这一条。不是推翻重来,是把当初留的口子接上。
🪷 meta 钩子(本课的小彩蛋):你正在看的这个筑基课网站,它的付费墙就是这么做的。等会儿你把墙砌好,会在墙顶看到一行「自证横幅」——它会告诉你:「你眼前这堵墙的做法,和你正在学的这个站,一模一样。」你不是在学一个玩具,你正在亲手复刻你正在用的东西。

主线步骤(跟着做,每步都有「看到什么算成功」)

全程法器(Codex)替你改代码,你只负责:发咒语 → 看法器人话回报 → 用两个账号在浏览器里点一点验证。你不需要自己写一行代码。

开工前准备好两个账号:一个免费账号is_member = false,比如你第 6 课注册的那个普通号)、一个会员账号is_member = true)。会员账号怎么来?你第 11 课已经会在 Supabase 后台把某个账号的 is_member 手动改成 true 了——今天就用那个。两个账号是本课的「试金石」,砌完墙要拿它俩一个个试。

第一步 · 让法器先看懂现状,再动手

打开你的项目。先别让它砌墙——让它先把现状摸清:内容是怎么读出来显示的、is_freeis_member 现在有没有真的在起作用。

把 📜 咒语卡里的 【交底咒】 整段发给 Codex。

看到什么算成功:Codex 用人话回你一段,大意是「你的内容列表/详情是从 Supabase 的 contents 表读的;每条有 is_free 标记;用户的会员身份存在 profiles.is_member目前免费用户也能看到会员专属内容的完整正文,前端没遮、后端 RLS 也还没按会员身份区分」。它如实点出了「现在墙还没砌、谁都能看全文」这个现状——说明它看懂了,没瞎猜。
🌿 砌墙之前先看清地界:哪段是免费试读、哪段是会员心法、当下又是谁都能长驱直入。法器先识得这层地界,落砖才不会砌歪。

第二步 · 砌前端遮罩(试读墙):会员内容下半截渐隐 + 令牌卡

先砌好看的那一层。让法器改成:当一条内容是会员专属is_free = false)、而当前用户不是会员时——

  • 正文只显示开头一小截,往下渐隐成一片朦胧(渐变遮罩);
  • 渐隐处压上一张「渡口令牌卡」:写明「🔒 此为会员心法,解锁后可阅全文」,配一个「了解如何解锁」的按钮(今天先不接真支付,按钮可以先指向一个占位说明,下一课才接激活码)。

把 📜 咒语卡里的 【试读墙咒】 发给 Codex。它改完会告诉你动了哪个文件、加了什么。

看到什么算成功:用免费账号登录,打开一条会员专属内容——正文上面看得见、下面渐隐成雾,雾上压着一张「渡口令牌 / 解锁」卡片。再打开一条免费试读内容(is_free = true),它完整显示、没有任何遮罩

📷 截图位:会员专属内容下半截渐隐 + 渡口令牌卡(前端试读墙)。
💡 为什么免费内容不能也被遮? 试读墙的命门在「让人先尝到甜头」——免费内容必须完整、好用,访客才愿意为锁着的那部分掏令牌。遮错了对象(把免费的也遮了),等于把客人挡在门外,墙就白砌了。

第三步 · 诚实自证:亲手按 F12,看见「前端遮罩拦不住数据」

这一步别跳——它是今天最重要的「认知」步骤,也是你将来不被忽悠的底气。

还是用免费账号,停在那条被渐隐遮住的会员内容页上。按一下键盘上的 F12(或鼠标右键 →「检查 / Inspect」),打开浏览器的开发者工具。在弹出的面板里找到「Elements / 元素」那一栏,往下翻——

看到什么算成功:你会在那堆代码里,亲眼找到被雾遮住的那段会员正文的完整文字——它根本没被删掉,只是被一层样式盖住了。这就证明了:前端遮罩只是「盖住」,没有「拦住」。 数据已经下发到浏览器里,任何稍懂的人 F12 一掀就看见。

📷 截图位:F12 控制台里能看到被遮住的正文(诚实自证 · 前端遮罩可见)。
⚠️ 这一步不是要吓你,是要给你装上后端 RLS 的「动机」:如果只做前端遮罩就收工,等于你的会员内容对任何会 F12 的人都是免费的。下一步我们就把真正的拦截——后端 RLS——加上,让数据库对非会员根本不返回会员正文,那时你再 F12,掀开雾只会看到一片空白。这才是真墙。
🌿 障眼之雾,掀手即破;唯有藏经阁深处那道法阵,令无缘者掌中只余空卷。下一步,立这道法阵。

第四步 · 砌后端 RLS:把第 10 课的读门统一成「is_free OR is_member」

现在砌的那一层。让法器去 Supabase 改 contents 表的读取策略(RLS Read Policy)——这正是第 10 课那道门的自然扩展

  • 第 10 课的门是:is_free = true 可读 / 非 free 一律挡(那时没有 is_member)。
  • 今天统一成:is_free = true(免费试读,谁都能读) OR 当前登录用户的 is_member = true(会员,能读全部)

也就是说,数据库在返回一条会员专属内容的正文前,会先看「问它要数据的这个人是不是会员」——是,就给;不是,就根本不返回正文

把 📜 咒语卡里的 【RLS 统一读门咒】 发给 Codex。它会替你在 Supabase 后台执行策略变更,并用人话回报它改了什么。

看到什么算成功:Codex 回你一段人话,大意是「我把 contents 表的读取策略更新了:现在是 is_free = true 或者 当前用户在 profilesis_member = true 才能读到这条;会员专属内容对非会员不再返回正文。这是第 10 课那道读门的扩展,不是新建一道冲突的门」。它明确说出了「这是第 10 课的扩展、非冲突替换」——口径对上了,就算成功。
💡 为什么是改一道门、而不是又加一道门? 一张表上若有两道方向打架的读策略,数据库会被搞糊涂、还容易留安全漏洞。正确做法是把第 10 课那道门的条件升级(从「非 free 全挡」升成「非 free 时会员放行」),始终只有一道读门,逻辑干净、不自相矛盾。法器会替你这么做,你只要确认它的口径是「扩展、不是新建打架的门」。
⚠️ 法器代你动 Supabase 时,看懂这句就够:它会说「我改的是 contents 表的 SELECT(读取)策略」。SELECT = 读。它没动你的内容数据本身(你录的那些标题正文都还在),只动了「谁有资格读到」这条规则。改错了也不丢内容,最多是策略要重调。

第五步 · 两账号实测(上):会员账号——放行

墙砌好了,现在拿两个账号当试金石,一个个验。先验会员

会员账号is_member = true)登录,打开那条会员专属内容。

看到什么算成功:会员账号下,那条会员专属内容完整显示了全文没有渐隐、没有令牌卡。会员被放行

📷 截图位:会员账号登录后 · 同一条内容完整显示(放行)。
🌿 持令者越墙,字字分明——这是「缘分到了」的样子。

第六步 · 两账号实测(下):免费账号——被拦(连 F12 也掀不出正文了)

现在退出会员账号,换免费账号is_member = false)登录,打开同一条会员专属内容。

看到什么算成功:免费账号下,同一条内容只剩简介 + 渐隐 + 那张渡口令牌卡,看不到完整正文。免费账号被拦住了。

📷 截图位:免费账号登录后 · 同一条内容只剩简介 + 令牌卡(被拦)。

再做一次第三步的 F12 验证(关键):停在这条被拦的页上,按 F12 打开开发者工具,往 Elements 里翻那段会员正文——

看到什么算成功:这一次,你翻不到那段会员正文了——掀开雾,雾下是空的。因为后端 RLS 这一关,数据库压根没把正文发到这个免费账号的浏览器里前端的雾 + 后端的不发,两层一起,会员内容这才是真的拦住了。 这就是「真拦截靠后端 RLS」的眼见为实。
🎉 本课微里程碑同一条内容,会员看得见全文、免费只看得见简介,而且 F12 也掀不出来。 你亲手砌成了一道真·付费墙——这是你筑基产品「能收钱」的前提(下一课就把钱收进来)。截下「会员放行」和「免费被拦」这两张对比图,发圈正合适。

第七步 · 挂上「自证横幅」(meta 钩子)+ 让法器交底

最后两件小事,一起做。

其一,挂自证横幅:在付费墙顶上挂一行小字横幅——「🪷 你眼前这堵墙的做法,和你正在学的这个筑基课网站一模一样:前端试读遮罩 + 后端 RLS 真拦截。」这就是把 meta 钩子落到页面上:你不是在学玩具,你在复刻你正在用的东西。

其二,让法器用人话给你交个底(透明层):让它复盘这一课到底改了哪些文件、前端遮罩和后端 RLS 分别在哪起作用、为什么说后端那层才是真拦截。

把 📜 咒语卡里的 【自证横幅咒】【交底复盘咒】 发给 Codex。

看到什么算成功:①付费墙顶部出现那行自证横幅(截一张图);②Codex 回你一小段人话,大意是「前端我在 [某文件] 加了渐隐遮罩和令牌卡,只管显示;真正的拦截在 Supabase 的 contents 读策略,已统一为 is_free OR is_member,对非会员不返回会员正文;所以就算有人 F12,也只能看到空遮罩、拿不到数据」。它把「前端管样子、后端管安全」说清了,就算成功。

📷 截图位:「你正在学的这个站」付费墙自证横幅(meta 钩子)。
🌿 墙成,禁立。凡客止于雾前,会员越墙阅典。而你最该自得的,不是这堵墙好看——是它真的拦得住

📜 咒语卡

咒语 = 可以一字不改、整段发给法器(Codex)的提示词。[方括号] 里是要你按自己情况替换的,其余照发。Claude Code 同款可用,把同一段发给它即可。

【交底咒】· 砌墙前先让法器摸清现状

我在做一个会员制内容站,内容存在 Supabase 的 contents 表, 每条有 is_free 标记(true=免费试读 / false=会员专属); 用户的会员身份存在 profiles 表的 is_member(true=已解锁会员)。 请先不要改任何代码,只读一遍我现在读取/显示内容的相关文件, 然后用大白话告诉我: 1. 内容(尤其正文 body)是从哪里、怎么读出来显示的; 2. 目前 is_free 和 is_member 有没有真的在控制"谁能看到会员正文"? 还是免费用户其实也能看到会员专属内容的完整正文? 3. contents 表现在的读取(SELECT)RLS 策略大概是什么样(第 10 课立的那道门)。 读懂了再开口,不确定就说不确定,不要猜。

【试读墙咒】· 前端渐隐遮罩 + 渡口令牌卡

请给我做一个前端"试读墙": 当一条内容是会员专属(is_free = false)、而当前登录用户不是会员(is_member 不为 true)时, 正文只显示开头一小截,往下用渐变(渐隐)遮住, 在渐隐处压一张"渡口令牌卡",写明"🔒 此为会员心法,解锁后可阅全文", 配一个"了解如何解锁"的按钮(先指向一个占位说明即可,这一课不接真支付)。 免费试读内容(is_free = true)要完整显示、不要有任何遮罩。 先小步只改前端显示这一处,改完告诉我你动了哪个文件、 以及我该用免费账号怎么在浏览器里验证遮罩生效了。

【RLS 统一读门咒】· 后端真拦截(第 10 课读门的自然扩展)

现在请把后端 RLS 真正拦截加上,这是对第 10 课已有读门的扩展,不是新建一道打架的门。 请把 Supabase 里 contents 表的"读取(SELECT)"策略,从第 10 课的 "is_free = true 可读 / 非 free 一律挡",统一升级为: is_free = true(免费试读,谁都能读) 或者 当前登录用户在 profiles 里 is_member = true(会员可读全部)。 也就是:对非会员,会员专属内容(is_free = false)根本不返回正文。 请确保 contents 表上始终只有这一道读策略,不要留两道方向冲突的策略。 执行后用大白话告诉我:你改的是哪张表的什么策略、新策略的判断条件是什么、 为什么这是第 10 课读门的扩展而不是冲突替换,以及我该怎么用两个账号验证。

【自证横幅咒】· 挂上 meta 自证横幅

请在付费墙(被遮住的会员内容)顶部加一行小字横幅,内容是: "🪷 你眼前这堵墙的做法,和你正在学的这个筑基课网站一模一样:前端试读遮罩 + 后端 RLS 真拦截。" 样式低调一点,别盖住内容。改完告诉我在哪个文件加的。

【交底复盘咒】· 听它把这一课干了啥说成人话

这一课结束了。请用大白话给我复盘: 1. 你一共改了哪几个文件; 2. 前端遮罩(试读墙)和后端 RLS(读策略),分别是在哪里、怎么起作用的; 3. 为什么说"前端遮罩 F12 就能掀开、真正拦住数据的是后端 RLS"? 现在一个免费(非会员)账号,就算 F12,还能不能拿到会员正文? 老实告诉我。
填空说明:本课咒语基本无需填空,直接整段发即可。若你的字段名和我这里不同(比如会员开关你叫别的名、正文字段不叫 body),法器在【交底咒】那步会自己读出来并对齐,你不用手动改。

🆘 卡住了?(按你看到的现象找)

现象:会员账号登录了,可那条会员内容还是被遮住 / 还是看不到全文

先检查:①这个账号在 Supabase 的 profiles 表里,is_member 到底是不是 true?(第 11 课手动改的那个,去后台再确认一眼。)②前端遮罩的判断条件,是不是真读到了当前用户的 is_member,还是写死成「非 free 一律遮」忘了放会员。
急救话术(照发给 Codex):
``
我用一个 is_member = true 的会员账号登录,但会员专属内容还是被遮住、看不到全文。
请检查:前端遮罩的判断有没有真读到当前登录用户的 is_member,
以及后端 contents 读策略是不是 is_free OR is_member(会员应放行)。
帮我修成"会员账号能看到完整正文",改完告诉我怎么用这个会员账号验证。
`
💡 先用 Supabase 后台直接看这个账号那行的
is_member` 值,是排查这类问题最快的一招——先确认数据对不对,再怀疑代码

现象:免费账号没被拦,照样能看到会员内容的完整正文

先检查:这通常是只做了前端、后端 RLS 没真改,或者前端遮罩的条件写反了。最该先确认的是后端那道读策略到底统一了没有。
急救话术(照发给 Codex):
``
我用免费账号(is_member 不为 true)登录,会员专属内容(is_free = false)的完整正文照样能看到,没被拦。
请检查两层:
1. 前端:会员专属内容对非会员有没有真的遮罩;
2. 后端(更重要):Supabase contents 表的读取策略,是不是真的统一成了 is_free OR is_member,
确保对非会员根本不返回会员正文。
两层都修好,改完告诉我怎么用免费账号 + F12 验证它"连数据都拿不到"。
``
💡 判断到底哪层漏了:停在被遮页面按 F12 翻 Elements——如果还能翻到会员正文文字,说明后端 RLS 没拦住(数据下发了),重点修后端那道读策略;如果 F12 翻出来是空的,说明后端拦住了、只是前端遮罩样子没做对,那是小问题、改前端即可。

现象:法器说改了 RLS,但好像两道策略打架了 / 报"策略冲突"或读不出任何内容

先检查:是不是第 10 课那道旧读门没被替换,和今天这道新门同时存在、方向打架了。
急救话术(照发给 Codex):
``
改完读策略后,内容读不出来了(或提示策略冲突)。
我怀疑是第 10 课的旧读策略没被替换,和新的 is_free OR is_member 这道门同时存在、打架了。
请检查 contents 表上的 SELECT 策略,确保最终只保留一道、就是 is_free OR is_member,
把多余/旧的那道清掉。改完告诉我怎么验证内容能正常读、且非会员被挡。
``

现象:F12 一打开是满屏看不懂的代码,我懵了

先检查:没事,你不需要看懂那些代码。你只做一件事——在「Elements / 元素」那栏,用 Ctrl+F 搜一下你那条会员内容正文里的一句原话
急救话术:搜得到那句原话 = 正文下发了(前端只是遮住,后端没拦,要去修后端 RLS);搜不到 = 后端 RLS 真拦住了(数据没下发,墙是真的)。F12 在这一课只当一把「检验真假墙」的尺子用,看不懂代码完全不影响。
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好发给法器,比你瞎描述管用十倍。例:「我刚用免费账号登录打开一条会员专属内容(我刚做了什么);它的完整正文照样能看到、没被拦(我现在看到什么);我希望免费账号只能看到简介、看不到会员正文,连 F12 也掀不出来(我希望它变成什么)。」

✅ 出关自查(全部勾上才算过这一关)

免费账号打开会员专属内容:只见简介 + 渐隐遮罩 + 渡口令牌卡,看不到完整正文
会员账号打开同一条内容:完整显示全文,无遮罩、无令牌卡(被放行)
后端 contents 读策略已统一为 is_free OR is_member,且表上只有这一道读门(是第 10 课读门的扩展,不是冲突替换)
免费账号在被拦页面按 F12翻不到会员正文(证明后端 RLS 真拦住了数据,不是只前端遮一下)
付费墙顶挂着 meta 自证横幅,我知道「前端遮罩 F12 可见、真拦截靠后端 RLS」这句大实话

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上立起了一道墙——你还拿到了一件能反复用的东西:一套付费墙的标准料。以后做第二个内容站、帮朋友接私单,任何「免费试读 + 付费解锁」的站,照搬这套就能立墙,不用从零摸索。

  • 付费墙模板 — 两段配套料:前端试读墙组件(渐隐遮罩 + 渡口令牌卡,管好看和引导)+ 后端 RLS 统一读门 SQLis_free OR is_member,管真安全)。文件:../takeaways/12-付费墙模板.md怎么用:整段发给法器,让它按你项目真实的 contents / profiles 字段名,把前端组件接进内容详情页、把后端 SQL 在 Supabase 执行,并确保 contents 上只留这一道读策略;前端组件填空式对齐列名即可,后端 SQL 把第 10 课那道旧策略名填进 drop policy 那行。先做后端那层,那才是真墙。
💡 可分享:「我手里有一套付费墙模板——前端渐隐试读 + 后端 RLS 真拦截。一句大实话:前端遮罩 F12 就能掀开,真正拦住数据的永远是后端那道读策略。」——只讲做法、不含任何钥匙和真实数据,放心晒。

🌱 加练(选做)+ 下一课

加练:把一条原本 is_free = true 的免费内容,在 Supabase 后台改成 is_free = false(变会员专属),再用免费账号刷新看它有没有立刻被墙拦住;然后改回 true,看它又敞开。你会直观感到——整座墙的开关,其实就攥在 is_freeis_member 这两个布尔值手里。这正是你将来运营这个站时,决定「哪些免费引流、哪些会员专属」的旋钮。截一张「会员放行 / 免费被拦」的对比图,这是你凝金锋二层的微里程碑。

加练 · 让法器自我渡劫一遍(强烈建议):付费墙是「错了会漏钱漏数据」的关键代码——这种地方值得让法器写完后自己当审查者再过一遍(业界叫 self-critique 自我批判)。把第四步那道 RLS 读策略、第二步那段前端遮罩判断贴给它,追发一句「你刚写的这段,扮一个挑剔的安全审查者再过一遍,专挑漏判和能被绕过的洞,挑出来直接改好」。具体三档咒语(基础 / 严格 / 维度)见 ../takeaways/自我渡劫咒.md

💡 别每段都用 · 省灵石:自查要多花 token(灵石),普通页面、改文案、调样式不值当。只在付费墙、支付/激活码、RLS 这类关键代码上用——和第 3 课「只充小额、设封顶」是同一套心法:灵石花在刀刃上。

下一课预告:墙砌好了,凡客被拦在了令牌卡前——可那张「了解如何解锁」的按钮,现在还是个占位

下一课(第 13 课)是这一阶的 ★渡劫关:我们把钱真正收进来。你会做一个收款码占位 + 激活码的最小支付闭环——买家付款、拿到一张「渡口令牌」(激活码 ZJ-XXXX-XXXX-XXXX)、输进去,is_member 当场翻成 true,付费墙应声消失你这一课砌的墙,下一课就有人能掏令牌过墙了。

⚠️ 下一课第一步是「合规红线」必读:个人收款码在大陆做经营性收款可能被风控冻结,所以我们的支付仅限自测演示。这不是阉割——是「任何人无需营业执照就能跑通完整商业闭环」的准入公平设计。下一课开头会把这条讲透,你先有个底。
🔖 小提示:这一课大改了 RLS 读策略,结束记得让法器顺手「存个档」(git 回档点)——下一课接支付之前留个退路,万一改崩一句话就回到「墙刚砌好」这个境界。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 13 课

灵石入袋 · 最小支付跑通

会员专属

# 第 13 课 · 灵石入袋 · 最小支付能跑通

课头

🪷 境界:筑基后期 · 凝金锋三层 · 阶段渡劫③
预计用时:120 分钟
🏆 本课产出:让你的站真的能收钱解锁——陌生人付款 → 输一串激活码 → 会员内容当场亮出来。一条完整商业闭环(注册 → 解锁拦截 → 支付验证 → 权限激活)在你自己手里第一次跑通。
🚫 今天不做:不接微信/支付宝商业接口、不写自动扣款、不碰 webhook、不碰 Edge Function 自动发码(这些是金丹期的事,今天用更稳的「手动发码」跑通闭环)
📜 设墙已成(第 12 课),凡客被挡在玄关之外。可墙再高,无门则成死关。今日凿门——立一座渡口:凡人投灵石(付款),你授一枚渡口令牌(激活码),令牌一验,门自开,is_member 之印加身,从此自由出入藏经阁会员密室。这是凝金锋三层的渡劫——也是你这座站第一次,真的能把别人的钱,变成你账上的灵石。
📷 修炼笔记卷轴位(待补):玄关重门紧闭 · 一枚刻着 ZJ- 字符的青玉令牌悬于门前 · 令牌没入门缝、石门轰然洞开、门内灵光涌出。

这一课,你在干一件什么事

第 12 课你给会员内容装了「付费墙」:游客和未付费的人,只能看到标题和试读摘要,正文被遮住了——而且就算他 F12 扒前端,后端 RLS 也不把正文给他(这是第 12 课的真功夫)。

但现在有个问题:墙是死的——付了钱的人,怎么进去?

今天就解决这件事。你要造一条完整的收钱闭环:

陌生人想看会员内容 → 撞上付费墙(第 12 课做好的) → 看到你的收款码,扫码付你 ¥199 → 你手动发给他一串激活码(形如 ZJ-A7K9-3MFX-R2WP) → 他在站上输入这串码 → 你的站校验:这码存在吗?用过没?过期没? → 全部通过 → 把他的 is_member 翻成 true,这串码当场作废 → 付费墙在他眼前消失,会员内容全部解锁

注意这一整条链路,全部在你自己的数据库里完成——没有第三方回调、没有 webhook、没有任何资质门槛。这就是为什么你一个零基础小白,今天就能让一座站「真的能收钱」。

⚠️ 但在动手之前,有一条红线你必须先看完——这关系到你会不会被冻结收款账户。下面第一步就是它,不许跳过

主线步骤(跟着做,每步都有「看到什么算成功」)

第一步 · 【必读·合规红线】个人收款码,只能用来「演示+自测」

🚫 这一步没有任何代码,但它是全课最重要的一步。读完并勾选确认,再往下做。

你今天会用到「个人收款码」(你自己的微信/支付宝二维码)。请记死下面三句话:

  • 个人收款码 ≠ 商业收款。 在大陆,用个人微信/支付宝收款码做经营性收款(持续地卖东西给陌生人),可能被风控冻结账户。这不是吓唬你,是真实风险。
  • 本课的收款码,只用于「演示」和「你自己付给自己」自测闭环。 你跑通流程、截图发圈、给亲友体验——可以。拿这个去大规模卖给陌生人收钱——不可以。
  • 真要正经经营,要走合规通道:注册个体户/公司 → 申请商户号 → 接微信支付/支付宝商户版。那是金丹期(进阶课)的内容,今天不碰。
💡 那今天做的这套,是不是"假的"、"没用的"? 恰恰相反。 你今天造的是一条真实运转的完整商业闭环:注册、登录、付费墙拦截、支付验证、权限激活——每一环都是真的在跑。唯一"换了零件"的是收款那一下:用收款码代替商户接口。这是一个准入公平的设计选择——它让任何人无需营业执照、无需商户资质,就能亲手跑通一座能收钱的站的全部骨架。等你验证了「确实有人愿意付钱」,再去补商户资质,顺理成章。先跑通,再合规,而不是先卡在资质上永远开不了张。
🌿 这也正是你脚下这门《码上飞升》筑基课网站用的同一套门禁——你买课时输的激活码,和你今天要造的,是同一个机制。你不是在学一个"玩具",你是在拆解你正在用的这个产品。
看到什么算成功:你能复述上面三句话的核心——「个人码只能演示自测、经营要走合规、商户版是金丹期」。在你的备忘录里写一行:「收款码=演示态,正式经营前补商户资质。」

📷 截图位:合规红线告知页(必读 · 已读勾选)。
💡 把这条红线也做进你的站:建议在激活码输入框旁边,放一行小字——「本站收款仅用于内测/自测演示,正式服务以官方商户通道为准」。这一步在本课第七步会让法器帮你加上。

第二步 · 请出法器,交代今天要造的三块东西

打开 Codex(你的本命法器,第 2 课装好的)。先用大白话把今天的目标交给它,别让它自由发挥

把下面这条【交底咒】整段发给 Codex(咒语卡①,可直接复制):

看到什么算成功:Codex 回你一段人话计划(不是代码),里面应该提到三件事:① 一张 activation_codes 表(渡口令牌)、② 一个校验+激活的数据库函数、③ 前端一个「输码解锁」的输入框。它先讲计划、没急着写代码,就对了。
💡 为什么先要计划、不直接写? 这是咱们的铁律——小步改、先交底。让法器先说清"它打算干什么",你看懂了再放它动手,改坏的概率低十倍。

第三步 · 建「渡口令牌」表 activation_codes

你的数据库里已经有两张表了:profiles(名册,扛着 is_member 这个付费开关)和 contents(藏经阁,你的内容)。今天加第三张、也是最后一张:activation_codes——渡口令牌。

让 Codex 帮你建表(咒语卡②)。它会生成一段 SQL,你不用看懂每一行,但你要知道这张表大概长这样:

字段
干什么用的
code
令牌本身,形如 ZJ-A7K9-3MFX-R2WP(去掉了 0/O/1/I/L 这些容易看错的字符)
used_by
谁用掉了这张码(一旦填上,这码就作废了——一次性)
used_at
什么时候用掉的
expires_at
有效期,默认发码后 7 天(防止有人买了码先不激活、转手倒卖)
batch
这是哪一批发的码(方便你管理)
created_at
这码什么时候造出来的

Codex 生成 SQL 后,会让你复制到 Supabase 后台执行(和第 7 课建 contents 表一模一样的操作:Supabase 控制台 → SQL Editor → 粘贴 → Run)。

看到什么算成功:Supabase 控制台左侧 Table Editor 里,出现了第三张表 activation_codes。点进去,字段名和上面这张表对得上。现在它是空的——没关系,下一步就往里放码。
💡 Codex 干了啥(人话版):它写了一段"建表指令",告诉数据库"开一个专门放激活码的抽屉,每张码记四件事:是谁用的、啥时候用的、啥时候过期、归哪一批"。SQL 是数据库听得懂的话,你不用会写,看懂这张表在记什么就够了。

第四步 · 生成第一批激活码(往令牌抽屉里塞码)

表建好了,但里面空空的。现在造几张真码出来——你自己测试要用,以后真卖也用这一套。

让 Codex 生成一段 SQL,往 activation_codes 里插入 3 张码(咒语卡③)。它会:

  • 自动生成形如 ZJ-XXXX-XXXX-XXXX 的随机码(避开 0/O/1/I/L);
  • expires_at 设成「现在往后 7 天」;
  • used_by 留空(表示还没人用、是有效的)。

同样,复制到 Supabase 的 SQL Editor 里 Run 一下。

看到什么算成功:回到 Table Editor → activation_codes 表,里面躺着 3 行,每行有一串 ZJ- 开头的码,used_by 是空的,expires_at 是一周后的日期。把这 3 串码抄到备忘录里——第六步你要用它们来测试。

📷 截图位:渡口令牌表 activation_codes(里面躺着几张码)。
💡 这就是你将来"发货"的动作:以后真有人付了钱,你就从这张表里挑一张还没人用、还没过期的码,发给他。这一步现在你手动做;金丹期才会学"自动发码"。手动发,反而最稳、最不容易出岔子。

第五步 · 造一个「校验+激活」的数据库函数(闭环的心脏)

这是今天最关键的一块,也是法器干活、你验收的一步。

你需要一个数据库函数(可以理解成数据库里一个"自动办事窗口"):用户把一串码递进去,这个窗口当场办四件事,一气呵成、不可拆开:

  • :这串码在 activation_codes 表里存在吗?
  • :这码有没有被用过(used_by 是空的吗)?过期了没(还在 7 天内吗)?
  • 激活:全部通过 → 把当前登录用户的 profiles.is_member 翻成 true,记下 member_since(成为会员的时间)。
  • 核销:把这张码标记成「已被这个人用掉」(填上 used_byused_at)——这码从此作废

让 Codex 写这个函数(咒语卡④)。

🔑 同源声明(重要,关系到你这门课的"含金量"):你现在造的这个"校验+激活"函数,和你正在用的这门《码上飞升》课程网站背后用的,是同一套机制。课程站用的是叫 redeem_code 的 RPC 原子方案——教学版咱们用「前端 + 数据库函数」实现,两者同源,逻辑一模一样。金丹期会把它升级成 Edge Function(自动化更强),但今天这套不是简化版玩具,是同款实现的入门档。你买课输的那串码,走的就是这条路。
🌟 想看「金丹期 Edge Function 版」长什么样? 那是选做·进阶——把今天这个原子函数套一层服务端外壳(防爆破限流 + 未来自动发码的入口)。今天这套已经完整能收费,不做那个完全不影响出师。 好奇就翻选做附录:../systems/激活码-EdgeFunction附录-选做.md(参考实现,待真机验证,有真需求再上)。
看到什么算成功:Codex 给你一段函数定义的 SQL,你复制到 Supabase SQL Editor 里 Run,提示创建成功(没有红色报错)。回到数据库,这个"办事窗口"(函数)已经就位,等着前端来调用。
🔴 配套必做 · 把"翻墙的洞"也堵上(别漏这一下,漏了付费墙等于没装):上面这个函数是"正门"——可你还记得第 10 课给 profiles 配的改策略是"本人可改自己那行"(为了让用户能改昵称)吗?麻烦就在这:数据库的行级安全(RLS)只能按"行"放行、管不到"列"——允许用户改自己那一行,他就能改这行的任意列,包括 is_member。也就是说,任何登录用户打开浏览器 F12 控制台,不输你的码、自己跑一句 update profiles set is_member=true,就能白嫖成会员,把你这整套激活码绕过去。所以造完函数,必须再让法器补一道"列锁":收回普通用户对 profiles 的整表改权,只留"昵称"这类该让他自己改的列;is_member 从此只有上面那个函数能翻(它以"表主人"身份运行,不受这条限制;你在 Supabase 后台手动开会员也照常有效)。把咒语卡④里那段已经带上了这道列锁——照发即可。

怎么验证锁严了:用一个非会员账号登录,在 F12 控制台跑 await supabase.from('profiles').update({is_member:true}).eq('id',(await supabase.auth.getUser()).data.user.id),应当改不动(报错或 0 行被改、is_member 仍是 false);而输一张有效激活码,会员照常开。两条都对,才算门正、洞也堵了。
💡 Codex 干了啥(人话版):它造了一个"一锤子买卖"的办事窗口——你把码递进去,要么"四件事全办成、当场给你开会员",要么"哪一关没过、原样退回并告诉你为什么(不存在/已用/过期)",不会办一半卡住。这种"要么全成、要么全不动"的设计,正是钱相关的事最该有的样子。

第六步 · 在付费墙下面,加一个「输码解锁」入口(前端)

数据库这边的"办事窗口"开好了,现在给用户造一个"递码的窗口口子"——前端的输入框。

让 Codex 在你第 12 课做好的付费墙那块遮罩下面,加上(咒语卡⑤):

  • 一段收款码占位区:先放一张占位图(写着"收款码 / 扫码付款 ¥199"),你以后把自己的真实收款码图替换上去即可;
  • 一个激活码输入框 + 一个「立即解锁 / 激活」按钮;
  • 输入后,前端调用第五步那个数据库函数,把码递进去;
  • 根据返回结果,给用户看到对应提示(成功解锁 / 这码不存在 / 已被使用 / 已过期)。
💰 价格口径(和你买这门课时一致):占位价写 ¥199(本课程定价占位)。你自己的会员站卖多少钱由你定,这里只是放个数字让闭环看起来完整。
看到什么算成功:打开你的站,登录一个还没付费的账号,去到一条会员专属(is_free=false)的内容——你看到付费墙遮罩下面,多了一块收款码占位图 + 一个激活码输入框 + 一个解锁按钮。

📷 截图位:收款码占位 + 激活码输入框(付费墙下方)。
💡 别忘了第一步那行合规小字:让 Codex 顺手在输入框旁加一行灰色小字——「本站收款仅用于内测/自测演示」。

第七步 · ★渡劫:用真码,当场把付费墙解锁掉

这是阶段渡劫③的正题,也是本课里程碑。 你要扮演一个"刚付完钱的陌生人",亲手把墙推倒。

先拍解锁前的样子:用那个没付费的账号,停在一条会员专属内容上,正文被付费墙挡着、看不全。

📷 截图位:付费墙挡住的会员内容(解锁前 · 里程碑③前半)。

然后,把第四步抄下来的其中一串真码,粘进激活码输入框,点「解锁」。

看到什么算成功:页面提示"激活成功 / 已成为会员",付费墙遮罩消失,刚才被挡住的正文整段亮出来了。刷新一下也还在(因为 is_member 已经真的存进数据库了)。

📷 截图位:输码解锁后 · 同一条内容完整显示(里程碑③后半)。

🎉 可发朋友圈的里程碑截图:把"解锁前(挡住)"和"解锁后(完整)"两张拼一起——「我的站,真的能收钱解锁了。」这是你这门课第三道阶段渡劫通关凭证:你的站,从今天起能拦人、能让人付钱才解锁。

再去后台验两件事,确认闭环是真的闭上了:

再看两处算彻底成功:
① 去「我的洞府」(个人中心)页面,看到你这个账号 is_member = true(整套付费墙的总开关,被你刚才那串码翻开了)。
📷 截图位:我的洞府 · is_member 变成 true。
② 回 Supabase → activation_codes 表,你刚用的那串码,used_by 已经填上了你的账号、used_at 有了时间——这码作废了。再拿同一串码去输第二次,会被拒(下面急救处有验证)。
🌿 门已洞开。你方才递进去的那枚令牌,此刻已碎——一次性,正是它的本分。凝金锋三层渡劫成。你这座站,从此真有了一道能进灵石的渡口。
💡 这就是"预设突破":很多人卡在第五步的函数报错,或第七步"输了码没反应"——这是预期内的剧情,90%的筑基修士20分钟内过——这是你的通关路线。 下面急救区给的就是这条已验证的过劫路径,照着走就行。崩一下不丢人,崩了能起来,才是凝金锋。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器(Codex)的提示词。带 [方括号] 的地方按提示替换成你自己的内容,其余原样发。

咒语卡① · 【交底咒】先讲计划,别急着写代码

我在做一个会员制内容网站,数据库用 Supabase,已经有 profiles 表(含 is_member 字段) 和 contents 表(含 is_free 字段),第 12 课已做好"前端付费墙遮罩 + 后端 RLS 读策略"。 现在我要做支付激活闭环,目标分三块: 1. 新建一张 activation_codes 表(激活码:一次性 + 默认 7 天有效期); 2. 一个数据库函数:用户输入激活码,校验"存在/未用过/未过期",通过就把当前用户 profiles.is_member 翻成 true,并把这张码标记为已用(原子操作,要么全成要么全不动); 3. 前端在付费墙遮罩下面加"收款码占位 + 激活码输入框 + 解锁按钮"。 请先用大白话给我一份分步计划,**先别写任何代码**,我确认后你再一步步来。

咒语卡② · 建 activation_codes 表

请帮我写建 activation_codes 表的 SQL,字段: - code(文本,激活码,形如 ZJ-XXXX-XXXX-XXXX,主键或唯一) - used_by(关联 auth.users 的用户 id,可空;非空表示已被使用) - used_at(时间戳,可空) - expires_at(时间戳,默认值=创建时间往后 7 天) - batch(文本,标记批次,可空) - created_at(时间戳,默认 now()) 并加上 RLS:**普通用户不能直接读写这张表**(激活只能通过数据库函数进行)。 SQL 给我后,告诉我去 Supabase 哪里粘贴执行,以及执行成功该看到什么。

咒语卡③ · 生成第一批激活码

请帮我写一段 SQL,往 activation_codes 表插入 3 张测试激活码: - code 用 ZJ- 开头的随机串,格式 ZJ-XXXX-XXXX-XXXX,字符避开容易看错的 0 O 1 I L; - expires_at 设成"现在往后 7 天"; - used_by 留空(表示有效未使用); - batch 标记为 'test-[今天日期,如 20260616]'。 执行成功后,告诉我怎么在 Table Editor 里确认这 3 张码进去了。

咒语卡④ · 写"校验+激活"数据库函数

请帮我写一个 Supabase 数据库函数(用 security definer,这样它能代当前登录用户改 profiles), 名字叫 redeem_activation_code,接收一个参数:用户输入的激活码字符串。 函数逻辑(必须是原子操作,要么全部成功要么全部不动): 1. 在 activation_codes 里找这串码;找不到 → 返回错误"激活码不存在"; 2. 如果 used_by 非空 → 返回错误"激活码已被使用"; 3. 如果 expires_at 已过 → 返回错误"激活码已过期"; 4. 全部通过 → 把当前登录用户(auth.uid())的 profiles.is_member 设为 true、 member_since 设为 now();同时把这张码的 used_by 设为当前用户、used_at 设为 now(); 5. 返回成功标志。 另外,做完函数后再补一道"列锁",防止用户绕过这个函数自己改会员: - Supabase 默认允许 authenticated 改自己那行 profiles(为了改昵称),但 RLS 管不到"列", 导致用户能自己 update is_member=true 白嫖会员。请用 Postgres 列级权限堵上: 收回 authenticated 对 profiles 的整表 update 权,只 grant update(nickname) 给它; is_member、member_since 不在授权列里,从此只有上面这个 security definer 函数能翻动。 - 给我这两句 SQL(revoke + grant),并告诉我:用非会员账号在 F12 控制台跑 update profiles set is_member=true 时,应当被拒绝(改不动),而改昵称仍能成功。 请同时告诉我前端该怎么调用这个函数(用 supabase.rpc),以及每种失败该怎么提示用户。

咒语卡⑤ · 前端加"收款码 + 输码解锁"入口

请在我第 12 课做好的付费墙遮罩下方,加上: 1. 一块收款码占位区:一张占位图,写"扫码付款 ¥199"(我之后会换成自己的收款码图); 2. 一个激活码输入框 + 一个"立即解锁"按钮; 3. 点按钮时调用 redeem_activation_code 函数,把输入框里的码传进去; 4. 根据返回结果给用户提示: - 成功 → 提示"已解锁,正在刷新" + 自动刷新页面让付费墙消失; - 失败 → 把"激活码不存在 / 已被使用 / 已过期"对应的提示显示出来; 5. 在输入框旁加一行灰色小字:"本站收款仅用于内测/自测演示"。 改完告诉我改了哪个文件、加了什么,以及我该怎么自己测一遍。
填空说明:[今天日期] 换成形如 20260616 的数字。其余整段原样发给 Codex。

🆘 卡住了?(按你看到的现象找)

现象:输入激活码,提示「激活码不存在」

先检查:① 是不是把码输错了(中间的横杠 - 要带上,字母大小写要和表里一致);② 你输的这串码,确实在 activation_codes 表里吗(去 Supabase Table Editor 核对一下)。
急救话术(照做):去 Supabase → Table Editor → activation_codes,直接复制表里一行的 code 整串,粘进输入框再试。八成是手抄抄错了。

现象:输入激活码,提示「激活码已被使用」

先检查:这串码是不是你之前已经成功用过一次了?(激活码是一次性的,用过即作废——这是设计如此,防转卖)。
急救话术:换另一串还没用过的码试(第四步你造了 3 张)。或者去 Table Editor 看哪几行 used_by 还是空的,用那些空的。这不是 bug,是闭环在正常工作。

现象:输入激活码,提示「激活码已过期」

先检查:这码的 expires_at 是不是已经过了今天(默认发码后 7 天有效)。
急救话术:用咒语卡③再生成一批新码(expires_at 会重新设成往后 7 天),用新码测。老码过期作废是正常的。

现象:输了码,提示成功了,但付费墙没消失 / 内容还是被挡

先检查:① 页面刷新了吗(is_member 改了,但页面可能还停在旧状态——刷新一下);② 去「我的洞府」看 is_member 到底变 true 了没;③ 如果数据库里 is_member 已经是 true 但还被挡,那是第 12 课的付费墙读策略没读到最新状态。
急救话术(把报错三句话发给 Codex):「我刚做了什么:输入激活码后提示激活成功,数据库里我的 is_member 已经是 true。我现在看到什么:付费墙遮罩还在、会员内容还是被挡。我希望它变成什么:付费墙消失、会员正文完整显示。请检查激活成功后是否刷新了页面、以及付费墙是否读取了最新的 is_member 状态。」

现象:执行那个函数的 SQL 时,Supabase 报红色错误

先检查:错误信息里常见的是"function already exists"(函数重名,你跑过一次了)或字段名对不上(比如 profiles 里没有 member_since 列)。
急救话术:把完整的红色报错原文连同报错三句话发给 Codex:「我刚做了什么:执行你给的 redeem_activation_code 函数 SQL。我现在看到什么:[粘贴报错原文]。我希望它变成什么:函数创建成功。」让它读着报错改——别自己瞎删 SQL
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好发给 Codex,比你瞎描述管用十倍。钱相关的代码尤其别自己手改——交给法器,你只验收结果。

✅ 出关自查(全部勾上才算过这一关)

我能复述合规红线:个人收款码只能演示自测,经营性收款大陆可能被冻,正式经营要走商户通道
我的数据库里有了第三张表 activation_codes,里面有几张 ZJ- 开头的真码(used_by 空的是有效的)
我补了"列锁"(收回 authenticated 整表改权、只放 nickname):非会员账号在 F12 控制台直接 update profiles set is_member=true 改不动——确认没人能不输码、自己白嫖会员
我用一串真码,当场把一条会员内容的付费墙解锁了——解锁前(挡住)和解锁后(完整)我都截了图(里程碑③)
解锁后,「我的洞府」里我的 is_member = true,且我刚用的那串码 used_by 已被填上(作废了)
我拿同一串用过的码再输一次,被正确拒绝(提示"已被使用")——闭环防转卖在工作

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上多了「能收钱解锁」这块功能——你还拿到了一件能反复用的东西:一整套零资质付费解锁闭环模板。以后做第二个站、帮朋友、接私单,照着搬一遍,几分钟就能让一座站「真的能收钱」。

  • 激活码闭环模板 — 一座站「真的能收钱解锁」的全部骨架:建表 SQL(一次性 + 7 天有效期 + 锁死直接读写)+「校验+激活」数据库函数(要么全成、要么全不动)+ 前端收款占位/输码入口 + 一张合规提示卡。文件:../takeaways/13-激活码闭环模板.md怎么用:五段按顺序整段复制 → 发给法器 → 让它替你粘进 Supabase 运行、替你改前端,你不用写一个字、不用懂每一行;带 [方括号] 的(如 ZJ- 前缀、占位价、批次日期)按提示替换。里面不含任何钥匙,可放心复制、放心给同学。
💡 可分享:「我的站今天真的能收钱解锁了:付款 → 输一串激活码 → 会员内容当场亮出来。一次性、会过期、防转卖——零资质也能跑通的完整商业闭环。」——只讲机制、不含任何真码和钥匙,放心晒。

🌱 加练(选做)+ 下一课

加练:扮演两个角色各跑一遍——① 一个"陌生买家"账号,从注册 → 撞墙 → 输码 → 解锁,全程走通;② 你自己用一张故意过期的码(把某张码的 expires_at 在表里手动改成昨天)测一下,确认它被正确拒绝。亲手验证"防转卖"和"过期作废"真的在工作,你才敢拿这套去面对真实买家。

下一课预告:你的站现在能注册、能存内容、能拦人、能收钱解锁——麻雀虽小,五脏俱全。但它还住在第 1 课那个"拖拽上传"的临时地基上,每次改了代码要手动重传,太原始。

下一课(第 14 课 · 连仓自动部署),把你的站接上 GitHub 仓库,以后改一行代码、法器帮你存个档,站就自动重新上线——真正的"全栈真身"渡劫。

🔖 小提示:这一课你动了数据库结构(加了表、加了函数)、也动了前端——收尾让法器顺手"存个档"(git 提交)。一句"帮我存一下档"即可。万一第 14 课接仓部署时改坏了,一句话就能回到今天这个"能收钱"的境界。改坏不怕,有档在。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 14 课

雷动真渡 · 全栈站上真线

会员专属

# 第 14 课 · 雷动真渡 · 全栈站上真线

课头

🪷 境界:筑基后期 · 凝金锋四层
预计用时:120 分钟
🏆 本课产出:把你这座带登录、带数据库、带付费墙的全栈真站,正式部署到公网——以后你一改代码、推上 GitHub,它自己重新上线;并在线上真链接里完整跑通一遍「陌生人注册 → 登录 → 升级会员 → 看到会员专属内容」
🚫 今天不做:不买域名(下下阶才碰)、不碰 webhook / 服务器运维 / 备案——今天用平台送的免费网址,把全栈站送上真线
📜 藏经阁已立,渡口令牌已铸,付费墙拦得住凡客——可这一切,至今只在你丹田之内(本地电脑)运转,外人无缘得见。今日第四道渡劫:引天雷淬体,把这座会呼吸、会记忆、会收钱的洞天,自丹田中托举而出,悬于九天公网之上。雷动之际,必有一瞬天地俱黑(部署成功却白屏)——那不是道消,那是钥匙未曾交到天门手中。补全两处钥匙、开三道门禁,洞天自亮,从此陌生香客可循真名而来。
📷 修炼笔记卷轴位(待补):丹田中小楼腾空 · 一道天雷自顶贯下 · 楼悬九天、八方香客循光而至。

这一课,你在干一件什么事

到上一课为止,你已经造出了一座真·全栈会员站:能注册、能登录、能存内容、有付费墙、能用激活码解锁会员。但它有一个致命的限制——它只活在你这台电脑上。你一关预览,全世界就没人能访问它。

第 1 课你用「网页拖拽」把练气期那个静态站搬上过线,那只是个不会动的占位。现在你这座站有了后端、有了登录、有了数据库——今天才是它真正意义上的「上线」

  • 连仓自动部署:把你的 GitHub 仓库和部署平台(Cloudflare Pages)接上。以后你(让法器)一改代码、推上 GitHub,平台自己重新构建、自己重新上线,你什么都不用管。
  • 兑现 env 双轨:第 5 课埋下的那根弦——「本地 .env 和线上平台是两处同一套秘密」——今天兑现。你要去线上平台后台,把那几个环境变量逐项、名字一字不差地再填一遍。
  • 开三道门禁:把你的线上网址加进 Supabase 的三处名单(Auth 白名单、CORS、重定向 URL),否则线上注册登录会被挡在门外。
  • 线上回归:在真链接里,从头到尾跑一遍注册、登录、升级会员、看会员内容——确认它在公网上真的能用
💡 为什么这是「渡劫课」? 因为本地能跑、上线就崩,几乎是每一个第一次部署全栈站的人都会撞上的坎——而且崩得很吓人:页面一片空白,啥也没有。别慌。这道坎 90% 的人在 20 分钟内就过了,且崩法高度统一——「部署成功但白屏 = 99% 是环境变量没在线上填」。这一课我把这道坎写成预期剧情,并把通关路径直接铺在你脚下:等会儿真白屏了,你按第七步走,几乎一定能点亮。
💡 为什么钉死用 Cloudflare Pages 一个平台? 因为你第 1 课已经在这上面拿过链接,账号、习惯都现成;一门课只跟一个平台,你不用在两套后台之间反复横跳、对不上按钮。Vercel 也能干同样的事,但它只作为文末附录的一句话存在——你先把 Cloudflare 这条主线走通,别分心。

主线步骤(跟着做,每步都有「看到什么算成功」)

第一步 · 先让法器顺手存个档(上线前的安全绳)

老规矩:动大事之前先存档。打开 Codex,让它把当前这座能本地跑通的全栈站提交一次(咒语卡【上线前存档咒】整段发它)。

法器会做两件事,做完用人话回你:把你的改动 git commit 存一个档、并 git push 推到 GitHub 仓库。这一步不只是存档——它顺便把你最新的代码推上了 GitHub,下一步连仓部署才有东西可连。

看到什么算成功:法器回你类似「已经把你当前的代码提交并推送到 GitHub 仓库 你的仓库名,你现在在 GitHub 网页上能看到最新的文件」。打开你的 GitHub 仓库页面刷新一下,文件是最新的。
💡 为什么先推一次? 接下来的「连仓自动部署」,本质是让 Cloudflare 盯着你的 GitHub 仓库。仓库里得先有你最新的全栈代码,平台才能拉下来构建。法器这一推,等于先把货备齐放进仓库。

第二步 · 把 GitHub 仓库连上 Cloudflare Pages

打开浏览器,进 Cloudflare Pagespages.cloudflare.com,第 1 课你已经有账号了)。这次不走「拖拽上传」那条路了——我们要走连仓那条:

  • Create a project / 创建项目 → 选 Connect to Git / 连接 Git(连接 Git,不是 Direct Upload)。
  • 第一次会让你授权 Cloudflare 访问你的 GitHub——点同意,按提示选只授权你这一个仓库即可(不用授权全部)。
  • 授权完,在列表里选中你这个全栈站的仓库,点 Begin setup / 开始设置

接着平台会问你「怎么构建(Build settings)」。这是连仓部署和拖拽上传最大的不同——平台要自己把你的代码编译成网页。照下面这张表填(你的项目是 Vite + 原生 JS,这套是标准值):

平台问的(英文)
你怎么填
Framework preset(框架预设)
下拉里能选到 Vite 就选 Vite;选不到就留 None,下面两行手动填
Build command(构建命令)
npm run build
Build output directory(构建产物目录)
dist
Root directory(根目录)
留空(除非你的项目不在仓库最外层,那才填子目录名)
看到什么算成功:你在设置页看到 Build command 填的是 npm run buildBuild output directory 填的是 dist,下面还有一块叫 Environment variables(环境变量) 的区域——先别点最后那个部署按钮,下一步要先填环境变量。

📷 截图位:Cloudflare Pages 连 GitHub 仓 · 选好构建命令页。
💡 拿不准这三项填什么? 把咒语卡【问构建配置咒】发给法器,把你的项目丢给它,它会照你项目的真实情况回你「构建命令填什么、产物目录填什么」。一字不差抄进去即可。绝大多数 Vite 项目就是 npm run build + dist

第三步 · 兑现 env 双轨——在线上后台逐项填环境变量(一字不差)

来到本课最关键、也最容易出错的一步。还记得第 5 课埋的那根弦吗——

「你的钥匙现在写在本地电脑的 .env 里。等第 14 课部署上线时,线上平台那边也要再填一遍同一套钥匙。这套秘密是『两处同一套』。」

今天就是第 14 课,就是兑现它的时候。 平台读不到你电脑上的 .env(那是你本机的私密文件,根本没上传),所以你必须在线上后台把同一套秘密手动再填一遍

怎么知道要填哪几项、叫什么名字?——看你的 .env.example(传家底单)。第 5 课起,每次法器往 .env 加一个变量,都会同步往 .env.example 加一行空白模板。所以 .env.example列着的每一个变量名,就是你线上要填的清单,一个都不能漏、名字一个字母都不能差。

先让法器把这张清单给你念出来(咒语卡【念传家底单咒】),它会回你类似:

你的 .env.example 里有这两项需要在线上填(名字必须一字不差): VITE_SUPABASE_URL VITE_SUPABASE_ANON_KEY

然后在刚才那个设置页的 Environment variables(环境变量) 区域,逐项添加

变量名(Variable name)——一字不差
值(Value)——从哪来
VITE_SUPABASE_URL
打开你本地的 .env,复制等号后面那一长串地址,原样粘进来
VITE_SUPABASE_ANON_KEY
打开你本地的 .env,复制 anon 那把🟢钥匙,原样粘进来
⚠️ 三条铁律,违反任意一条就会白屏
1. 变量名一字不差——VITE_SUPABASE_URL 不能写成 SUPABASE_URL、不能少写 VITE_ 前缀(Vite 规定只有 VITE_ 开头的变量才会进前端,少了前缀=填了等于没填)。
2. 值要和本地 .env 完全一致——最稳的做法是.env 里整段复制粘贴,别手敲,别框选漏字符。
3. 只填 anon 那把🟢绿钥匙——service_role 那把🔴红钥匙第 5 课就说了,前端永远不碰,这里也绝对不填。
看到什么算成功:环境变量区域里,你 .env.example 列出的每一项都对应填好了一行,变量名和本地 .env 完全一致。

📷 截图位:在线上后台逐项填好环境变量(名字一字不差)。截图时把钥匙的值用马赛克挡住再截——养成习惯。
💡 为什么非得「两处同一套」、不能省? 你的站要连云端数据库,靠的就是这套「地址+钥匙」。本地预览时它从你电脑的 .env 读;上了线、跑在 Cloudflare 的服务器上时,你电脑的 .env根本够不着,只能从平台后台你填的这份读。两处填的是同一套值,但必须填两次——这就是「双轨」。漏了线上这一轨,站照样能部署成功,但一打开就是白屏(它连不上数据库,啥也渲染不出来)。这正是第七步要救的那个崩法。

第四步 · 点部署,等它第一次构建上线

环境变量填完,回到设置页底部,点 Save and Deploy / 保存并部署

平台开始干活:拉你的代码 → 跑 npm run build → 把构建出的 dist 发布上线。屏幕上会滚一大片日志文字(几十秒到两三分钟),这是正常的,别关页面

看到什么算成功:日志最后出现 Success / 部署成功 之类的绿色提示,平台给你一个形如 https://你的项目名.pages.dev在线链接

📷 截图位:首次部署成功 · 拿到 .pages.dev 真链接。
⚠️ 别急着庆祝、也别急着慌:部署成功不等于站能用。下一步打开链接,很可能是一片空白——这是预期剧情,第七步专门救它。先往下走。
💡 构建日志飘红、部署直接失败了?(注意:这是构建失败,和「构建成功但白屏」是两码事)把咒语卡【部署失败丢回法器咒】用上——把红色那几行日志原文复制下来发给法器,它会告诉你是命令填错了、还是依赖没装上,怎么改。最常见就是第二步的构建命令/产物目录填错,回去对一下那张表。

第五步 · 把线上网址加进 Supabase 的三道门禁(白名单 / 重定向 / CORS)

现在你有了线上链接,但直接拿它去注册登录,多半会被 Supabase 挡回来。因为 Supabase 出于安全,默认只认它白名单里的网址——你之前都在本地 localhost 调试,Supabase 认得 localhost,但还不认识你这个新的 .pages.dev 网址。要开三道门:

打开 Supabase 控制台 → 左边菜单 Authentication(认证)URL Configuration(URL 配置),填两处:

Supabase 里的栏位(英文)
你填什么
干什么用的
Site URL(站点地址)
你的 https://你的项目名.pages.dev
告诉 Supabase「我的站正式住在这个网址」
Redirect URLs(重定向白名单)
把同一个 https://你的项目名.pages.dev 加进去(已有 localhost 的不要删,两个都留着
登录/注册流程完成后,允许跳回这个网址——没加=登录后跳转被拦

填完点 Save / 保存

💡 CORS 怎么办? 好消息:Supabase 对 anon 公开钥匙的常规数据请求,默认就允许跨域,你通常不需要单独配 CORS。上面这两处 URL 配好,就覆盖了绝大多数情况。万一线上 console 里真的报出带 CORS 字样的红字(少见),那就是某个请求的来源没被放行——别自己猜,直接把那行红字原文丢给法器(用第七步的话术),它会告诉你具体哪个地址要补进哪里。先按上表配好这两处 URL,CORS 一般就不用你操心。
看到什么算成功:Supabase 的 Site URL 填的是你的 .pages.dev 线上网址;Redirect URLs同时有 localhost(本地)和你的 .pages.dev(线上)两条;点了保存。

📷 截图位:Supabase Auth 把线上网址加进白名单页。
🌿 天门有锁,认名而开。你这座洞天换了新址悬于九天,须把新真名报与守门之灵(Supabase),它方放香客循名而入——旧址(localhost)也莫删,那是你回丹田闭关的私门。

第六步 · 打开线上链接——见证「预期中的那一瞬黑」或直接亮

掏出手机或在电脑浏览器里,打开你的 https://你的项目名.pages.dev两种结果,都在预料之中:

结果 A——站正常亮了 🎉

首页出来了、能点能动。那直接跳到第八步做线上回归测试。运气好(或者你前面三条铁律全没踩坑),就是会这么顺。

结果 B——一片空白,啥也没有

别慌,这就是本课写在剧本里的那一瞬黑。 部署明明成功了、链接也有,打开却白茫茫一片——99% 是环境变量没在线上填好(第三步那三条铁律踩了坑)。这不是失败,这是渡劫的标准画面。第七步就是为这一刻准备的通关路径,照着走。

看到什么算成功:你打开了线上链接,并且判断出自己是 A(亮了)还是 B(白屏)——A 直接去第八步,B 进第七步。无论哪种,你都没卡住——你知道下一步去哪。

第七步 · 白屏自救——教你用 F12 看 console 红字,丢回法器(★渡劫预设突破)

这是本课的核心保命技能,学会它,你以后所有「线上白屏」都不慌。白屏的页面不是真的什么都没有——它把出错的线索,藏在一个叫 Console(控制台) 的地方,我们用 F12 把它揪出来。

第 1 步 · 打开 console(看见红字)

在白屏的那个页面上:

  • 电脑:按键盘 F12(部分笔记本要按 Fn + F12),弹出一个开发者面板,点上面的 Console(控制台) 标签页。
  • 你会看到一行或几行红色的报错字——那就是你的站「说不出话」的原因。

第 2 步 · 对号入座(90% 是这两种红字之一)

console 里的红字大概长这样
八成是什么问题
怎么救
supabaseUrl is required / Invalid supabaseUrl / Missing ... environment variable / 提到 undefined 的地址或 key
环境变量没填 / 名字写错(第三步三条铁律踩坑)
回第三步,核对线上后台变量名是不是一字不差(特别是 VITE_ 前缀)、值有没有填,改完必须重新部署一次(见下方💡)
Invalid API key / JWT 相关
钥匙值填错了 / 填成了别的钥匙
回第三步,从本地 .env 重新整段复制 anon 钥匙,粘进线上后台对应变量,重新部署

第 3 步 · 把红字原文丢给法器(万能兜底)

看不懂红字、或对不上上表?别自己猜。 用下面这套——这就是第 5 课起反复用的报错三句话,这次填上 console 红字:

「我刚把站部署上线、在线上后台填了环境变量;我现在用 F12 打开 console,看到红字写着【把红字一字不差抄进来】;我希望线上网页能正常显示、像本地一样能用。请告诉我这是什么问题、该去哪里改。」

把这三句发给 Codex,它会照着红字告诉你具体哪个变量错了、去 Cloudflare 后台还是 Supabase 后台改、改完要不要重新部署。

⚠️ 改完环境变量,必须重新部署才生效! 这是最坑人的一点:你在 Cloudflare 后台改了环境变量,线上那个旧版本不会自动更新——它还用着旧的(空的)变量。你要回到 Cloudflare Pages 项目里,找到 Deployments(部署记录) → 在最近一次部署上点 Retry deployment / Redeploy(重新部署),等它重新构建一次,新变量才会被带进去。改了不重部署 = 等于没改,这是白屏反复出现的头号原因。
看到什么算成功:你用 F12 看到了 console 里的红字、对照表或法器定位了原因、在对应后台改好、重新部署了一次,刷新线上链接——白屏消失,首页正常出来了

📷 截图位:F12 console 红字现场(部署成功但白屏的诊断)。
🌿 那一瞬天地俱黑,非道消,乃钥匙未达天门。你以 F12 为眼,照见门内一行朱批(红字)——补全钥匙、再引一道雷(重新部署),洞天顿明。修士经此一劫,往后凡见白屏,皆知何处寻光。

第八步 · 线上回归——在真链接里跑通注册→登录→升级会员全流程

站亮了,但还要确认它在公网上功能真的全活别用你平时登录的那个老账号——你要扮一个完全陌生的新香客,从零走一遍:

在你的 .pages.dev 线上链接里,按顺序走:

  • 注册:用一个没注册过的新邮箱注册一个账号 → 应该能注册成功、自动建档(第 6 课的 profiles 触发器)。
  • 登录:用刚注册的账号登录 → 应该能进个人中心,此时是普通用户(非会员)
  • 撞付费墙:去看会员专属内容 → 应该被付费墙拦住(第 12 课的遮罩),看不到正文。
  • 升级会员:输入一个有效的激活码解锁(第 13 课的渡口令牌闭环)→ is_member 翻 true。
  • 看会员内容:刷新 → 付费墙消失,会员专属正文出来了
看到什么算成功:以上五步在线上真链接一路通畅——陌生新账号能注册、能登录、被付费墙拦、用激活码解锁、最后看到会员专属内容。这就是你这座全栈站在公网上、面对一个真陌生人,从头到尾跑通了一遍。

📷 截图位:线上注册→登录→升级会员→看到会员内容全流程跑通。
🎉 可发朋友圈的截图:「我做的会员站,正式上线了——任何人打开这个网址,都能注册、登录、付费解锁。它不再只活在我电脑里。」——你已经把一座会呼吸、会记账、会收钱的真站,送上了公网。
💡 某一步卡住了? 比如注册报错、登录后跳不回来、激活码用不了——多半是第五步的 Auth 白名单/重定向 没配全。回第五步核对:Redirect URLs 里有没有你的 .pages.dev。还不行就用报错三句话把现象丢给法器(见 🆘 卡住了)。

第九步 · 免备案说明(30 秒,免得你被「备案」二字吓住)

很多大陆小白一听「网站上线」就紧张:「我是不是得去备案?会不会违规?」 这一步给你吃颗定心丸:

  • 你用的 Cloudflare Pages 走的是海外节点,给你的 .pages.dev 域名也不在中国大陆境内服务器上。大陆的网站备案(ICP 备案)制度,针对的是使用中国大陆境内服务器的网站——你这种部署在海外平台、用平台免费子域名的情况,不涉及大陆备案,可以直接访问、直接用。
  • 什么时候才需要操心备案? 只有当你将来想用中国大陆境内的服务器(比如阿里云、腾讯云国内节点)来托管时,才需要走备案。你这门课从头到尾都不碰国内服务器,所以这件事和你无关,安心。
  • 真域名(自己的 .com)也不强制备案才能用——只要它解析到海外节点。买不买域名是下下阶的事(大圆满阶才碰),今天用平台送的 .pages.dev 免费网址完全够,不影响你这门课出师
看到什么算成功:你心里清楚了——用 Cloudflare 这种海外平台 + 平台免费域名上线,不涉及大陆 ICP 备案,这件事不用你操心,不慌。
💡 和第 1 课灵石速览对得上:上线这一步,仍然是 ¥0——Cloudflare Pages 免费额度够整门课用、免费送 .pages.dev 网址。整门课唯一真花钱的,还是那 ¥30–80 的 AI 算力,其余大概率 0 元。上线没让你多掏一分钱。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器的提示词。【...】 是要你填的空,其余照抄。今天两张:一张让法器上线前存档并推送,一张是出问题时把线上报错丢回法器。

【上线前存档咒】· 让法器提交并推送到 GitHub(连仓部署的前提)

我准备把这个全栈项目部署上线了。请帮我在上线前做两件事: 1. 把我当前所有改动用 git 提交一个存档,提交说明写「准备上线:全栈站本地已跑通」。 2. 把这个提交推送(push)到我的 GitHub 远程仓库,让仓库里是最新的代码。 做完请用一句人话告诉我:是否已经成功推送到 GitHub、我现在在 GitHub 网页上能不能看到最新文件。 注意:不要动 .env 文件,它本来就被 .gitignore 保护着、不该上传。
填空说明:这张不用填空,整段照发。它顺便把你最新代码推上 GitHub,下一步连仓部署才有东西可连。

【部署线上报错·丢回法器咒】· 部署失败 / 线上白屏时,把红字交给法器定位

我在把全栈站(Vite + 原生 JS + Supabase)部署到 Cloudflare Pages,遇到问题。 我刚做了什么:【例如:连了 GitHub 仓、在 Cloudflare 后台填了环境变量、点了部署】 我现在看到什么:【例如:部署成功但打开是白屏,F12 console 里红字写着「______」; 或:构建日志飘红失败,最后几行写着「______」】 我希望它变成什么:线上网页能正常显示、像我本地预览一样能用。 请照着我贴的报错告诉我:这是什么原因、我该去 Cloudflare 后台还是 Supabase 后台改、 改完需不需要重新部署一次。先别让我改代码,优先帮我查配置(环境变量名、构建命令、白名单)。
填空说明:把三处 【...】 换成你的真实情况,红字一定一字不差地抄进来(这是法器能一次定位的关键)。这三句就是第 5 课起反复用的「报错三句话」,这次用在线上排错。

🆘 卡住了?(按你看到的现象找)

现象:部署成功了、链接也有,但打开是一片空白

先检查:99% 是环境变量没在线上填好。最常见三种——①变量名漏了 VITE_ 前缀或拼错;②某个变量没填、值是空的;③改了环境变量后没重新部署,线上还用着旧的空变量。
急救话术(照做):在白屏页面按 F12 → 点 Console → 看红字。若红字提到 supabaseUrl is required / undefined / Missing environment variable,回 Cloudflare 后台核对变量名一字不差、值都填了,然后到 Deployments 里点 Redeploy 重新部署一次(改了不重部署 = 没改)。还不确定就用咒语卡【部署线上报错·丢回法器咒】,把红字原文发给法器。

现象:构建日志直接飘红、部署失败(连链接都没拿到)

先检查:这是构建失败(和白屏不是一回事)。八成是第二步的构建命令或产物目录填错了——绝大多数 Vite 项目应是 npm run build + dist
急救话术:回第二步那张表核对 Build commandBuild output directory;对不上就改回来重新部署。还不行,把日志里红色那几行原文复制,用【部署线上报错·丢回法器咒】发给法器,它会告诉你是命令错了还是依赖装不上。

现象:站能打开,但线上注册 / 登录失败,或登录后跳不回来

先检查:八成是线上网址没加进 Supabase 的白名单/重定向(第五步)——Supabase 还不认识你这个新的 .pages.dev 网址,把请求挡了。
急救话术:进 Supabase 控制台 → Authentication → URL Configuration,确认 Site URL 是你的 .pages.devRedirect URLs同时有 localhost 和你的 .pages.dev,保存后再试。若 console 里有带 CORS 字样的红字,照第五步说明把红字原文丢给法器定位。

现象:以前能连,今天线上突然连不上数据库 / 报「项目暂停」

先检查:你的 Supabase 免费项目是不是超过 7 天没动、被自动暂停了(第 5 课讲过的免费层机制)。
急救话术:进 Supabase 控制台,打开你的项目,找 Restore / Resume(恢复) 点一下,等几十秒它醒过来,再刷新你的线上站。这是免费层正常机制,不是你弄坏了。(第 15 课拉真人来之前,会专门教你「引客前唤醒检查」。)

现象:线上站我自己或朋友在国内打开很慢、转圈、时好时坏,挂境外网络就秒开

先检查:八成是 Supabase 在境外、大陆直连线路不稳——不是你弄坏了、也不是代码错了。换个网络能通,就基本锁定是线路问题。
急救话术:演示态自测先换网络(手机热点/不同运营商)确认;新建项目时把 Region 选 Singapore / Tokyo 等就近节点会好些。等你将来要给真实国内用户用,再走 Cloudflare 自定义域名代理增强可达性——具体路径见渡劫急救箱 ⑤ Supabase 连接·「国内访问」条(待真机网络实测后写实,别照搬未验证的地址)。
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好发给法器——线上排错时,把「我现在看到什么」换成 F12 console 里的那行红字原文,法器十有八九一次帮你定位。

✅ 出关自查(全部勾上才算过这一关)

我把 GitHub 仓库连上了 Cloudflare Pages,构建命令填的是 npm run build、产物目录是 dist首次部署成功、拿到了 .pages.dev 线上链接
我在 Cloudflare 线上后台,照着 .env.example 清单逐项填好了环境变量,变量名和本地 .env 一字不差(且只填了 anon 🟢 钥匙、没碰 service_role 🔴)
我把线上网址加进了 Supabase 的 Site URL + Redirect URLslocalhost.pages.dev 两条都在)
我会用 F12 看 console 红字,知道「部署成功但白屏 = 99% 环境变量没填」,也知道改完环境变量必须重新部署才生效
我在线上真链接里,用一个陌生新账号跑通了「注册 → 登录 → 撞付费墙 → 输激活码升级会员 → 看到会员专属内容」全流程

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上多了个「公网在线」——你还拿到了一件能反复用的东西:一张「本地能跑 → 线上也能跑」的逐项核对单。以后你上线第二个站、帮朋友部署、隔半年再上一个站,照着它走一遍,就绕开了那一瞬白屏,不用再凭记忆碰运气。

  • 部署上线检查清单 + .env.example 传家底单 + Auth 白名单/CORS 清单 — 一张把「本地有的每一样」逐项搬到线上的核对单:连仓部署清单、.env.example 本地→线上逐项对照(含三条防白屏铁律)、Supabase 白名单/重定向/CORS 三道门禁,外加一张「F12 看红字对号入座」自救表。文件:../takeaways/14-部署上线清单.md怎么用:从上往下一项一项勾,每项都是「本地是这样 → 线上要这样 → 怎么验证」;环境变量照你自己的 .env.example 逐项搬、名字一字不差;改完环境变量记得重新部署;任何一行红字对不上,就用单子末尾的「报错三句话」整段发给法器。
💡 可分享:「部署别白屏清单:部署成功却白屏 = 99% 是环境变量没在线上填。F12 看 console 红字、照 .env.example 逐项补、改完必重部署——三步点亮。」——只讲方法、不含任何钥匙,放心晒。

🌱 加练(选做)+ 下一课

加练 · 体验「连仓自动部署」的爽点:让法器随便给你的线上站改一个小地方(比如首页标题改个字),按【上线前存档咒】提交并推送。然后什么都别做,几十秒后去刷新你的 .pages.dev 线上链接——你会看到改动自己上线了。这就是「连仓自动部署」的意义:以后你(让法器)改完代码一推,站自己更新,你再也不用手动部署。第一次看到它自己变,挺神奇的。

附录 · 用 Vercel 行不行? 行。Vercel 是和 Cloudflare Pages 同类的部署平台,连仓、填环境变量、配白名单的逻辑一模一样,只是后台按钮叫法略有不同(构建命令、产物目录 dist、Environment Variables 一样填)。但本课主线钉死 Cloudflare Pages——你先把这一条走通、出师不慌;想折腾 Vercel,等出师以后当加练。

下一课预告:站上了真线,可它现在还是一座没人来的空城——只有你自己在里面走来走去。

下一课是本阶最后一道大关(★渡劫课):你要把链接发出去,引第一个真·陌生人来注册,在后台亲眼看见「用户 +1」。同时教你上线后的保活检查(免费项目 7 天会睡,引客前先唤醒它,免得真人来了一片连不上)。

🏆 下一课结束,你将拿到本门课的第四张大里程碑:你的站上,有了第一个不是你的真实用户。从此它不再是自说自话的洞天——它有了香火。
🔖 小提示:今天上线动了不少配置,下一课开头会照例让法器顺手「存个档」——改坏了不怕,一句话回到这个境界。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 15 课

引客入门 · 真人使用变现

会员专属

# 第 15 课 · 引客入门 · 真人使用与变现验证

课头

🪷 境界:筑基大圆满 · 受香火一层
🧭 能力轴:你正式踏入第四层「复用」——从「自己用」走向「真实用户进来用 + 把这套做法复刻给下一个站」。今天先拿下第一步:拉来第一批真人。
预计用时:85 分钟
🏆 本课产出:你把站的注册引导和分享卡润色到「陌生人一看就懂」,做完引客前保活检查(确认数据库没睡着),然后真的把链接发出去,拉来你的第一批真实陌生用户——回到后台,profiles 名册里多出来的,不再是你自己,而是别人。这是你的站第一次有外人来往
🚫 今天不做:不做付费转化指标、不做数据分析、不做营销投放(那不是这门课的事);今天只验证一件事——陌生人能不能顺利注册进你的站
📜 十四劫已渡,真站立于公网之上,门户齐备、墙禁森严,可至今往来者唯你一人。洞天再精,无人受香火,终是空山。今日开门迎客:先理门前引路之幡,再探灵脉是否沉睡,而后将渡口令牌散入红尘——待第一缕陌生气息入籍名册,此洞天方真正「活」了过来。
📷 修炼笔记卷轴位(待补):山门洞开 · 引路幡迎风 · 灵脉自沉睡中苏醒泛光 · 一缕陌生气息踏入门来落入名册。

这一课,你在干一件什么事

到上一课为止,你的站已经真的上线了:有真域名(或平台免费子域名)、能注册、能登录、有免费内容也有会员内容、付费墙能拦人、激活码能解锁。一整套商业闭环都通了。

但它有个「问题」——到现在为止,进过这座站的只有你自己一个人。你测的、你注册的、你解锁的,全是你。一座只有站主自己用的站,还不算真站。

今天这一课,就干一件事:让第一个「不是你」的真人,顺顺利利地注册进你的站

这件事听起来简单,但有几个真实的坑要先填平:

  • 门前的引路幡要理顺——你天天用这个站,闭着眼都会注册;但陌生人第一次来,看不懂「该点哪、为什么要注册、注册了能干嘛」就会直接关掉。今天先润色注册引导和分享卡,让陌生人一眼就懂。
  • 先确认灵脉没睡着——Supabase 免费项目7 天没人用会自动暂停。万一你最近几天没动它,它可能正睡着;这时候你把链接发出去,所有人都注册失败,你还以为是 Bug。所以发链接之前,先做一次「保活检查」,把它叫醒。
  • 真的把链接发出去——发给朋友、发到群、发个朋友圈,拉来真实的陌生用户
  • 回后台见证「用户 +1」——回到 Supabase,看着 profiles 名册里多出别人的那一行
💡 为什么「拉真人」要单独占一课? 因为这是你这门课的第四个、也是最有分量的里程碑:从「我做了个站」到「真有人在用我的站」,是天壤之别。而且真人一来,就会暴露出你自己测试时永远碰不到的问题(最典型的就是「数据库睡着了」)。这一课就是带你把这些坑提前填好,再迎客——不让你的第一批真实用户白白流失。

主线步骤(跟着做,每步都有「看到什么算成功」)

🔧 法器约定(和前面几课一样):以下凡是要「让法器干活」的地方,你都是把咒语卡里的整段话复制给 Codex,由它去改你的项目文件、自己跑起来、帮你重新部署上线。你不需要自己敲任何裸命令。 法器每做完一件关键事,会用人话回你一句「我刚干了啥、改了哪个文件、你怎么验证」——看得懂最好,看不懂直接照下一步的「✅看到什么算成功」对就行。

第一步 · 站在陌生人的角度,看一遍你自己的注册流程

先别急着改。打开你的线上站(用第 14 课部署好的真域名或平台免费子域名),假装你是第一次来的陌生人,从头走一遍:

  • 我刚打开这个站,第一眼看懂这是干嘛的吗
  • 知道要注册吗?注册入口(按钮 / 链接)显眼吗
  • 我注册是为了什么?注册完能看到什么好处
  • 整个注册过程,有没有哪一步让我犹豫、看不懂、想关掉

把这些「卡壳的地方」记在备忘录里——这就是你下一步要让法器帮你改的清单。

看到什么算成功:你用「陌生人视角」走完了一遍注册流程,列出了至少 1–2 个「换作外人会看不懂 / 会犹豫」的地方(比如「首页没说清这是个啥站」「注册按钮太小看不见」「不知道注册完有什么用」)。一个都挑不出也正常,说明你站做得清楚,直接进下一步。
💡 为什么这一步这么重要? 因为你不是你站的目标用户——你太熟了,所有「不言自明」的地方,对第一次来的人都不是。这一步就是强迫自己用陌生人的眼睛看一遍,把「我以为很清楚、其实别人看不懂」的地方揪出来。

第二步 · 让法器润色注册引导(把「门前的话」说清楚)

把第一步记下的清单,连同 📜咒语卡里的 【理引路幡咒 · 润色注册引导】 一起复制给 Codex。法器会帮你把首页和注册区的文案改清楚,让陌生人一眼明白「这是个啥站、为什么注册、注册完能干嘛」。

法器改完会用人话回你一句类似:「我改了首页顶部的一句话介绍和注册框旁边的引导文案,让第一次来的人能看懂这是个什么站、注册有什么好处;改的是 index.html(或首页组件)的文案部分,没动任何登录/数据库逻辑。你刷新线上站就能看到。」

看到什么算成功:你刷新线上站,看到首页有一句说清「这是给谁、能干嘛」的介绍,注册入口变显眼了,注册框旁边有一句「注册后能看到 XX」之类的引导。整体看上去,像是给外人看的,而不是只有你自己看得懂。

📷 截图位:注册引导/分享卡润色后的样子(让陌生人一看就懂)。
🌿 门前引路之幡已正,过路人自此识得门径。

第三步 · 让法器做一张「分享卡」(决定别人转发时看到啥)

光把链接发出去还不够。你有没有发现:当你把一个网址发到微信、发朋友圈时,下面会自动带一张小卡片(一张图 + 一个标题 + 一句描述)?这张卡片决定了别人刷到时第一眼看到什么——卡片好看、说得清楚,别人才愿意点。

这张卡片不是微信生成的,是你的网页里一段叫 分享元信息(Open Graph / 社交分享标签) 的东西控制的。把 📜咒语卡里的 【做分享卡咒】 复制给 Codex,让它给你的站配好这张卡。

法器改完会用人话回你一句类似:「我在你网站的 <head> 里加了社交分享标签(标题、描述、一张预览图),这样别人把你的链接转发到微信/朋友圈时,会自动带上一张说明卡片。我没动任何功能,只加了这段‘转发时显示什么’的信息。」

看到什么算成功:法器告诉你分享卡已配好(标题、描述、预览图都填上了)。先别急着验证卡片长啥样——它要等你重新部署上线后、把链接发到微信里才看得到真实效果(第六步会看到)。这一步只要法器确认改好就算过。
💡 没有预览图也没关系:让法器先用一张纯色背景配你站名的简单图顶上,或者干脆先不放图(只有标题+描述也能用)。分享卡是锦上添花,别在这步卡太久——把链接发出去、有人来注册才是今天的正事。

第四步 · ⚠️ 引客前保活检查:先确认灵脉没睡着(关键!)

这是今天最关键、最容易被忽略、也最容易救你一命的一步。

你用的 Supabase 是免费层。免费项目有一条规矩:一段时间(官方约定约 7 天,具体以你 Supabase 后台项目页的提示为准)没有任何活动,它会自动「暂停(Paused)」——相当于数据库睡着了。睡着期间,任何人来注册、登录都会失败

想象一下:你今天兴冲冲把链接发到群里,结果你的项目恰好前几天没动、正睡着——所有来的人全注册失败,你还以为是自己代码写崩了,第一批宝贵的真实用户就这么白白流失了。

所以,发链接之前,必须先把数据库叫醒、确认它是醒着的。做法:

  • 打开浏览器,登录 Supabase,进你的项目。
  • 看项目的状态:如果显示 「Paused(已暂停)」,会有一个 「Restore(恢复 / 唤醒)」 之类的按钮——点它,等它恢复(通常一两分钟,期间会转圈)。
  • 如果状态本来就是 「Active(活跃)」,那它没睡,很好——但别只信后台那行字,再做一次「真验证」:用你自己的线上站当场注册一个测试账号(用个临时邮箱,比如 test+今天日期@你的邮箱域名),能注册成功,就说明灵脉确实通着。
看到什么算成功:① Supabase 项目状态是 「Active(活跃)」(如果之前是暂停,你已经点了恢复并等它醒过来);② 你在线上站当场成功注册了一个测试账号——这一进一出,证明「现在拉人来,能注册得进去」。

📷 截图位:引客前 Supabase 保活检查 · 项目「Active(活跃)」状态。
💡 为什么不能只看后台那个「Active」字? 因为偶尔会有「后台显示活跃、但实际刚从暂停里恢复、还没完全就绪」的过渡状态。当场真注册一个,是最实在的验证——你亲眼看到能注册成功,才敢放心把链接发出去。这就是「保活检查」的意义:宁可多花两分钟自测,也不让第一批真人撞上一扇打不开的门。
⚠️ 如果你当场注册就失败了——别往下走,直接看本课「🆘卡住了」的第一条 「现象:真人注册全失败 / 我自己当场注册也失败」,按急救顺序排查(第一嫌疑就是项目被暂停没醒透)。把这关过了再发链接。

第五步 · 重新部署上线(把前面的润色推到线上)

第二、三步法器改的文案和分享卡,现在还只在你本地或代码里,线上的站还是旧的。把它推上线,外人看到的才是润色后的版本。

把 📜咒语卡里的 【上线咒】 复制给 Codex,让它帮你打包、按你第 14 课用的方式重新部署。(你第 14 课已经把站连到 GitHub 仓自动部署了——那样的话,法器帮你把改动「存档并推上去」,平台会自动重新上线,你等它跑完即可。)

⚠️ 上线后如果打开是白屏——老规矩,99% 是环境变量:检查线上平台后台的两把 Supabase 钥匙还在不在(第 5 课埋的、第 14 课兑现的「env 双轨」)。照「🆘卡住了」对应那条做。
看到什么算成功:你刷新线上站(不是本地),看到第二步润色后的注册引导已经生效——线上版本和你改的一致。

🌿 新幡已挂上山门,往来者所见,皆是你今日重整之貌。

第六步 · 把链接发出去,拉来第一批真人

万事俱备。现在,真的把你的线上链接发出去。建议这样发(任选,能拉到 1 个真人就算成功):

  • 私聊发给 1–3 个朋友:附一句话,比如「我自己做的一个站,你帮我注册个账号体验下?花 1 分钟」。私聊转化率最高,最容易拿到第一个真实用户。
  • 发个朋友圈 / 发到一个群:附上你第一步想清楚的「这是给谁、能干嘛」那句话。链接下面会自动带出你第三步做的分享卡——这时候你就能看到分享卡的真实效果了。
  • 目标人群优先:发给「真的可能需要这东西」的人(你第 1 课定主题时想的那群人),而不是随便谁。

发出去之后,盯着对方的反馈:他能打开吗?能找到注册入口吗?能注册成功吗?哪一步卡了?——真实用户的卡点,比你自己测一百遍都值钱

看到什么算成功:你真的把链接发出去了(发给人 / 发了朋友圈 / 发了群),并且至少有 1 个真人告诉你「我注册好了 / 我进去了」

📷 截图位:① 把链接发出去的那一刻(朋友圈/群/私聊任一);② 第一个真实陌生用户注册成功(对方的反馈截图)。
💡 只拉到 1 个人也完全算数。今天的目标不是「拉多少人」,是验证陌生人能不能用。1 个真实陌生用户成功注册,胜过你自己注册 100 次——因为那 1 次,验证了你的站对外人真的能用

第七步 · 回后台见证「用户 +1」,拿下里程碑④

最后,回到 Supabase 后台,进 Table Editor(表编辑器)→ profiles(名册)表

现在看这张名册——它里面应该不止你一行了。多出来的那些行,邮箱不是你的:那是真实的陌生人,今天经你的手,注册进了你亲手做的站。

看到什么算成功profiles 名册里,除了你自己,还有别人的行(邮箱是你刚拉来的真人的)。配合你在线可访问的站(真域名或平台免费子域名都算),里程碑④ 达成

📷 截图位:里程碑④ · 在线站 + 后台 profiles 名册里多出来的真实用户(不是你自己)。
🎉 里程碑④达成 · 你的站第一次有了外人:「我做的站,今天有真实的陌生人注册进来用了。」——这是「受香火」之始。你不再是一个人对着自己的站,你的洞天,开始有人来往了
🌿 第一缕陌生香火入籍,空山闻人语。洞天至此,方算真正「活」了。

📜 咒语卡

咒语 = 可以一字不改、整段复制发给法器(Codex)的提示词。方括号 [ ] 里的内容要换成你自己的,其余照抄。

【理引路幡咒 · 润色注册引导】· 让站对陌生人一看就懂

我的网站马上要发给真实陌生用户来注册体验。请你站在「第一次来、什么都不知道」的陌生人角度, 帮我把首页和注册区的文案润色清楚,要求: 1. 首页顶部要有一句话,说清「这是给谁用的、能干嘛」——我的站是给[在此填目标人群,例如:备考教师资格证的人] 用来[在此填核心价值,例如:刷面试真题、解锁全套押题]的; 2. 注册入口(按钮/链接)要显眼,让人一眼就看见该点哪里注册; 3. 注册框旁边加一句引导,告诉用户「注册后能看到/能干 [在此填注册后的好处,例如:免费试读 5 题,付费解锁全部]」; 4. 另外这几个地方我自己觉得陌生人会看不懂/会犹豫:[把你第一步记的清单粘到这里,没有就写「暂无」],请一并改清楚。 只改文案/引导,不要动任何登录、数据库、付费墙的功能逻辑。 改完用一句大白话告诉我:你改了哪几个文件、我刷新线上站怎么验证。
填空说明:把 [ ] 里换成你自己的人群、价值、好处和清单,其余照抄。

【做分享卡咒】· 让链接转发到微信时带一张说明卡片

我要把网站链接发到微信、朋友圈、群里。请帮我配好社交分享卡片(Open Graph 标签), 让别人转发我的链接时,下面自动带一张卡片(标题 + 一句描述 + 一张预览图),要求: 1. 标题:[在此填你的站名,例如:教资面试真题渡口]; 2. 描述:一句话说清这站是干嘛的(你可以根据我首页内容帮我写一句); 3. 预览图:如果我没有现成图,就先用一张简单的纯色背景配站名的图顶上,或先不放图也行; 4. 把这些标签加到网站的 <head> 里。 只加分享标签,不要改任何功能。改完告诉我:加在哪个文件、我重新部署上线后怎么验证卡片效果。
填空说明:填站名即可,描述可让法器代写。

【上线咒】· 把润色后的站重新部署上线

我刚改了网站的注册引导文案和社交分享卡片,现在要把它重新部署上线,让线上是最新版本。 请帮我按我之前部署的方式(连 GitHub 仓自动部署 / 网页拖拽,你看我项目是哪种)打包并上线, 并提醒我:上线后如果白屏,要去平台后台检查 Supabase 的两把环境变量钥匙还在不在。 完成后告诉我:怎么确认线上已经是最新版本。
填空说明:本条不用填,直接整段复制。

🆘 卡住了?(按你看到的现象找)

现象:真人注册全失败 / 我自己当场注册也失败(第四步就过不去)

先检查(严格按这个顺序,第一条命中率最高):
1. ★ 项目是不是被暂停了(最大嫌疑):去 Supabase 看项目状态——免费项目 7 天没活动会自动 Paused(暂停),暂停期间谁都注册不了。看到 Paused 就点 Restore(恢复/唤醒),等它转完圈变 Active(活跃),再试注册。
2. 域名白名单 / 重定向 URL:第 14 课你换了真域名(或平台子域名)后,新域名要进 Supabase 的 Authentication → URL Configuration(Site URL / Redirect URLs) 白名单——没加的话,新域名上注册/登录会被挡。把你的线上域名加进去并保存。
3. CORS / 跨域被拦:如果浏览器控制台(F12)报红字里有 CORS 字样,说明你的线上域名没被允许访问 Supabase——同样去 Supabase 把你的域名加到允许列表里。
4. 确认邮箱开着、但邮件没到:如果你(在第 6 课加练里)开过「Confirm email(确认邮箱)」,用户注册后要去邮箱点确认链接才算成功,邮件常进垃圾箱。要么提醒用户查垃圾箱,要么先把「确认邮箱」关掉。

急救话术(先自己按上面 1→4 排,仍不行再把这段发给 Codex):
``
我把网站发给真人注册,全部失败,我自己当场注册也失败。
我已经检查:Supabase 项目状态是 [Paused / Active],我的线上域名是 [粘你的域名]。
浏览器控制台报的错是:[把 F12 控制台里的红字粘到这里,没有就写「没看到红字」]。
请帮我判断是「项目暂停没醒」「域名没进白名单」「CORS 跨域」还是「确认邮箱卡邮件」,
并告诉我具体去 Supabase 哪个设置页、改哪一项、怎么验证修好了。
``

现象:项目点了 Restore(恢复)后还在转圈 / 迟迟不变 Active

先检查:恢复免费项目有时要等几分钟,是正常的,别反复点
急救话术:耐心等 3–5 分钟刷新一次;超过 10 分钟还没好,换个网络重试(Supabase 国内偶尔加载慢)。期间先别发链接,等它真的 Active 了再发。

现象:把链接发到微信,下面没有分享卡片 / 卡片是旧的

先检查:① 你第五步重新部署上线了吗?没上线的话,外面看到的还是旧版没有卡片。② 微信对同一个链接的卡片有缓存,你刚改完它可能还显示旧的。
急救话术:确认线上已是最新版后,换一个稍微不同的链接(比如结尾加 ?v=2)再发一次试;或等一段时间微信缓存刷新。分享卡是锦上添花,没卡片也不影响别人注册,别为它卡住今天的正事。

现象:朋友说「打开了,但找不到在哪注册 / 不知道注册干嘛」

先检查:这正是第一、二步要解决的问题——你太熟了,陌生人看不懂。这位朋友的反馈就是金子
急救话术:把他原话记下来,回到第二步,把这句反馈加进 【理引路幡咒】 的清单里,让法器再润色一轮,重新上线。真实用户的卡点,改一条少流失一批人。
💬 万能急救 · 报错三句话(任何卡点都能用,记下它):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好,整段发给法器或答疑处,比你瞎描述管用十倍。例:「我把链接发给朋友让他注册 / 他说点注册按钮后页面转圈最后报错 / 我希望他能成功注册进来。」

✅ 出关自查(全部勾上才算过这一关)

我用「陌生人视角」走过一遍注册流程,并让法器把注册引导润色清楚了(线上已生效)
我在发链接之前做了 Supabase 保活检查:项目是 Active(活跃),并且当场自测注册成功
真的把线上链接发出去了(发给人 / 发朋友圈 / 发群),并且至少有 1 个真人反馈「注册好了 / 进去了」
回到 Supabase 的 profiles 名册,里面有别人的行(邮箱不是我的)——我亲眼见证了「用户 +1」
我有一个在线可访问的站(真域名或平台免费子域名都算),配合后台多出的真实用户,里程碑④达成

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上第一次有了真实陌生用户——你还拿到一套能反复用的开张工具:一份引客冷启动话术(私聊 / 发群 / 小红书三套,填空即发)和一张Supabase 保活检查清单(每次发链接前过一遍,永远不让真人撞上一扇打不开的门)。

  • 引客话术与保活清单 — 三套冷启动话术模板(私聊 / 发群 / 小红书,复制即用、【方括号】填空)+ 发链接前的 Supabase 保活检查清单(含当场注册失败的排查顺序与急救话术)。文件:../takeaways/15-引客话术与保活.md怎么用:要拉人时,挑对应场景的话术,把 【方括号】 换成你自己的主题和好处,整段复制发出;发链接之前,先把保活清单逐条勾一遍,全绿了再发——尤其隔了几天没动项目时,这张清单能救你第一批真人。
💡 可分享:「我做的会员站今天正式开张迎客了——第一个真实陌生人注册进来用上了!附赠自己总结的一套引客话术和发链接前必查清单。」——只讲方向和成果、不含任何链接钥匙,放心晒。

🌱 加练(选做)+ 下一课

加练 1 · 收集第一批真实反馈:发链接时多问一句「哪一步让你犹豫了?」。把收到的反馈记成一个小清单——这是你下一步优化站的最真实依据,比你自己拍脑袋强一百倍。

加练 2 · 给自己设一个小目标:今天拉到 1 个就算过关。如果还想多拉几个,可以把链接发给更多目标人群——但别买流量、别群发陌生人,今天只是验证可用,不是搞推广。

加练 3 · 给自己排一张「冷启动 SOP」:今天拉到第一个真人后,别一股脑乱发。按这个顺序 + 节奏来,转化最稳:

  • 第 1 步 · 私聊优先(最先做):先私发 3–5 个目标人群里的熟人,一对一附一句话请他注册体验。私聊转化率最高、最容易拿到第一批真实反馈——先把私聊这一轮跑完,再考虑公开发
  • 第 2 步 · 上目录站挂一条:把站登记到几个免费收录的导航/目录站(聚合「个人做的小站/小工具」那种),写清「给谁、能干嘛」,让对的人能搜到、刷到。
  • 第 3 步 · 小红书发一篇「保姆教程」:不硬广,而是把你做这件事的过程写成一篇一步步的「保姆级教程/笔记」,自然带出你的站——内容有用,自己就会带人来。
  • 节奏一天只推一个渠道,发完盯当天反馈(能不能注册、卡在哪),修完再上下一个渠道;别同一天全渠道齐发——一次只动一处,出了问题才知道是哪儿的事。
三套对应场景的填空话术模板(私聊 / 发群 / 小红书)都在锦囊里,挑场景、把 【方括号】 换成你的主题和好处,整段复制即发。文件:../takeaways/15-引客话术与保活.md
🔖 提醒:「保活检查」不是只有今天要做。以后每次准备把链接发给别人之前(尤其隔了几天没动项目),都先回 Supabase 瞄一眼是不是 Active——这个习惯能帮你避开「发出去全失败」的尴尬。

下一课预告:站有真人来了,但真人一来,问题就藏不住了——有没有人能越权看到不该看的内容?这一个月下来,AI 算力到底花了多少、有没有超支?手机上打开你的站,会不会有地方错位、点不动?

下一课「固元体检 · 安全与成本双复盘」,带你做一次全面体检:亲手做一次越权自测(验证游客真的看不到会员内容)、对一次账(看清这门课到底花了你多少钱、有没有超出第 1 课说的 ¥30–80)、再把手机上的小毛病修一修。把这座有人来往的真站,夯实成一座经得起住的洞天

🔖 小提示:这一课站的状态变了(润色 + 分享卡 + 真人入籍),记得让法器顺手存个档(git)——「受香火第一缕」这个状态值得留底,往后再改崩,一句话就能退回这座「第一次有外人来」的站。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 16 课

固元体检 · 安全成本双复盘

会员专属

# 第 16 课 · 固元体检 · 安全与成本双复盘

课头

🪷 境界:筑基大圆满 · 受香火二层
预计用时:90 分钟
🏆 本课产出:给你这座已经有真人来往的站做一次全面体检——亲手验证「别人偷不到别人的数据」(越权自测)、确认「私钥没被误传上 GitHub」、把「这个月真花了多少钱」和买课前的诚实成本告知书、第 3 课的灵石台账逐条对账,再让法器把站在手机上的排版修顺;最后拿到一张可勾选的「上线后必盯的安全点」体检表
🚫 今天不做:今天不加新功能不改业务逻辑不碰支付。今天只做两件事——查安全、对成本,再顺手修一下手机排版。这是一节「复盘+体检」课,不是「开发」课。
📜 引客入门已成(第 15 课已有陌生人在你站上注册),香火渐盛。可香火一盛,魑魅亦动——有人会探你的库、窥你的私钥、算你的花销。今日入受香火第二层,行固元之法:请法器化身白帽军师,替你巡一遍洞府的每一道门,验「他人之珍他人取不得」,查「本命钥匙未曾外泄」,再把这一程烧掉的灵石与当初的告知书逐笔对清。固元不增功力,却保你日后香火不被反噬。
📷 修炼笔记卷轴位(待补):受香火二层 · 白帽军师持灯巡府 · 一道道门验过、一笔笔账对清。

这一课,你在干一件什么事

第 15 课你做成了一件大事:有真实的陌生人在你的站上注册了。你的站不再是「自己玩的玩具」,它开始有真实用户、真实数据、真实流量了。

而「有了真实用户」这件事,会立刻带来三个你必须当面回答的问题:

  • 安全:用户 A 的数据,用户 B 偷得到吗?游客能看到只有会员才能看的内容吗?——这叫「越权」。前面第 10、12 课你已经用行级安全(RLS)和付费墙在后端上了锁,但「上了锁」和「锁真的锁住了」是两回事。今天你要亲手当一次「坏人」去试着越权,亲眼看到它被挡下来,才算数。
  • 密钥:你这一路接 Supabase、配法器,手里攥着几把「钥匙」。有没有哪把本该藏好的私钥,被不小心传到了 GitHub 上?(这是新手最常见、后果最严重的事故之一——私钥一旦公开,等于把你后台的大门钥匙挂在网上。)今天你要请法器把你的仓库翻一遍,确认没出这事。
  • 成本:这个月你这座站,真花了多少钱?和你买课前看的「诚实成本告知书」、第 3 课记的「灵石台账」对得上吗?有没有哪项悄悄超了?今天你要打开 Supabase 的用量面板,逐条对账,确认一切都在免费层内、没有意外扣费。

做完这三件,再顺手让法器把站在手机上的排版修一修(真实用户大半是用手机打开你的站的,手机上歪了可不行)。最后,法器会帮你把这次体检的要点,整理成一张「上线后必盯的安全点」体检表——以后每隔一段时间,你照着勾一遍,就能让站一直健康。

💡 为什么把「安全」和「成本」放在同一节课? 因为它俩是一座真站的「两条命脉」:安全出事,用户数据泄露、你被反噬;成本失控,账单悄悄涨、你被「割」。这两件都不是「写功能」,而是「守功能」——守住了,你交出去的才是一座能放心给陌生人用的站,而不是一颗定时炸弹。
🛡️ 关于「白帽军师」这个角色:今天法器扮演的是「白帽」——专门帮你找漏洞、但是站在你这边的安全专家(对应现实里的「白帽黑客 / 安全审计」)。你让它主动去攻击你自己的站,把能想到的漏洞先替你找出来、堵上,免得真坏人先找到。这是专业开发里一个标准动作,叫「安全自查 / 渗透自测」。

主线步骤(跟着做,每步都有「看到什么算成功」)

🧭 开工前对一下位置:本课会在几处之间切换——① 浏览器里你已上线的站(第 14 课部署的那个公网链接),② 浏览器里的 Supabase 控制台(看 RLS、看用量),③ 电脑上你的项目文件夹 + 法器(Codex),④ 一部手机(测移动端)。建议把这几样都准备好。

另外:今天会反复用到「两个不同身份」去访问你的站——一个游客 / 普通注册用户,一个会员(is_member=true)账号。如果你手上没有现成的两个账号,第一步会教你快速备好。

第一步 · 备好两个「身份」:一个普通用户、一个会员

越权自测的核心,是用「不该看到的身份」去试着看「不该看的东西」。所以你需要手上有两个能登录的账号:

  • 账号甲 · 普通用户:随便注册一个新邮箱账号(或用第 15 课某个测试账号),不要给它开会员。它代表「一个掏了门票钱、但没付费解锁的普通访客」。
  • 账号乙 · 会员:你自己常用的那个账号,确认它的 is_membertrue(第 11、13 课你给自己开过会员)。它代表「已付费的会员」。
看到什么算成功:你手上有两个能登录的账号,并且你清楚地知道——甲是普通用户(没会员),乙是会员。在 Supabase 控制台的 profiles 表里,你能看到甲那行 is_memberfalse、乙那行是 true

💡 不确定哪个账号是不是会员? 打开 Supabase → Table Editor → profiles 表,找到对应邮箱那一行,看 is_member 这一格是 true 还是 false,一目了然。

第二步 · 越权自测之一:游客 / 普通用户能看到「会员专属内容」吗?

这是检验你付费墙后端(第 12 课)是否真的锁住了。

做法:

  • 在浏览器里用账号甲(普通用户)登录你的站(或者干脆退出登录、以游客身份访问)。
  • 找到一条你标记为「会员专属」(is_free = false)的内容,点进去。
  • 看它能不能显示出正文

正确的结果是:游客 / 普通用户只能看到标题和试读摘要,看不到正文——正文要么是渐隐遮罩,要么干脆空着。这就是付费墙在生效。

看到什么算成功:用账号甲(或游客)打开一条会员专属内容,看不到正文(只有标题/摘要/一个「解锁」提示)。然后切换成账号乙(会员)再打开同一条,正文完整显示。两个身份看到的东西不一样——付费墙后端拦截正常。

📷 截图位:越权自测 · 用游客/普通账号访问别人数据被后端挡下。

🆘 如果账号甲(普通用户)也能看到会员专属正文——别慌,这正是体检要查出来的问题。跳到本课「🆘 卡住了」的「发现越权」一条,有现成的补救话术。这种问题今天查出来、今天补上,远好过上线后被用户发现。
🌿 试读之门已验:凡客止于门前摘要,会员方得入阁观全卷。门若失守,今日补之犹未晚。

第三步 · 越权自测之二:用户能改 / 删「别人的」数据吗?

这是检验你行级安全(第 10 课)的写策略是否真的把「写权限锁在站主手里」。

最稳、最像「真坏人」的测法,是请法器模拟一次越权写入——不用你自己手写代码:

📜 咒语卡①「白帽越权咒」 整段发给法器(Codex)。它会以账号甲(普通用户)的身份,试着去做几件「不该被允许」的事,例如:

  • 试着往 contents 表里新增一条内容(普通用户不该能发内容,只有站主能);
  • 试着修改 / 删除一条已有内容;
  • 试着读取或修改别人 profiles 里的资料(每个人只该能管自己那行);
  • 试着把自己那行的 is_member 直接改成 true(不输激活码、自己白嫖会员)——这是付费墙头号绕过点,第 13 课配的「列锁」就是堵它的,今天亲手验一遍堵没堵住。

法器跑完,会用人话告诉你每一项是「被挡下了(安全)」还是「居然成功了(漏洞!)」。

看到什么算成功:法器报告里,上述越权尝试全部被挡下(关键词通常是 permission deniedrow-level security 之类,法器会翻译成人话:「普通用户想新增内容,被后端拒绝了,这是对的」)。如果全是「被挡下 / 安全」,你的写权限锁是牢的。

💡 这一步法器具体干了啥(透明层):它临时用「普通用户」的钥匙,去敲了几扇本不该对普通用户开的门,记录每扇门是「打不开(安全)」还是「被推开了(漏洞)」,然后把结果翻译成人话给你。它没有真的破坏任何数据——越权写入要么被挡下、要么法器会主动把测试数据清掉。

🆘 如果有任何一项「居然成功了」——跳到「🆘 卡住了 → 发现越权」,按话术请法器补 RLS 策略。

第四步 · 密钥体检:私钥有没有被误传上 GitHub?

这一步查的是新手头号安全事故:把本该藏在 .env 里的「私钥」(尤其是 Supabase 的 service_role 那把红色钥匙——第 5 课讲过的「红绿两把钥匙」)不小心提交到了 GitHub 公开仓库里。

📜 咒语卡②「翻箱验钥咒」 整段发给法器,让它把你的整个项目仓库翻一遍,专门找有没有「不该出现在代码里的钥匙 / 密码」,并且特别确认 .env 文件没有被 git 跟踪、没有被推上 GitHub

法器会给你一份人话报告,逐项说清:

  • .env 是否被 .gitignore 正确忽略(应该被忽略、不该上传);
  • 历史提交里有没有出现过疑似私钥的字样;
  • 线上 GitHub 仓库里,有没有哪个文件「裸露」了钥匙。
看到什么算成功:法器报告「.env 已被正确忽略、没有被提交;仓库里没有发现裸露的 service_role 私钥或密码」。绿灯。

📷 截图位:仓库密钥体检 · 法器报告没有把私钥误传上 GitHub。

💡 顺手核对「红绿两把钥匙」:你的前端代码里可以出现 Supabase 的 anon 那把绿色钥匙(它本来就是公开给浏览器用的,配合 RLS 才安全);但绝不能出现 service_role 那把红色钥匙(它能绕过所有安全规则,泄露=后台失守)。法器报告里会帮你区分这两把——绿的露了没关系,红的露了要立刻处理。

🆘 如果法器发现红色私钥真的被传上去过——别慌,这能补救。跳到「🆘 卡住了 → 发现私钥外泄」,里面有「先吊销旧钥匙、换新钥匙」的标准急救流程。
🌿 本命之钥,可示人者示之(绿钥),当深藏者藏之(红钥)。钥若失守,第一要务不是遮掩,而是即刻废旧换新——旧钥一废,窃者手中之钥即成废铁。

第五步 · 成本对账:打开 Supabase 用量面板,和台账逐条核对

现在查「钱」。你这座站真实在花钱的地方,第 1 课「灵石速览」、第 3 课「灵石台账」、买课前的「诚实成本告知书」都写清过:唯一真要花的是 AI 算力(悲观 ¥30–80),其余(Supabase / Cloudflare / GitHub)大概率 ¥0。今天来验证「大概率 0」到底有没有兑现。

打开 Supabase 控制台 → 进入你这个项目 → 找到 Usage / 用量(通常在项目设置或组织账单页面里,中文叫「用量」)。重点看这几条免费层额度:

  • 数据库大小(Database size):你的内容才几十条,离免费层上限远得很。
  • 存储 / 流量(Storage / Egress):除非你传了大量图片,否则极低。
  • 月活用户 / API 请求(Monthly Active Users / 请求数):第 15 课刚拉的几个真人,离免费层上限(通常几万级)远得很。

把这三条,和你第 3 课记的灵石台账、买课前告知书的数字对一对:是不是都远在免费层以内、没有产生一分钱实际扣费

看到什么算成功:Supabase 用量面板上,数据库、存储、月活这三条都显示在免费额度内(进度条远没满、账单是 ¥0)。你能在台账上对应位置打钩:「Supabase 实际花费 = ¥0,与告知书一致。」

📷 截图位:Supabase 用量面板 · 对照台账三条用量都在免费层内。

💡 顺手提一句免费层的「7 天暂停」:Supabase 免费项目7 天没人访问会自动暂停(第 14、15 课提过)。现在你站上有真人,一般不会触发;但如果哪天「真人注册全失败」,第一件事就是去用量面板看项目是不是被暂停了,点一下「恢复 / Restore」即可。这条也会进你今天的体检表。
🌿 香火虽盛,灵石未损——免费层之额,足供你这座小洞府长久运转。账目对清,心下安然:你未曾被割,分文未冤花。

第六步 · 让法器把手机上的排版修顺(移动端适配)

你的真实用户,大半是用手机打开你的站的。在电脑上好看,不代表手机上不歪。这一步让法器把移动端排版修一修。

做法:

  • 用手机打开你的站,挨着看几个关键页面:首页、内容列表、内容详情、登录页、付费墙提示。把歪掉的地方记下来——比如:字太小、按钮被挤出屏幕、图片溢出、横向能滑出一条白边、文字贴边没留空。
  • 📜 咒语卡③「移动端正骨咒」 发给法器,把你看到的具体问题填进去(越具体越好,比如「内容详情页的封面图在手机上超出屏幕宽度,右边能滑出一条白边」)。
  • 法器改完,会让站存个档(git)再改——改完你再用手机刷新,看是不是顺了。
看到什么算成功:手机刷新后,刚才歪的地方正了——没有横向白边、按钮在屏幕内、文字不贴边、图片不溢出。你的站在手机上「看起来是正经做过的」。

📷 截图位:手机上你的站 · 法器修完移动端适配后排版正常。

💡 这一步法器具体干了啥(透明层):它主要在改 CSS 样式(控制「在小屏幕上怎么排版」的规则,专业叫「响应式 / media query」),没动你的业务逻辑、没动数据库。所以这一步很安全,改坏了大不了一句话回档(你第 4 课练过)。

🆘 如果改完某个地方反而更歪了,或电脑端被改坏了——用报错三句话把现象发给法器让它修;实在乱了,就让它「回到改之前的存档」(git 回档,第 4 课那套),从头再来。

第七步 · AI 代码收拾:让法器当白帽军师,给代码做一次「减法」

前面几步守的是「安全」和「成本」,这一步守的是第三条命脉:代码本身的健康。这一路你大量让法器写代码,速度快,但也会留下一身「赘肉」——几个月后你回来改一处小功能,发现满屏看不懂的代码、改一处崩三处,这就是「渡劫的暗坎」:站没出事,是你自己先被代码吓退了。

AI 写代码的三种典型「赘肉」,今天一次性请白帽军师替你减掉(注意:是「减法」,不是「加功能」——和今天全课基调一致,只守不增):

  • 无用代码:法器一路改下来,会留下一些没人调用的函数、注释掉的旧版本、import 了却没用的东西、调试用的 console.log。它们不报错,但让代码越读越厚。
  • 过度抽象:法器有时会「想太多」,为一个只用一次的功能造出一堆「为了以后好扩展」的层层封装、配置项、中间函数。你现在根本用不到,它却先让代码变难懂。 该拍平的拍平。
  • 缺错误处理的关键 fetch:你站里那些跟 Supabase 要数据 / 提交数据的网络请求(fetch / await supabase...,一旦网络抖一下、后端拒了,如果没写「失败了怎么办」,用户看到的就是整页卡住或白屏。关键请求必须补上「失败给个提示、别让页面死掉」。

做法:把 📜 咒语卡④「代码收拾咒」 整段发给法器(Codex)。它会先列一份「打算删什么、收敛什么、给哪些 fetch 补错误处理」的清单给你过目(这就是杀手卡【Plan-First 先谋后动】——大改前先出方案,你点头再动手),你确认后它分小步改、每步存档,绝不一把梭哈把站改崩。

看到什么算成功:法器先给你一份「减法清单」(删哪些无用代码、把哪处过度抽象拍平、给哪几个关键 fetch 补了错误处理),你点头后它分步改完并存档;站功能一切照旧(登录、内容、付费墙都没变),但代码更短、更好读了,关键网络请求失败时会给提示而不是白屏

💡 这一步法器具体干了啥(透明层):它做的是「重构 / 清理」——只动「代码长什么样」,不动「站能干什么」。删的是确认没人用的死代码、拍平的是用不上的空壳封装、补的是网络请求的「失败兜底」。没加任何新功能、没碰数据库、没动安全策略。 所以它和移动端那步一样安全:改坏了,一句话回档(第 4 课那套)。

🆘 如果法器一上来不给清单就猛改一大片,或删完某处站功能少了一块——别慌:立刻让它「回到改之前的存档」(git 回档),然后把 📜 咒语卡④ 里「先列清单、等我点头、分小步改」这几句再强调一遍发给它。代码收拾的铁律是:宁可慢慢减,不可一把删。
🌿 渡劫非只渡外魔,亦要渡内患。法器为你筑楼神速,却也堆下层层浮土——浮土不除,他日你欲改一砖,竟不知从何处下手,这便是「自困之劫」。今日请白帽军师执刀,削去赘肉、填平虚壳、为每一道取水之门补上「水若不来,莫让人空等」的兜底。劫渡过,楼方轻,日后你回身再改,举重若轻。

第八步 · 让法器出一张「上线后必盯的安全点」体检表(今天的微里程碑)

最后,把今天查过的东西沉淀成一张清单,以后定期照着勾。

📜 咒语卡⑤「立体检表咒」 发给法器,让它把今天这套体检整理成一张「上线后必盯的安全点 · 固元体检表」,存进你的项目文件夹(比如 docs/安全体检表.md),内容包含但不限于:

  • 越权自测:游客/普通用户看不到会员内容、改不了别人数据、改不动自己的 is_member(列锁生效);
  • 密钥:.env 没被提交、红色私钥没裸露在仓库;
  • 成本:Supabase 三条用量在免费层内、无意外扣费;
  • 保活:项目没被 7 天暂停(真人注册失败时首查这条);
  • 移动端:手机上排版正常。

每一条都做成可勾选的样子(前面带 - [ ]),让你以后每隔一段时间(比如每月一次、或每次大改之后)照着体检一遍。

看到什么算成功:项目文件夹里多出一份「固元体检表」文件,打开是一张可勾选的清单,每条都对应今天你亲手验过的一项。法器还用一句人话告诉你「以后多久勾一次、哪条最要命」。

📷 截图位:「上线后必盯的安全点」体检表(这是本课的微里程碑)。

🎉 可发朋友圈的截图:「给自己的站做了一次完整安全+成本体检——越权挡得住、私钥没外泄、账单 ¥0、手机上也正。一张体检表在手,以后定期复查。」——你已经从「会做站」走到「会守站」了。
🌿 体检既毕,立册存档。此册非为今日,乃为日后——香火越盛,越要按时巡府。一表在手,固元长久。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器(Codex)的提示词。【...】 是要你替换/填空的地方,其余照抄。今天这五张卡,让法器全程扮演「站在你这边的白帽安全军师」。

【白帽越权咒】· 让法器模拟普通用户去攻击你自己的站(对应第三步)

你现在是我的白帽安全军师。我的站接了 Supabase(PostgreSQL + RLS + 邮箱密码登录), 是一个会员制内容站:contents 表是平台内容(只有站主能增删改), profiles 表每人只能管自己那行,is_free=false 的内容只有 is_member=true 的会员能读。 请你帮我做一次「越权自测」:以一个【普通注册用户(没开会员)】的身份, 试着去做下面这些「本不该被允许」的事,逐项告诉我是被挡下(安全)还是成功了(漏洞): 1. 往 contents 表里新增一条内容(普通用户不该能发,只有站主能); 2. 修改 / 删除一条已有的 contents 内容; 3. 读取或修改另一个用户在 profiles 里的资料; 4. 以游客/普通用户身份读取一条 is_free=false 的会员专属内容的正文; 5. 把我自己这行 profiles 的 is_member 直接 update 成 true(不走激活码、自己白嫖会员)—— 这一条必须被挡下:第 13 课用「列级权限」把 is_member 锁住了,只有 redeem 函数能翻它。 如果这条竟然成功了,说明那道列锁没配,付费墙能被一行代码绕过,请重点标红。 要求: 1. 用我看得懂的大白话报告每一项的结果(被挡下=安全,成功=漏洞); 2. 测试过程中不要真的破坏或留下垃圾数据,能撤销的请撤销; 3. 如果发现任何一项「居然成功了」,先别动手改,把它单独列出来, 并告诉我这是哪一层(RLS 读策略 / 写策略 / 付费墙)出的问题。

【翻箱验钥咒】· 让法器检查仓库有没有误传私钥(对应第四步)

你现在是我的白帽安全军师。请把我当前这个项目仓库整个检查一遍, 专门找「不该出现在代码或 git 历史里的钥匙 / 密码 / 密钥」。重点查: 1. .env 文件是否被 .gitignore 正确忽略、是否曾经被提交到 git(绝不该被提交); 2. 代码和 git 历史里,有没有出现过 Supabase 的 service_role 私钥 (那把「红色钥匙」,能绕过所有安全规则,绝不能泄露); 3. 有没有其他疑似密码、token、密钥被硬写进了代码。 请区分清楚:Supabase 的 anon「绿色钥匙」出现在前端代码里是正常的、不用慌; service_role「红色钥匙」一旦出现在仓库里,就是严重事故,请单独高亮告诉我。 用大白话给我一份报告:哪些是安全的、哪些有问题。 如果发现红色私钥被传上去过,先别自己处理,把发现告诉我,我们走「吊销换新」流程。

【移动端正骨咒】· 让法器修手机上的排版(对应第六步)

我的站在电脑上排版正常,但在手机上有这些问题: 【在这里逐条写出你用手机看到的具体问题,例如: - 内容详情页的封面图超出屏幕宽度,右边能横向滑出一条白边; - 首页的「立即解锁」按钮被挤出了屏幕; - 内容列表的文字贴着屏幕边缘,没有留空。】 请你只修移动端(小屏幕)的排版样式(CSS / 响应式), 不要改任何业务逻辑、不要动数据库、不要改登录和付费墙。 改之前先帮我存一个档(git),改完用一句人话告诉我你改了哪个文件、改了什么, 我会用手机刷新验证。如果某处改完反而更歪,告诉我怎么回到改之前的存档。

【代码收拾咒】· 让法器当白帽军师给代码做减法(对应第七步)

你现在是我的白帽代码军师。请帮我给这个项目的代码做一次「减法」体检(只清理、不加新功能)。 重点查并处理三件事: 1. 无用代码:找出没人调用的函数、注释掉的旧版本、import 了却没用的东西、调试用的 console.log, 确认确实没人用之后删掉; 2. 过度抽象:找出「为了以后好扩展」但现在只用一次的层层封装 / 多余配置项 / 空壳中间函数, 把它们拍平、收敛成简单直接的写法; 3. 关键 fetch 缺错误处理:找出跟 Supabase 要数据 / 提交数据的网络请求(fetch / await supabase...), 给关键的那几个补上「失败了怎么办」——请求失败时给用户一个提示,别让整页卡住或白屏。 要求(请严格按顺序): 1. 先别动手改。先用大白话给我一份「减法清单」:打算删哪些无用代码、把哪处过度抽象拍平、 给哪几个 fetch 补错误处理,每条说一句为什么。等我说「开始」你再改; 2. 我点头后,分小步改,每改完一处就帮我存一个档(git),并用一句人话说改了哪个文件、改了什么; 3. 全程不要加任何新功能、不要碰数据库、不要动登录和付费墙的安全逻辑—— 这次只让代码变短、变好读、网络请求失败时不白屏,站能干的事一件都不许变。 如果你不确定某段代码到底有没有人用,先标出来问我,别擅自删。

【立体检表咒】· 让法器把今天的体检沉淀成可勾选清单(对应第八步)

请把我今天做的这套「安全 + 成本」体检,整理成一份「上线后必盯的固元体检表」, 存进我项目的 docs 文件夹(文件名比如 docs/安全体检表.md)。 体检表要做成「可勾选」的清单(每条前面带 - [ ]),至少包含: 1. 越权自测:游客/普通用户看不到会员专属内容;普通用户改不了/删不了别人内容;普通用户**改不动自己的 `is_member`**(列锁生效、不能自己白嫖会员); 2. 密钥:.env 没被提交;service_role 红色私钥没裸露在仓库; 3. 成本:Supabase 数据库/存储/月活三条用量都在免费层内、账单为 0; 4. 保活:Supabase 项目没被「7 天暂停」(真人注册失败时第一个查这条); 5. 移动端:手机上首页/列表/详情/登录/付费墙排版正常; 6. 代码收拾:删了无用代码、收敛了过度抽象、关键 fetch 补了错误处理(失败不白屏)。 每条用大白话写「怎么查、查到什么算正常」。 最后用一句话建议我:以后多久照这张表体检一次、哪一条最要命。
填空说明:五张卡里只有【移动端正骨咒】需要你填入「用手机看到的具体问题」;【白帽越权咒】里的「普通注册用户」按你账号甲的实际情况描述即可;【代码收拾咒】整段照抄即可。其余整段照抄。

🆘 卡住了?(按你看到的现象找)

现象:越权自测时,普通用户 / 游客竟然能看到会员专属内容的正文(发现越权 · 读)

先检查:这说明付费墙的后端读策略没拦住——多半是第 12 课的 RLS 读策略没生效,或者前端只做了「遮罩」、后端根本没拦(遮罩是 F12 就能绕过的,真正的拦截必须在后端 RLS)。
急救话术(照做):把这句发给法器——「我做越权自测时发现:用一个没开会员的普通账号(或游客),竟然能读到 is_free=false 的会员专属内容正文。这说明后端读策略没拦住。请帮我检查并修复 contents 表的 RLS 读策略,让它严格做到『is_free=true 谁都能读;is_free=false 只有 is_member=true 的会员能读』。先告诉我现在的策略哪里漏了,再给我可复制的修复 SQL,最后教我怎么重新越权自测确认补好了。」补完,回第二步再测一遍,确认这次普通用户看不到了。

现象:越权自测时,普通用户竟然能新增 / 修改 / 删除内容(发现越权 · 写)

先检查:这说明写策略没把权限锁在站主手里——第 7、10 课的「只有 created_by=当前用户的站主能写」那条策略可能没生效或被覆盖了。
急救话术:发给法器——「越权自测发现:普通用户能往 contents 表新增/改/删内容,但这张表应该只有站主能动。请帮我检查并修复 contents 的 RLS 写策略,确保只有内容创建者(created_by=auth.uid())能 INSERT/UPDATE/DELETE。先告诉我现在哪条策略太松,再给我可复制的修复 SQL。」补完回第三步重测。

现象:法器报告发现 service_role 红色私钥被传到过 GitHub(发现私钥外泄)

先检查:这是真事故,但能补救,关键是「先换钥匙,再清痕迹」——只要旧钥匙作废,窃者手里那把就成废铁。
急救话术(按顺序做):发给法器——「白帽军师,我的 Supabase service_role 私钥被误传到 GitHub 上过。请按标准事故流程一步步带我处理:第一步先告诉我去 Supabase 哪里『吊销旧钥匙 / 重置(rotate)service_role key』,让旧的立刻失效;第二步用新钥匙更新我本地 .env 和线上平台的环境变量(第 14 课那两处);第三步把私钥从代码里移除、确认 .env 已被 .gitignore 忽略、以后不再被提交。每一步做完用人话确认,再带我做下一步。
💡 最重要的一句:发现私钥外泄,第一反应不是删文件遮掩(git 历史里删了照样能翻出来),而是立刻把那把钥匙作废换新。换了新的,旧的泄露出去也没用了。

现象:成本对账时,发现 Supabase 用量某条接近上限 / 出现了非 0 的费用

先检查:先看是哪一条——是不是不小心传了很多大图片(撑爆 Storage),或开了什么付费功能。这在你这个体量极少见。
急救话术:发给法器——「我的 Supabase 用量里【哪一条】接近上限/产生了费用,但我这是个内容才几十条、用户才几个的小站。请帮我查这是什么占用的、是不是哪里配置错了,怎么把它降回免费层内。」对照第 1、3 课的成本数字——整门课唯一该花的只有 AI 算力(¥30–80),其余冒出费用都要查清。

现象:手机打开站,整页都歪 / 加载不出来(不只是排版问题)

先检查:如果是「整页白屏/加载不出」,那多半不是排版问题,而是部署或环境变量问题(回想第 14 课「部署成功但白屏=99% 环境变量没填」);如果页面出来了只是「排版歪」,才是本课第六步的移动端问题。
急救话术:先分清是「白屏」还是「歪」。白屏用报错三句话发法器、首查环境变量与项目是否被暂停;歪就用【移动端正骨咒】。
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好,连同法器报告或红色报错整段复制,发给法器。安全类问题尤其要把法器的原始报告给全——给全了,白帽军师才能一次帮你定位到是哪一层漏了。

✅ 出关自查(全部勾上才算过这一关)

我用普通用户/游客身份亲手试过,看不到会员专属内容的正文(看得到说明越权,已按急救补好并复测通过)
法器替我模拟普通用户做了越权写入自测,结果是「全部被挡下」——别人改不了、删不了、加不了我的内容
法器把仓库翻过一遍,确认 .env 没被提交、service_role 红色私钥没裸露在 GitHub 上(绿色 anon 钥匙在前端是正常的)
我打开 Supabase 用量面板,确认数据库/存储/月活三条都在免费层内、账单 ¥0,与买课前的告知书、第 3 课台账对得上
法器帮我把手机上的排版修顺了(没有横向白边、按钮在屏内、图片不溢出)
法器当白帽军师给代码做了一次减法——先列清单、我点头后分步改并存档,删了无用代码、收敛了过度抽象、给关键 fetch 补了错误处理(站功能照旧、代码更短、网络请求失败不白屏)
我拿到一份可勾选的「固元体检表」存在项目里,知道以后多久照它复查一次

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上多了一次安全体检——你还拿到了一件能反复用一辈子的东西:一张「上线后定期体检单」。以后这座站每隔一段时间、每帮人做一个新站,都照着它勾一遍,就能让站一直健康、不被反噬。

  • 安全 + 成本「固元体检表」 —— 一张照着勾就能跑完的清单,专治三件要命事:越权自测(别人偷得到别人的数据吗)、密钥自查(私钥有没有误传上 GitHub)、用量对账(这个月真花了多少钱),外加保活、移动端、AI 代码收拾(删无用代码 / 收敛过度抽象 / 给关键 fetch 补错误处理)三条。每条都配「怎么查 → 查到什么算正常」,勾不上还附带可直接发给法器的急救话术。文件:../takeaways/16-固元体检表.md(其中「代码收拾」勾选项就在这份体检表里,照着勾即可)。怎么用:存进你项目的 docs/ 文件夹,照着把 - [ ] 一条条勾掉;带 【方括号】 的填你自己的实际情况(会员邮箱、看到的数字);哪条勾不上就把那条下面的急救话术整段发给法器,修完回来重勾。建议每月一号 + 每次大改后各体检一遍。
💡 可分享:「上线前/上线后安全体检表分享给你:越权自测 + 密钥自查 + 用量对账,一张表照着勾就能查完,勾不上还自带急救话术。只讲方法、不含任何钥匙,拿去用。」——给自己的站做了一次完整体检,你已经从「会做站」走到「会守站」了。

🌱 加练(选做)+ 下一课

加练:把今天那张「固元体检表」设成一个固定提醒——比如手机日历每月一号提醒你「给站做一次固元体检」。一座有真人来往的站,安全和成本都是「需要定期复查的活物」,不是做完就一劳永逸。养成这个习惯,你就比 90% 的「做完站就不管」的人靠谱。

进阶加练(更想懂底层的人选做):让法器用大白话给你讲一遍「为什么前端遮罩挡不住、必须靠后端 RLS」——它会告诉你「任何人按 F12 都能看到前端代码、绕过遮罩,但绕不过数据库的 RLS 规则」。理解了这一句,你就真正懂了「付费墙的真锁在后端」这件事,而不只是会照做。

下一课预告:体检过了,你的站既安全又不超支,是一座能放心交给陌生人的真站了。

下一课,一键复刻——你会请法器把这一整套「注册→内容→付费墙→激活码」的骨架抽象成一个可复用的模板,然后现场换一个主题、重搭一座同款站。那一刻你会发现:你学会的不是「做了一个站」,而是「随时能再造一个站」的生产力。这才是筑基真正给你的东西。

🔖 小提示:今天改了移动端样式、可能也补了 RLS 策略,记得照老规矩让法器顺手「存个档」(git 回档)。每过一道关就存一档——改坏了,一句话就能回到上一个境界。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 17 课

一键复刻 · 付费墙变模板

会员专属

# 第 17 课 · 一键复刻 · 把付费墙变成可复用模板

课头

🪷 境界:筑基大圆满 · 受香火三层
预计用时:95 分钟
🏆 本课产出:让法器把你这座付费站抽象成一套可复用的骨架,再生成一张「换主题复刻清单」,然后现场换一个全新主题、最小重搭出第二座同款付费站——亲手验证「毕业即能复刻同款」这句话不是空话。
🚫 今天不做:不重写功能、不加新表、不碰支付逻辑本身(骨架完全沿用第 1–16 课造好的那套),不追求第二座站内容多完整(20 条够演示就行)
📜 你这座洞府已成:能纳客、能藏经、能立禁、能受香火。今日所修非是再造一物,而是「分身」之法——把你亲手炼成的这座洞府收摄成一道法印,往新地一拓,又是一座同款道场拔地而起。一座洞府是产物,一套能复印洞府的法印,才是真正的道行。自此你手中所握的,不再是一座站,而是一门可反复开宗的法门。
📷 修炼笔记卷轴位(待补):道人立于已成洞府前,伸手将整座洞府收为一枚发光法印;法印一拓,远处第二座同形洞府的轮廓正在升起,门楣主题各异、骨架同源。

这一课,你在干一件什么事

到上一课为止,你已经有了一座完整跑通的付费站:陌生人能注册、能登录、游客只看试读、会员才解锁、付钱给激活码就开通。它真的在公网上活着。

但这里藏着这门课最值钱的一句承诺:你学到的不是「做出某一个站」,而是「做出这一类站的能力」。 同样这套骨架——三张表(名册 profiles / 藏经阁 contents / 渡口令牌 activation_codes)、登录、付费墙、激活码——只要把里面装的内容主题换一换,立刻就是另一座全新的付费产品。面试题库可以,辅食食谱可以,AI 咒语库可以,刷题卡也可以。

今天就把这件事当场做一遍给你自己看,分三步:

  • 抽骨架:让法器把你这座站「拆解成几块拼图」,画一张人话版的项目骨架地图——你第一次看清自己这座站到底由哪几部分组成。
  • 生成复刻清单:让法器对照这张地图,生成一张「换主题要改哪几处、不用动哪几处」的待办清单——这就是你的复刻模板,以后做第 N 座站都照着它走。
  • 现场复刻一座:照着清单,换一个新主题,最小重搭出第二座同款付费站,部署上线、拿到第二条链接、用同一批激活码解锁验证。
💡 为什么这是「金丹期接引」? 因为「把一个能跑的产品抽象成可复用模板、再快速复刻」正是从「会做一个」迈向「能批量出产品」的那道门槛。今天你只是迈出这一步的第一脚——但等你毕业后想做第二个、第三个副业产品时,你会回头感谢今天这 95 分钟。
💡 第二座站要做得多完整? 不用做完整。今天目标是验证复刻流程跑得通,不是再造一个成品。第二座站只要换好主题、装够 20 条左右内容、付费墙和激活码验证通过,就算达标。它日后是否打磨成真产品,是你毕业以后的事。

主线步骤(跟着做,每步都有「看到什么算成功」)

第一步 · 让法器画一张「项目骨架地图」

打开你的法器(Codex),把【📜咒语卡 1·抽骨架咒】整段发给它。它会把你这座站拆成几块拼图,用人话告诉你:哪几块是「骨架」(每座站都一样、复刻时不用动),哪几块是「主题填充」(每座站不一样、复刻时要换)。

法器读完你的项目后,会输出一张类似这样的清单(你的具体内容以法器输出为准):

  • 骨架·复刻不用动:登录注册逻辑、三张表的结构、付费墙遮罩、激活码解锁逻辑、RLS 读写策略、部署配置
  • 主题·复刻要换:站点名称/标语、contents 表里的内容条目、首页文案、配色与封面图、is_free 哪几条做试读
看到什么算成功:法器输出了一份「这座站由哪几块组成」的清单,并且明确把每一块标成了「骨架(不用动)」或「主题(要换)」两类。你第一次一眼看懂自己这座站的结构。

📷 截图位:法器输出的「项目骨架地图」(一页看清你这座站由哪几块拼成)。
🔍 法器刚干了啥(看得懂透明层):它没有改你任何文件,只是读了一遍你的项目,然后用人话把结构讲给你听——相当于带你把自己这座站从头到尾「导览」了一圈。这一步是只读的,绝对不会动到你现在能跑的站。
🌿 第一次,你看清了自己亲手炼的这座洞府的「经络走向」——哪几脉是天生骨架,哪几脉是后天主题。看清了,才谈得上分身。

第二步 · 让法器生成「换主题复刻清单」

骨架看清了,接下来让法器把它变成一张可照着勾的待办清单。把【📜咒语卡 2·复刻清单咒】发给法器,告诉它你下一座站想做的新主题。

法器会生成一张按顺序排列的 checklist,每一条都是一个具体动作,例如:

  • 在新渡口(Cloudflare)新建一个项目,复用同一套代码
  • 改站点名称与首页标语为新主题
  • 在 Supabase 里清空旧的 contents 内容、录入新主题的 20 条内容
  • 重新设定哪几条 is_free=true 做试读
  • 换封面图/配色(可选)
  • 部署、用同一批激活码验证解锁
看到什么算成功:法器输出了一张带先后顺序、每条都是一个可执行动作的复刻清单。你把它完整复制保存进备忘录(命名「换主题复刻清单」)——这就是你以后每做一座新站都能复用的模板。

📷 截图位:法器生成的「换主题复刻清单」(待办式 checklist)。
💡 这张清单才是今天的真宝贝。 第二座站只是用它跑一遍的「演示品」;这张清单本身,是你毕业后做第 3、第 4 座站时直接拿来用的生产力工具。务必存好。

第三步 · 定下第二座站的新主题

挑一个和你现在这座站不同的新主题——故意挑个不一样的,才能验证「换主题真的换得干净」。

老规矩,还是那三把尺子(任挑其一即可,今天只是演示,别纠结):①你有没有现成内容能凑 20 条 ②有没有人要 ③会不会越界。

💡 省事默认:如果你现在这座站做的是「AI 咒语库」,第二座就做「面试题库」;反过来也行。两个主题内容你大概率都现成,最容易跑通。今天不是为了做出第二个好产品,是为了验证流程,所以选最省心的就好。
看到什么算成功:你能用一句话说清第二座站——「我要复刻一座让 [谁],注册后看 [什么试读]、付费解锁 [什么会员内容] 的站」,并且这个主题和你第一座站明显不同

第四步 · 复用同一套代码,开第二个新渡口项目

打开你的法器,把【📜咒语卡 3·开分身咒】发给它,让它基于你现在这套代码、为新主题起一份新的项目副本,并帮你把站点名称、首页标语改成新主题。

看到什么算成功:法器告诉你它已经准备好了一份新主题的项目代码,站点名称/标语已经换成新主题;你在本地预览(法器会告诉你怎么打开预览),首页标题已经是新主题的名字,不再是旧站的名字。
🔍 法器刚干了啥(看得懂透明层):它没有动你原来那座线上站——原站还在好好活着。它只是复制了一份代码、在副本里把主题文案换掉。你现在等于手里有两套站的代码:老的没动,新的待发
🆘 如果这一步法器把你原来的站改坏了,别慌——你第 4 课立的 git 存档就是为这一刻准备的。直接对法器说「回到上一个存档」,它会把改动撤回。(详见下方🆘卡住了。)

第五步 · 换干净内容:清空旧内容、录入新主题 20 条

这是最容易串味的一步,专门拎出来讲。第二座站的「壳」换了主题,但它连的还可能是同一个 Supabase 数据库里的旧内容——如果不换干净,新站点开会冒出上一座站的旧条目,主题就「串味」了。

两种正规做法,二选一(推荐 A):

  • 做法 A(推荐·最干净):在 Supabase 里新建一个独立的项目/数据库给第二座站,三张表结构照搬(让法器把建表语句再跑一遍),contents 里录入新主题的 20 条内容。两座站各用各的数据库,永不串味
  • 做法 B(省事·共用一个库):继续用同一个 Supabase 库,但把旧的 contents 内容先清空、再录入新主题内容。省一个项目,但两座站不能同时上线展示(共用一份内容)。

让法器带你做(把【📜咒语卡 4·换内容咒】发给它,告诉它你选 A 还是 B)。

看到什么算成功:你打开第二座站的内容列表,里面全是新主题的条目,一条旧主题的内容都没有了;新主题至少录够了约 20 条。

📷 截图位:第二座站游客视角 · 只看到试读 · 会员内容上锁。
💡 强烈推荐做法 A:用独立数据库,是「换干净」最省心、最不会出错的方式,也最接近真做两个产品的样子。下面🆘的「旧数据没换干净」八成就是因为选了 B 又没清干净。

第六步 · 部署第二座站、拿到第二条在线链接

像第 1 课和第 14 课那样,把第二座站部署到新渡口(Cloudflare Pages),并按第 14 课教的,把环境变量(两把钥匙)填到线上平台——如果第五步你选了做法 A(新数据库),这里要填的是新数据库那两把钥匙,别填成旧的。

看到什么算成功:部署完成,你拿到一条和第一座站不同的新在线链接(形如 https://你的第二个项目名.pages.dev),手机打开能看到第二座站,主题是新的、不白屏。

📷 截图位:第二个新渡口项目 · 部署成功拿到第二条在线链接。
💡 打开是白屏? 99% 是环境变量没填或填错(填成旧库的钥匙了)——这正是第 14 课埋的「白屏=环境变量没填」那一课。回第 14 课的急救处对照,或看下方🆘。

第七步 · 用同一批激活码,在第二座站验证解锁

最后一步,验证「付费墙这套机制原封不动搬过来照样灵」:在第二座站注册一个新账号、登录、确认游客只看到试读;然后用你第 13 课造的同一批激活码(如果第五步选了 A 新数据库,记得让法器把激活码也录进新库一批),输入解锁,看会员内容是否出现。

看到什么算成功:在第二座站里,输入激活码后会员内容成功解锁出现,付费墙消失——和你第一座站的体验一模一样。这一刻你亲眼确认:同一套付费骨架,换个主题,又跑出了一座能收钱的站。

📷 截图位:用同一批激活码在第二座站解锁成功 · 会员内容出现。
🎉 可发朋友圈的截图:「同一套代码,换个主题,我又复刻出了第二座付费站。」——这就是「毕业即能复刻同款」最硬的证据。
🌿 分身既成,法门已握。你今日证得的,不是第二座洞府,而是「开宗」之能——往后每立一座,都只是这门法印的又一次拓印。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器的提示词。【方括号】 里的内容按提示替换成你自己的,其余原样发送。

【咒语卡 1 · 抽骨架咒】· 让法器把你这座站拆成「骨架」和「主题」两类

请只读不改地分析我当前这个项目(一个注册才能进、付费才能解锁的会员制网站)。 把它拆成几块拼图,用大白话列清楚,并把每一块明确标成两类之一: 1. 「骨架(复刻时不用动)」——每座同款站都一样的部分,比如登录、三张表结构、付费墙、激活码、RLS 策略、部署配置; 2. 「主题(复刻时要换)」——每座站不一样的部分,比如站点名、文案、contents 内容、配色封面、哪几条做试读。 只输出这张分类清单,先别改任何文件,也别写代码。

【咒语卡 2 · 复刻清单咒】· 让法器生成一张可照着勾的「换主题复刻清单」

基于你刚才分析出的骨架,帮我生成一张「换主题复刻清单」—— 假设我要用同一套骨架、换一个新主题【在此填你的新主题,例如:大学生面试题库】,再造一座同款付费站。 请输出一张带先后顺序、每一条都是一个具体可执行动作的待办清单(checklist), 覆盖:新建项目、改站名文案、换 contents 内容、重设哪几条试读、填环境变量、部署、用激活码验证解锁。 每条动作写成我照着做就能完成的人话,不要写代码细节。

【咒语卡 3 · 开分身咒】· 让法器基于现有代码、为新主题起一份项目副本

请基于我现在这套代码,为新主题【填你的新主题】复制出一份项目副本, 不要改动我原来那座已经上线的站,只在副本里: 1. 把站点名称、首页标语、页面标题改成新主题; 2. 其余骨架(登录、付费墙、激活码、表结构、RLS)原样保留。 改完用一句人话告诉我:你改了哪几个文件、我怎么在本地预览这份新副本、以及我原来的站有没有被动到。

【咒语卡 4 · 换内容咒】· 让法器带你把旧内容换成新主题内容(不串味)

我要给第二座站换上新主题【填你的新主题】的内容,我选的做法是【填 A 或 B】: - A = 给第二座站新建一个独立的 Supabase 数据库,三张表结构照搬,新库里录入新主题内容; - B = 继续共用同一个数据库,先把旧的 contents 内容清空,再录入新主题内容。 请按我选的做法,一步步带我操作(包括我该在 Supabase 后台点哪里), 确保换完之后第二座站里看不到任何一条旧主题的内容。 做完用一句人话告诉我:旧内容是否已彻底清掉、新内容录了多少条。

🆘 卡住了?(按你看到的现象找)

现象:第二座站打开,内容里冒出第一座站的旧条目(主题串味了)

先检查:你第五步是不是选了「做法 B(共用一个数据库)」,但旧的 contents 内容没清干净?或者第二座站填的环境变量(两把钥匙)还连着第一座站的旧数据库?
急救话术(照做):对法器说——「我刚做了什么:给第二座站换了新主题内容;我现在看到什么:第二座站列表里还有第一座站的旧条目;我希望它变成什么:第二座站只显示新主题内容,旧条目全部不出现。请帮我检查:(1) 第二座站连的是哪个数据库 (2) 旧的 contents 是否真的清空了,并带我修干净。」

现象:复刻后第二座站打开是一片空白 / 白屏

先检查:99% 是线上环境变量(两把钥匙)没填,或填成了旧数据库的钥匙。这正是第 14 课「部署成功但白屏=环境变量没填」那一课。
急救话术:回新渡口平台的环境变量设置页,确认填的是第二座站对应数据库那两把钥匙(绿钥匙=URL、绿钥匙=匿名公钥),保存后重新部署。还不行就把第 14 课的「红绿对照」再核一遍。

现象:法器把我原来那座线上站改坏了 / 改乱了

先检查:你是不是没让它「复制副本」,而是直接在原项目上动了主题?别慌,你第 4 课立的 git 存档就是干这个的。
急救话术:对法器说「回到上一个存档,把刚才对原项目的改动全部撤回,我原来那座线上站要恢复原样」。撤回后,重新用【咒语卡 3·开分身咒】,强调「不要改动原项目,只复制一份副本」。

现象:第二座站激活码输进去解锁不了

先检查:如果第五步你选了「做法 A(新数据库)」,新库里还没有任何激活码——第 13 课造的码在旧库里,没搬过来。
急救话术:对法器说「请把我第 13 课生成激活码的那段操作,在第二座站的新数据库里再跑一批,让我能在第二座站用激活码解锁」。共用库(做法 B)则不用搬,直接复用旧码即可。
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好发给法器,比你瞎描述管用十倍。

✅ 出关自查(全部勾上才算过这一关)

法器给我画了一张「项目骨架地图」,我能分清哪几块是骨架(复刻不用动)、哪几块是主题(复刻要换)
我把「换主题复刻清单」完整保存进了备忘录,以后做新站能照着用
我复刻出了第二座站,主题和第一座明显不同,且手机能打开、不白屏、不串味(看不到旧主题内容)
第二座站里用激活码成功解锁了会员内容,付费墙这套机制原封照搬照样灵
我原来那座线上站没有被改坏,到现在还正常活着

📦 本课锦囊(可带走 · 可分享)

你这一课赚到的,不只是站上又多了一座能收钱的复刻站——你还拿到了一件能反复用的东西:一张「换主题复刻清单」。以后做第 3、第 4 座站,帮朋友、接私单,照着它点一遍,就能把一套付费站套到下一个产品上。

  • 换主题复刻清单 — 一张「哪些要改、哪些不动」的分家表 + 五步复刻单(定主题 → 开副本 → 换内容 → 部署 → 验证)。文件:../takeaways/17-复刻清单.md怎么用:先看第一部分「骨架 vs 主题分家表」——眼睛只盯「🔁 要换」那一栏,「🔒 不动」那栏看都不用看;再从第二部分五步清单从上往下点,【方括号】 换成你第二座站的信息,每一步让法器带你做(咒语在本课「📜 咒语卡」里);复刻完照第三部分留个底,下一座站照着走几分钟立项。
💡 可分享:「同一套代码、换个主题,我又复刻出了第二座付费站——我手里现在有一套付费站复刻清单,照着点一遍就能再开一座。」——只讲方向、不含任何钥匙,放心晒。

🌱 加练(选做)+ 下一课

加练:把你那张「换主题复刻清单」精简成一段你自己看得懂的「复刻 SOP」,存进备忘录置顶——这是你毕业后做副业产品最值钱的随身工具。想再练手的,可以在脑子里走一遍第三座站会怎么搭,但别真去搭,留着精力出关。

下一课预告:两座站都立起来了,复刻的法门也握在手里了——筑基大圆满,只差最后一步:出关

下一课是筑基出关·开宗立派大典:当场验收你的真站(注册→付费墙→激活码解锁全流程跑一遍)、授筑基印、换内门袍、领出师帖,再给你递上金丹期的内门拜帖。

🔖 小提示:出关前,把你这一路的微里程碑截图(第一条链接、第一次登录、第一次解锁、第二座复刻站)都翻出来——大典上,它们就是你筑基一场的「真器」凭证。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
← 返回课程总览
🧭
你现在撞上的这堵墙,就是第 12 课你要亲手造的付费墙。前端遮罩你 F12 能看穿,真正拦你的是后端 RLS。
第 18 课

筑基出关 · 开宗立派大典

会员专属

# 第 18 课 · 筑基出关 · 开宗立派大典

课头

🪷 境界:筑基大圆满 · 受香火四层 · 阶段渡劫④ · 出关
预计用时:75 分钟
🏆 本课产出:跑完一场毕业大考(自查统计 + 渡劫闸门 + 端到端真验收),亲手验收你这座能注册、能存改、能拦人、能收钱解锁的真站;然后举行出师大典——授筑基朱印、印一张含你真实链接、可截图分享的筑基出师帖、把成品封存存最后一档。你从练气走到筑基的全程,今天画上句号。
🚫 今天不做:不加新功能、不动数据库结构、不上新代码(今天是验收 + 仪式 + 封存,不是开发——任何"再优化一下"的冲动,请留到金丹期)
📜 十七关已过,凡胎换真身。你脚下这座洞天,已能纳客、能藏珍、能立禁、能进香火。今日不再凿石、不再炼器——今日开关出洞。先以毕业大考三关验你真器:自查无虚、渡劫无亏、陌生人能从门外一路走到密室。三关皆绿,方授筑基朱印、换内门玄袍、印你一纸出师帖——帖上是你亲手起的山门,门外可贴于人前。受香火四层渡劫成,筑基出关。
📷 修炼笔记卷轴位(待补):洞门内灵光圆满 · 一方朱印悬于半空待落 · 内门玄袍自肩头垂下 · 一纸出师帖随灵光浮起,帖上一行真实链接闪着光 · 门外云海,远方金丹峰隐现。

这一课,你在干一件什么事

过去十七课,你从一个"只会用网页点鼠标做静态页"的小白,一步步把自己练气期那个静态站,养成了一座会呼吸的真站

  • 它能注册登录(第 6 课)、能存内容、能改能删(第 7–9 课);
  • 它有行级安全,游客看不到会员内容(第 10 课);
  • 它有会员分级和付费墙,凡客被拦在门外(第 11–12 课);
  • 它能收钱解锁,输一串激活码就成会员(第 13 课);
  • 连着 GitHub 仓库自动部署,改一行代码站就自动上线(第 14 课);
  • 它有真实用户、过了安全成本体检、还能一键复刻成模板(第 15–17 课)。

今天不再给它加任何东西。今天做三件事,按顺序来:

  • 毕业大考——三关验收(出关自查统计 → 四道渡劫闸门 → 端到端真验收),证明这座站不是纸上谈兵,是真的从门外一路走得通
  • 出师大典五幕——验收真器、授筑基朱印换内门玄袍、印筑基出师帖、立派复盘三句话、领金丹期内门拜帖;
  • 成品封存——让法器把这座站存最后一档,给整个筑基期画一个干净的句号。
💡 为什么毕业大考要这么"较真"地验一遍? 因为你接下来要拿这张出师帖去对人讲——发朋友圈、给客户看、甚至开始招会员。在那之前,你自己得先亲眼确认:陌生人真能从门外走到密室、真能付钱解锁。自己没验过的东西,别拿出去说。 今天这场考,就是让你底气十足。

主线步骤(跟着做,每步都有「看到什么算成功」)

第一步 · 毕业大考·第一关:清点你的「出关自查」战绩(≥15/18)

打开你这十七节课,把每一课结尾的 ✅ 出关自查 清单挨个翻一遍,数一数:有多少课的自查,你是全部勾上的?

不用全过。毕业线是 18 课里至少 15 课全勾上(≥ 15/18)。哪几课当时卡了没全过,没关系——你今天产品能跑通,比当时某一步的勾更重要。

做一张简单的清点表(写在备忘录里就行):

这一课的自查全勾上了吗
第 1 课(旧站新渡)
✅ / ❌
第 2 课(请器入炉)
✅ / ❌
……
……
第 18 课(本课,待会儿就过)
待最后勾
看到什么算成功:你数完一共有 ≥ 15 课是全勾上的。把这个数字(比如"16/18")写下来——这是你毕业大考的第一关战绩

📷 截图位:毕业大考第一关 · 出关自查统计(≥15/18 勾上)。
💡 少于 15 怎么办? 先别慌。看看没过的是哪几课——如果是产品功能相关的(比如登录、付费墙、收钱),回那一课的 🆘 急救区照着过一遍;如果只是选做加练没做,那不影响主线,把它当过。真正卡死在功能上的,用下面第三步的"端到端验收"兜底——只要陌生人能一路走通,说明核心其实是好的。

第二步 · 毕业大考·第二关:点亮四道渡劫闸门(≥3/4)

整个筑基期,你过了四道阶段渡劫(课名里带 ★ 的那几课)。每一道渡劫,都对应你产品的一块"真本事"。现在挨个确认,你的站当下还守得住这四关:

渡劫闸门
出自
验收动作(现在就去站上点一下)
守住了吗
闸门①·身份初成
第 6 课
用邮箱+密码注册一个新账号、再登出、再登录,进得去
✅ / ❌
闸门②·各守洞府
第 10 课
用一个没付费的账号看会员内容,看不到正文(被后端拦住,F12 也扒不出来)
✅ / ❌
闸门③·灵石入袋
第 13 课
用一串没用过的激活码,当场把一条会员内容解锁
✅ / ❌
闸门④·开宗出关
第 18 课(本课)
完成本课端到端验收 + 出师帖(下面第三、五步)
待最后点亮

四道里,至少点亮 3 道(≥ 3/4)就达标。前三道现在就能逐个点一遍;第四道是今天这堂课本身。

看到什么算成功:你在自己站上逐个动手验过前三道闸门,至少 3 道是绿的(实际上做到这儿,前三道大概率全绿)。把点亮情况记下来——这是毕业大考第二关战绩

📷 截图位:毕业大考第二关 · 四道渡劫闸门(≥3/4 点亮)。
💡 某道闸门点不亮(比如闸门③输码没反应)? 回对应那一课的 🆘 急救区——第 6/10/13 课的急救都给了"预设突破"通关路线,90% 的人 20 分钟内能过。今天能修就修,修不动也不影响出关——四道里守住 3 道就达标。
🌿 四道渡口令牌,三枚已在你掌中泛光。最后一枚,是今日大典亲手点亮——出关之印。

第三步 · 毕业大考·第三关:端到端真验收(陌生人能一路走通)⭐核心

这是毕业大考最硬的一关,也是整门课"核心承诺可被验证"的那一刻。 前面两关是清点战绩,这一关是当场跑一遍真实剧本:你要扮一个完全陌生的人,从门外一路走到密室,全程在线、全程真实。

严格按这个剧本走,一步都别跳。建议用手机浏览器无痕窗口(这样不会带着你已登录的身份,最像"陌生人第一次来"):

  • 公网打开:在手机/无痕窗口里,打开你的在线链接(第 14 课部署的真地址,或第 15 课配的真域名)——确认它公网真能打开,不是只有你本机能看。
  • 陌生账号注册:用一个没注册过的新邮箱,在站上注册一个全新账号。
  • 登录:注册完,用这个新账号登录进去。
  • 撞上付费墙:找一条会员专属is_free=false)的内容,确认你看不到正文——被付费墙拦住了。(这是闸门②在工作)
  • 输激活码解锁:把一串还没用过的激活码输进去,点解锁。
  • 看到会员内容:付费墙消失,刚才被挡的会员正文完整亮出来

这一条龙——注册 → 登录 → 撞墙 → 输码解锁 → 看到会员内容——就是设计里写死的"产品端到端验收"。它绿了,等于你这座站的整条商业闭环,对一个真实陌生人是通的

看到什么算成功:上面 6 步一气呵成、全程没卡死,最后那个新账号成功看到了会员内容。这一关绿灯,是毕业大考第三关战绩,也是点亮闸门④的硬条件

📷 截图位:毕业大考第三关 · 端到端验收(陌生账号注册→登录→撞墙→输码解锁全绿)。
💡 让法器陪你跑这一遍:打开 Codex,把咒语卡①【端到端验收陪跑咒】整段发给它。它会给你一份逐步勾选的验收清单,你每走一步在它那报一句结果,哪一步卡了它当场帮你定位。这一关有法器盯着,比你一个人闷头点稳得多。
💡 中途某一步卡住了? 太正常了——这是渡劫课,崩一下是预期剧情。对应现象去下面 🆘 急救区找;或者直接用报错三句话发给 Codex("我刚做了什么 / 现在看到什么 / 希望变成什么")。90% 的人在这一关哪怕卡住,也能在 20 分钟内走通——这是已验证的通关路线,不是你一个人的坎。
🌿 能把陌生人一路领到密室门前的,本就是少数人——走到这关、看着那条龙全绿的你,已经是其中之一。最后一步,出关之印,亲手落下。

第四步 · 确认「公网可访问」这块毕业基石

毕业标准里有一条硬性的:产品成功部署到公网可访问(平台免费子域名就算达成,不一定非要真域名)。第三步你已经在手机/无痕窗口打开过了——这一步只是正式把它记成一块毕业基石,并补一个"别人也能开"的确认。

把你的在线链接,发给一个朋友,让他用他自己的手机/网络打开看看。

看到什么算成功:你的链接,不在你电脑、不在你网络下,照样能被别人打开、能看到你的站首页(游客视角:能看到门和锁、能注册)。这证明它真的活在公网上,不是"只有我能看"的假上线。

📷 截图位:公网可访问 · 真域名/在线链接手机打开。
💡 朋友打开是一片白屏? 这是第 14 课讲过的经典现象——"部署成功但白屏 = 99% 是线上环境变量没填"。回第 14 课急救区,确认线上平台那一侧的环境变量(Supabase 的两把钥匙)填齐了。本机能开、别人白屏,几乎一定是这个。
💡 打开很慢 / 偶尔打不开? 如果你用的是 Supabase 免费层,项目 7 天没活动会自动暂停(第 14/15 课讲过)。去 Supabase 后台把项目"唤醒"一下(点进去操作一下即可),再让朋友重试。

第五步 · 出师大典·五幕(情绪拉满,一幕一幕来)

毕业大考三关全绿、公网可访问确认无误——绿灯亮齐,放行出关。 现在举行出师大典。这是仪式,慢慢来,一幕都别省。

#### 幕一 · 验收真器

你已经在前四步亲手验过了。此刻,最后看你的站一眼:它能注册、能登录、能存能改、能拦人、能收钱解锁、公网真能开。这不是教程里的截图,是你亲手造的、活在公网上的真器

🌿 器已成,灵已足。这一眼,是你与练气期那个静态小楼的告别礼。

#### 幕二 · 授筑基·开宗朱印 + 换内门玄袍

你过了筑基全程四阶——立地基、通经脉、凝金锋、受香火。从今天起,你不再是那个"怕代码、怕被割"的外门小白。

让法器为你落下筑基朱印、换上内门玄袍:把咒语卡②【开宗朱印咒】发给 Codex,它会为你的"我的洞府"个人中心页加一枚出关徽记(一行小小的成就标识,比如"筑基大圆满 · 已出关"),并在你的站上留下这个时刻。

看到什么算成功:你的"我的洞府"页面上,多了一枚出关徽记/成就标识——这是你这座站给你自己颁的毕业章。

📷 截图位:授筑基·开宗朱印 + 换内门玄袍(成就页)。
🌿 朱印落,玄袍加身。外门十四日、内门十八课,今日你立于自己的山门之下,是为开宗。

#### 幕三 · 印筑基出师帖(含你的真实链接 · 可截图分享)

这是大典的高潮。你要印一张筑基出师帖——一张能发出去、能让人点进来的成就卡,上面有:

  • 你给这座站起的山门名字(你的产品名);
  • 它的真实在线链接(手机点了真能打开);
  • 一行你的立派宣言(你这座站为谁而开、解锁什么);
  • 一个出师标识:"筑基大圆满 · 开宗立派"。

让法器帮你把这张帖做出来:把咒语卡③【出师帖咒】发给 Codex,它会在你站上生成一张可截图分享的出师帖页面(或一张分享卡片),把上面这些信息排好版。

看到什么算成功:你得到一张带你真实链接的出师帖——截图发出去,别人点链接真能进你的站。这张帖,是你筑基出关的正式凭证

📷 截图位:筑基出师帖(含你的真实链接 · 可截图分享)。

🎉 可发朋友圈的终极里程碑截图:把这张出师帖发出去——「我从零基础到亲手做出一座能注册、能收钱的真站,今天筑基出关。」这是阶段渡劫④的通关凭证,也是你整个筑基期最后一张、也是最响的一张可发圈截图。
🌿 帖出,山门立。门内是你十八课的造物,门外是要来的香火。一纸出师帖,半是凭证,半是请柬。

#### 幕四 · 立派复盘三句话

开宗之后,沉淀一下。用三句话给自己的筑基期收尾(写进备忘录,也建议发出去):

  • 我做出了什么:用一句话说清你这座站——「我做了一个让【谁】,注册后能看【什么】、付费解锁【什么】的会员站,现在它活在公网上。」
  • 我最大的突破是什么:哪一关你以为过不去、最后过了?(很多人是第 2 课装环境的黑窗、或第 10 课的 RLS、或第 13 课的收钱闭环)
  • 我接下来要拿它干什么:发给真人?开始招会员?还是换个主题再复刻一座(第 17 课的模板)?
看到什么算成功:你写下了这三句话。第二句尤其重要——记住你那个"以为过不去却过去了"的时刻,那是你筑基期真正的内功。

#### 幕五 · 金丹期内门拜帖 + 候补漏斗

出关不是终点,是另一座山的山脚。今天你做的这套,刻意没碰的那些——webhook 自动扣款、Edge Function 自动发码、商户号合规收款、防爆破限流、更复杂的会员体系——那是金丹期(进阶课)的天地

🌿 筑基已圆,金丹未凝。前方那座金丹峰上,你今日手动发的码会自动飞出,你今日演示态的收款会接上真正的商户渡口,你今日一人看管的洞天会有人替你守夜。那是后话——但门,今日已为你留。

金丹期内门拜帖:如果你想继续往上走,金丹期会带你把今天"演示态"的闭环,升级成"能真经营、能自动化、能扛量"的真产品。今天不必决定,先把出关这件事,好好庆祝完。 想了解后续,留意课程里的"金丹期候补"入口(你已经是内门弟子,候补优先)。

第六步 · 成品封存 · 法器存最后一档

仪式毕,封存成品。让法器把你这座站存最后一档(git 提交)——给整个筑基期一个干净、可回头的句号。

把咒语卡④【出关封存咒】发给 Codex,它会把你当前这个"已出关、能跑通全闭环"的版本存成一个档,并打上一个一眼能认出的标记(比如"筑基出关 · v1.0")。

看到什么算成功:法器回你一句人话——它已经把当前版本存好了档,并告诉你这个档叫什么(带"出关/v1.0"字样)。从此哪怕你将来折腾坏了,一句话就能回到"今天这个能出关的版本"。

📷 截图位:成品封存 · 法器存最后一档(出关存档)。
💡 Codex 干了啥(人话版):它把你站里现在所有的文件,照原样拍了一张"全家福快照"存进 GitHub,还贴了张标签写着"这是出关那天的样子"。以后你随便改,改乱了,一句"帮我回到出关那个档",它就能把这张全家福原样请回来。这是你筑基期最该留的一张存档。
🌿 档已封,洞天定。你这座造物,从此有了一个不会丢的"本来面目"。出关之礼,至此圆满。

📜 咒语卡

咒语 = 可以一字不改、整段发给法器(Codex)的提示词。带 [方括号] 的地方按提示替换成你自己的内容,其余原样发。

咒语卡① · 【端到端验收陪跑咒】让法器盯着你跑通全闭环

我在做毕业验收,要扮"陌生人"把我这个会员制网站的完整闭环走一遍,请你当我的验收陪跑。 我的站在线地址是:[把你的在线链接粘这里]。 请给我一份逐步勾选的验收清单,覆盖这条龙: 1. 用手机/无痕窗口打开在线链接(确认公网能开); 2. 用一个没注册过的新邮箱注册新账号; 3. 用新账号登录; 4. 打开一条会员专属内容,确认看不到正文(被付费墙拦住); 5. 输入一串没用过的激活码解锁; 6. 确认会员正文完整显示。 我会一步一步告诉你每一步看到了什么。 哪一步卡住了,你就根据我描述的现象帮我定位是哪一课的问题、怎么过。 先别假设我都成功了,等我逐步汇报。

咒语卡② · 【开宗朱印咒】给"我的洞府"加一枚出关徽记

我已经完成整门筑基课的毕业验收(注册/登录/付费墙/激活码解锁全部跑通)。 请在我的"我的洞府"个人中心页面,加一枚低调的出关成就标识,文案是: 「筑基大圆满 · 已出关 · [今天日期,如 2026-06-16]」。 只加这一行展示用的标识即可,不要改动任何登录、付费墙、数据库相关的逻辑。 改完告诉我改了哪个文件、加了什么,以及我怎么在页面上看到它。

咒语卡③ · 【出师帖咒】印一张含真实链接、可分享的出师帖

请在我的网站里加一个"筑基出师帖"页面(或一张可截图分享的成就卡片),内容包含: - 我的站名/产品名:[填你给这座站起的名字]; - 我的在线链接:[填你的真实在线链接]; - 一行立派宣言:「这是一个让[谁],注册后能看[什么]、付费解锁[什么]的会员站」; - 一行出师标识:「筑基大圆满 · 开宗立派 · [今天日期]」。 排版做成适合截图分享的卡片样式即可,不要改动站点其它功能。 改完告诉我这个页面的访问地址、以及我怎么截图它。

咒语卡④ · 【出关封存咒】把成品存最后一档

我的网站已经完成全部筑基课内容并通过毕业验收,现在要把当前版本存档封存。 请帮我把当前所有改动提交保存(git 提交),提交说明写成: 「筑基出关 v1.0:完成会员制内容站全闭环(注册/内容CRUD/RLS/付费墙/激活码解锁/上线),出关封存」。 存好之后,告诉我:① 这个档存成功了没;② 以后我想回到"出关这个版本",该对你说哪句话。
填空说明:[...] 里换成你自己的真实信息(链接、站名、宣言、日期),其余整段原样发给 Codex。

🆘 卡住了?(按你看到的现象找)

现象:端到端验收时,新邮箱注册收不到验证 / 注册不了

先检查:① 你的站是不是开了"邮箱验证"——如果是,验证邮件可能进了垃圾箱;② 换一个常见邮箱(比如 QQ 邮箱、163)再试,有些小众邮箱收信慢;③ 确认你登录方案是"邮箱+密码"主路(本课程默认),不是魔法链接。
急救话术(照做):先翻垃圾箱找验证邮件;找不到就换个邮箱重注册。还不行,把报错三句话发给 Codex:「我刚做了什么:用新邮箱注册。我现在看到什么:[填:没收到验证邮件 / 报错原文]。我希望它变成什么:能注册成功并登录。」

现象:端到端验收时,付费墙没拦住——没付费的新账号居然看得到会员正文

先检查:这说明后端读策略可能漏了——会员内容(is_free=false)本该只有 is_member=true 才读得到。可能是第 12 课的 RLS 读策略没真正生效,或者这条内容被误标成了 is_free=true
急救话术:先去后台确认这条内容的 is_free 确实是 false;若确实是 false 还能被游客看到,把报错三句话发给 Codex:「我刚做了什么:用没付费的新账号看一条 is_free=false 的内容。我现在看到什么:正文完整显示了、没被拦。我希望它变成什么:没付费就只能看到标题和试读、看不到正文。请检查 contents 的 RLS 读策略是不是 is_free OR is_member。」这是闸门②的核心,务必修到拦得住。

现象:输激活码解锁那一步失败(提示不存在/已用/过期)

先检查:这几个提示其实是闭环在正常工作——「不存在」八成是手抄错了(横杠要带、大小写要对);「已被使用」说明这串码你之前用过了(一次性);「已过期」说明超过 7 天了。
急救话术:去 Supabase → Table Editor → activation_codes直接复制一行 used_by 为空、expires_at 还没过的码,粘进去再试。没有可用的码了,就用第 13 课咒语卡③再生成一批新码。详细见第 13 课急救区。

现象:朋友打开你的链接是一片白屏(你本机却正常)

先检查:这是部署成功但白屏 = 99% 线上环境变量没填(第 14 课经典现象)。本机能开是因为本机 .env 填了,线上平台那一侧没填。
急救话术:去你的部署平台(Cloudflare/Vercel)的环境变量设置,确认 Supabase 的两把钥匙(项目地址 + anon key)在线上这一侧也填了,填完重新部署一次。详细见第 14 课急救区。
💬 万能急救 · 报错三句话(任何卡点都能用):把「我刚做了什么 / 我现在看到什么 / 我希望它变成什么」三句填好发给 Codex,比你瞎描述管用十倍。今天是验收日,别自己手改代码——你只负责描述现象,让法器去定位。

✅ 出关自查(全部勾上才算过这一关 · 也是闸门④的最后一块)

毕业大考第一关:我清点了 18 课的出关自查,至少 15 课是全勾上的(≥15/18)
毕业大考第二关:我逐个验过四道渡劫闸门,至少点亮 3 道(≥3/4,含本课闸门④)
毕业大考第三关:我扮陌生人,注册 → 登录 → 撞付费墙 → 输码解锁 → 看到会员内容,端到端一气走通(全绿)
公网可访问:我的链接在别人的手机/网络上也能打开看到首页(不是只有我能看)
出师帖 + 封存:我印出了含真实链接、可截图分享的筑基出师帖,并让法器把成品存了最后一档(出关 v1.0)
✅ 这五条全勾上,闸门④点亮,筑基出关达成。把本课也记进第一关的统计里——它是你第 18 个全勾上的自查。

🌿 别小看这一勾——十八课能一路勾到这里、把一座真站交付出关的,本就是少数人。你已经是其中之一。 哪怕中途某条卡过,急救区给的"预设突破"路线也早替你备好——你从来不是一个人在闯这一关。

📦 本课锦囊(可带走 · 可分享)

你这最后一课赚到的,不只是站上多了一枚出关徽记、一张存档——你还把这一路 18 课攒下的所有物料,封装成了一套属于你自己的、随身带得走的全栈模板库。换个主题,照着它复刻一遍,几天就能再起一座新站。

  • 筑基出师帖模板 — 一张含你真实链接、可截图分享的出师凭证(纯文字版 / 卡片排版版 / 朋友圈文案版,三选一)。文件:../takeaways/18-出师帖与锦囊袋.md(第一部分)。怎么用:挑一个版式,把里面的 【方括号】 换成你的山门名、立派宣言、真实链接,填空即用;填完自己先点一下链接确认能打开,再截图发出去。填的全是「方向 + 链接」,不含任何钥匙,放心晒。
  • 全套锦囊袋打包说明 — 把这一路攒的 18 件物料,整理成你的私人全栈模板库(含打包四步 + 18 件锦囊总目录 + 复刻新站最短路线)。文件:../takeaways/18-出师帖与锦囊袋.md(第二部分)。怎么用:照着「打包四步」勾一遍——清点收齐 → 放进项目跟着仓库走 → 让 AGENTS.md 家规指向模板库 → 连模板库一起存最后一档。全绿了,你就有了一套丢不了、随时能复刻的传家底。
💡 可分享:「🎉 我筑基出关了——零基础亲手做出一座能注册、能收钱的真站,现在活在公网上。链接点进去能注册、能免费试看👇【你的真实链接】」——配上你的出师帖截图一起发,这是你整个筑基期最后、也最响的一张可发圈凭证。

🌱 加练(选做)+ 你的下一程

加练一 · 把出师帖发出去:别只是截图存着。真发到朋友圈/小红书/给一个朋友——「我从零基础做出一座能注册能收钱的真站」。第一个陌生人因为你这张帖点进你的站,那一刻才是筑基真正圆满。

加练二 · 用模板再开一座山门:第 17 课你把这套付费墙抽成了可复用模板。趁手感还热,用它换个主题再复刻一座站(比如第一座做的是 AI 咒语库,这次做个考证刷题卡)。能复刻,才证明你学到的是"造站的能力",不是"抄了一个站"。

加练三 · 回头看一眼练气期的你:翻出你免费课做的那个静态小游戏/倒计时。从"只能看的死页面"到"能注册能收钱的真站"——这条路你十八课走完了。 截一张今昔对比,留给自己。

🪷 写在最后

你入门时怕代码、怕被割、怕那个黑窗。十八课走下来——黑窗你开过了,数据库你建过了,付费墙你立过了,钱你(在演示态里)收过了。你不再是那个只能看着别人做产品的人。你自己就是那个做产品的人。

整门课唯一真花的,是那 ¥30–80 的 AI 算力;其余大概率 0 元;课程一次买断 ¥199(占位)。没有套路、没有续费、没有"再加 999 解锁高阶"。 你花的每一分,都变成了你手上这座真站。

筑基出关。山门已立,香火将至。

🌿 金丹峰在云上等你——但今日,先在自己的山门下,受第一炷香。
此卷为会员心法 · 持渡口令牌可览全文
这部分是会员专属内容,解锁后查看完整教程。
📌
老实说:这层遮罩是前端做的,懂技术的人按 F12 就能看到被挡的文字。真正拦住非会员的,是后端的 RLS——这正是你在第 12 课要亲手造的东西。
道友,回宗了
用邮箱和密码登录。
登录
注册
忘记密码? 没有账号?去注册
持令过渡口
输入购买后收到的激活码,开通会员,解锁全部课程。
你已经是筑基会员了,无需再输激活码。
ZJ-
没有激活码?去购买 →
演示用激活码(仅原型):
有效 ZJ-8F3K-29MA-7TQ4 · 已用过 ZJ-USED-USED-USED · 已过期 ZJ-PAST-PAST-PAST · 不存在 随便输
咒语库 · 全栈法器版
可一字不改、整段发给法器的提示词。填空就发,剩下的法器替你干。

# 📜 咒语库 · 全栈法器版

咒语 = 可以一字不改、整段发给法器的提示词。 你不需要懂代码,只需要会挑对那条咒语、把 [方括号] 里换成你自己的东西、整段粘给法器。剩下的,法器替你干。

本库覆盖筑基全程会用到的所有「指挥动作」:从让法器接管你的项目,到部署、配法器、接数据库、写登录、建表、增删改查、上锁、付费墙、收款、存档回档、连仓上线、排错。每一条都标了对应课号——学到哪一课,翻到这一类即可。

怎么用这本咒语库(先读这 30 秒)

  • 按需取用:每条咒语标了「何时用」和「对应课号」。不是让你背,是让你用到时翻得到
  • 填空就发[方括号] 是唯一要你动手改的地方,换成你自己的主题/文件名/报错原文,其余一字不改,整段粘给法器。
  • Codex 为主:本库所有咒语默认发给 Codex(筑基期本命法器)。极个别需要 Claude Code 对照的,会单独标注。两者咒语通用——同一段话,发给谁都认。
  • 法器代管,你不写裸命令:你永远只对法器说人话,法器替你跑命令、改文件。它干完会用人话回你一句「我刚做了什么」——这就是你的「看得懂」透明层,看不懂可以忽略,但它一直在。
🌿 先看一眼:会写咒语 > 抄咒语
这本库给你成段的现成咒语,但它的真正用法不是让你抄——是让你看会「一句模糊话怎么改成法器一听就懂的话」。同一件事,话说清半分,法器多懂三成。

反例(模糊,法器只能猜):帮我做好看点
正例(具体,法器一听就懂):给登录按钮加 hover 高亮,保留现有字段和文案,别动页面其他区域

反例:优化代码
正例:登录页加载慢,帮我把图片改成懒加载,只改这一处

改的招数永远是同一个——「反例 → 正例」:先承认「这么说太模糊」,再换成「具体动作 + 具体对象 + 别动别的」。这套「改话术的手感」练熟了,你就不用到处求模板了。系统学一遍见锦囊:../takeaways/tishici-craft-ka.md

⚡ 头号铁律 · Plan-First 先谋后动(大改动前,先让法器出计划)

这是本库最该养成的习惯,放在所有咒语之前——大改动前,先让法器把方案讲给你听,你点头了它再动手。
为什么:法器一上来就埋头改十个文件,改崩了你既看不懂也回不去。逼它先出计划,你只需判断「这思路对不对」(你判断得了),而不是「这代码对不对」(你判断不了)。

【先谋后动咒】· 大改动前,先让法器出方案、你点头再动

何时用:任何一个你心里没底的大改动(接数据库、写登录、立付费墙、连仓上线…)动手之前,先发这条。

先别写代码。这次改动之前,先给我一份计划: 1. 你的假设是什么(你以为我的站现在是什么样、想改成什么样); 2. 你打算改/新建哪几个文件,各自动什么; 3. 你准备分几步做,每步做完我能看到什么变化; 4. 万一改坏了,我能不能一句话让你撤回。 我说「开始」你再动手。一次只做一步,改完先让我看到效果。
💡 这条和下面【全局问诊咒】是一对:先谋后动用在动手前出方案,全局问诊用在大改动当口再确认一次落点。养成「大改动 = 先要计划」的肌肉记忆,你这门课就稳了一半。

🔱 三条铁律(焊进每一条咒语)

这三句话,是本库每一条咒语的底色。很多咒语结尾都带着它们——不是啰嗦,是给你兜底

铁律一 · 小步改
一次只改一个地方,改完先让我看到效果,我说『继续』你再往下。
为什么:小白最大的灾难是法器一口气改十个文件、改崩了你不知道崩在哪。逼它小步走,改坏了一眼能看出是哪步。
铁律二 · 防编造
不确定就说不确定,不要编。需要我提供信息(报错原文/某个文件内容/某个网址)就直接问我,我去拿。
为什么:法器有时会「自信地胡说」——编一个不存在的按钮名、一个不存在的文件。这句话逼它没把握就停下来问你,而不是带你跑偏。
铁律三 · 交底优先
改完用 3 句大白话告诉我:你改了哪个文件、为什么改、我怎么自己验证它成了。先别讲原理。
为什么:这就是「看得懂」透明层。你不必懂代码,但你要知道它动了什么、怎么确认没坏。出事时,这三句话就是你排错的线索。
💡 懒人版:任何一条咒语,只要在结尾补一句「记住:小步改、不确定就问我、改完用人话给我交底」,三条铁律就齐了。

分类导航

#
分类
一句话
对应课
1
指挥法器接管项目
让法器认识你的站、读懂全局
第 2–3 课
2
旧站部署
把现成站搬上新渡口
第 1 课
3
cc-switch 配置
配大陆可付费的法器供应商
第 3 课
4
接 Supabase
接通数据库、连接红绿自检
第 5 课
5
写登录
邮箱密码注册登录 + 自动建档
第 6 课
6
建表
为产品造数据表
第 6–7 课
7
内容 CRUD
新增/读取/编辑/删除
第 8–9 课
8
写 RLS(行级安全)
给数据上锁、读权限门
第 10 课
9
做付费墙
免费/会员两重天 + 拦住凡客
第 11–12 课
10
支付闭环
收款码 + 激活码解锁
第 13 课
11
git 存档回档
渡劫回档、改坏一键复原
第 4 课(全程复用)
12
连仓部署
连 GitHub 仓自动上线
第 14 课
13
排错
任何卡点的万能起手式
全程

1️⃣ 指挥法器接管项目 · 对应第 2–3 课

你刚请到法器(第 2 课),它还不认识你的站。这一类咒语让它先读懂全局、再动手——避免它瞎改。

【认主咒】· 让法器认识你要做的站

何时用:第一次和法器对话(第 2–3 课),给它定调子。

我在学一门 AI 编程课,要做一个「注册才能进、付费才能解锁」的会员制网站。 我的主题是[在此填你第 1 课定的主题,例如:大学生宿舍辅食食谱]。 我是零基础小白,不懂代码,你要带我一步步做。 请用 3 句大白话告诉我: 1. 这个网站最核心的 3 个功能是什么; 2. 接下来你会怎么一步步帮我把它做出来; 3. 第一步我们先做什么。 先别写代码,只讲人话。记住:小步改、不确定就问我、改完用人话给我交底。
填空:[...] 换成你的主题,其余一字不改。

【接管咒】· 让法器接管你已有的项目文件夹

何时用:你已有一个项目文件夹(免费课的站/已搭起的站),想让法器在它基础上干活(第 3 课起)。

这是我的项目文件夹,我希望你接下来都在这个项目里工作。 请先做一件事:把这个项目的结构读一遍,用大白话告诉我—— 1. 这个项目现在有哪些主要文件,各自大概是干嘛的; 2. 它现在是个什么站(能做什么、不能做什么); 3. 有没有你觉得我该知道的、看起来不对劲的地方。 只读不改。读完等我下一步指令。记住:不确定就问我、用人话交底。

【全局问诊咒】· 改大动作前,先让法器讲清它要动哪儿

何时用:法器准备做一个你心里没底的大改动前,先让它交底再动手。

在你动手之前,先告诉我这次改动的全貌: 1. 你打算改/新建哪几个文件; 2. 改完之后,我在浏览器里会看到什么变化; 3. 万一改坏了,我能不能一句话让你撤回。 我确认 OK 了你再动手。一次只改这一件事,改完先让我看到效果。

2️⃣ 旧站部署 · 对应第 1 课

第 1 课是网页点鼠标部署(零命令行),不靠法器。这条留给你第 2 课请到法器之后,想让法器帮你确认部署是否正确时用。

【新渡定锚咒】· 让法器帮你确认部署是否成功

何时用:第 1 课用网页拖拽部署后,第 2 课请到法器,想让它帮你复核站点是否正常。

我已经把我的静态网站用网页拖拽方式部署到了 [Cloudflare Pages / Vercel], 拿到的在线链接是 [粘贴你的 .pages.dev 或 .vercel.app 链接]。 请帮我确认: 1. 这个链接打开后,显示的是不是一个正常的网页(没有 404、没有白屏); 2. 如果有问题,用大白话告诉我可能是哪里没传对、我该怎么在网页后台重传。 先别改我本地任何文件,只帮我判断线上这个链接对不对。

【自选主题套用咒】· 把现成静态站换成你的主题外壳

何时用:第 1 课定好主题后,想让法器把免费课那个站的文案/配色,换成你会员站的主题(先做静态外壳,真内容后面再填)。

我有一个免费课做好的静态网站,现在要把它改造成我会员站的「主题外壳」。 我的主题是[在此填主题,例如:大学生宿舍辅食食谱];我想要的风格是[一句话,例如:温暖、亲切、像朋友推荐]。 请帮我: 1. 把现有页面的标题、首屏文案、几个示例内容,换成贴合我主题的文字(先用占位内容,真内容我后面再填); 2. 配色/字体按我说的风格小调一下,别大动结构; 3. 一次只改一处,改完让我在浏览器里看到效果,我说"继续"你再往下。 改完用人话告诉我:你动了哪几个文件、我怎么把它跑起来看。
💡 这一步只换"外壳文字和风格",数据库/登录/付费都还没上——是第 1 课"旧站新渡"的轻量起手,别让法器在这一步就接数据库。

【旧站体检咒】· 部署前让法器把现成站查一遍

何时用:第 1 课部署前,想让法器确认现成站能不能直接上线、有没有明显问题。

这是我免费课做好的静态网站文件夹,我准备把它部署上线。 请先只读不改,帮我体检: 1. 它是不是一个能直接部署的纯静态站(有没有需要先"构建/打包"的步骤); 2. 有没有明显打不开、引用丢失、图片裂掉的地方; 3. 如果要部署到 Cloudflare Pages / Vercel,有没有我该提前知道的注意点。 只读不改,体检完用人话给我一份"能不能直接上、要不要先改"的结论。

3️⃣ cc-switch 配置 · 对应第 3 课

cc-switch 是一个图形界面桌面小工具(系统托盘右键就能切),作用是把 Codex 连到哪个供应商——比如大陆能用人民币付费的中转供应商。它不创造任何命令,你毕业后改个配置照样能用,没有任何锁定。下面这条主要让法器帮你检查配好没、设好封顶没

【灵石封顶咒】· 让法器帮你确认中转配置与防超支

何时用:第 3 课用 cc-switch 配好供应商后,想确认法器真的连上了、且不会超支。

我刚用 cc-switch 这个图形工具,把我的 Codex 配置切到了一个国内中转供应商。 请帮我用大白话确认两件事: 1. 你现在是不是正常能干活了(我们随便做个小测试,比如让你读一下我的项目); 2. 我担心花超钱——请告诉我,在中转供应商的后台,我一般在哪里能设「用量上限/封顶」或「只充小额」,这样我不会一觉醒来欠一堆钱。 只讲操作步骤和注意事项,先别改我的项目。
💡 这条咒语既验证「法器通了」,又把防超支封顶当场落实——对应 §7.1 灵石台账。

【门槛体检咒】· 配之前先确认前置都就位

何时用:第 3 课配 cc-switch 前,想让法器帮你确认前置(Node/Codex 装好了、cc-switch 打开了、手上备齐了配置信息)都 OK。

我准备用 cc-switch 配中转供应商。在配之前,请帮我确认前置条件都就位: 1. Node 和 Codex CLI 是不是都装好了(怎么快速验一下,比如打哪个命令出版本号); 2. cc-switch 这个桌面工具我装好/打开了没,系统托盘那个图标在哪; 3. 配的时候我手上需要先准备哪几样东西(供应商网址、API Key 之类)。 用大白话给我列一张"开始前的备货清单",我对着备齐了再动手。

【备用法器咒】· 顺手配一条 Claude Code 作备用

何时用:第 3 课配好 Codex 主法器后,想再配一条 Claude Code 作备用(Codex 卡住时换它对照)。

我已经用 cc-switch 把 Codex 配好、能正常干活了。现在我想再顺手配一条 Claude Code 作备用, 这样万一 Codex 哪天卡住,我能换它对照试试。 请用大白话带我: 1. 在 cc-switch 里给 Claude Code 配上同一个(或另一个)中转供应商; 2. 配完做个最小测试,确认它也能正常读我的项目; 3. 告诉我以后想换用哪个,在 cc-switch 里怎么一键切。 我零基础,一步步来,先别改我的项目。
💡 Codex 为主、Claude Code 为辅。两者咒语通用——本库任何一条,发给谁都认。备用法器不是必须,但配一条心里更稳。

4️⃣ 接 Supabase · 对应第 5 课

Supabase 是你站的「后端大脑」:存数据、管登录都靠它。第 5 课你会拿到两把钥匙(一把公开、一把私密),接进你的站。

【开户接脉咒】· 让法器把站接上 Supabase

何时用:第 5 课,你已在 Supabase 注册建好项目、拿到两把钥匙,要把它接进站里。

我注册好了 Supabase 项目。我要把我的网站连上它。 我现在手上有两个东西(我等下会贴给你,或告诉你它们在哪): - 一个项目网址(Project URL); - 一个公开的 anon key(可以放在前端的那把"绿钥匙")。 请带我一步步把它们配好: 1. 告诉我这两个东西分别该放进哪个文件、放在哪一行; 2. 帮我建一个 .env 文件存这些配置,并告诉我为什么不能把私密的 key 写进会上传的代码里; 3. 配完后,给我一个最简单的办法,在网页上验证"我的站真的连上 Supabase 了"。 一次只做一步,每步做完让我看到效果再继续。改完用人话告诉我你改了哪个文件。
⚠️ 两把钥匙红绿对照:anon(绿钥匙)可以放前端;service_role(红钥匙)是最高权限,绝不能放进会上传的代码或前端。这条咒语已经替你把这点焊进去了。

【连接自检咒】· 让法器做一个"连上了吗"自检页

何时用:接好 Supabase 后,想要一个能一眼看出"连通/没连通"的可视化页面(第 5 课微里程碑)。

帮我在我的站里做一个最简单的自检页面: 打开它,如果成功连上了 Supabase,就在页面上用绿色显示一句"已接通灵脉"; 如果没连上,就用红色显示"未接通"并把错误原因打出来。 这个页面只给我自己调试用,做得越简单越好。做完告诉我怎么打开它。

【读第一条数据咒】· 让网页显示云端一句话(第 5 课微里程碑)

何时用:第 5 课接好 Supabase 后,想做"网页真的显示出云端第一条数据"这个微里程碑。

我的站已经连上 Supabase 了。现在我想做第 5 课那个微里程碑:让网页真的显示出一条来自云端的数据。 请帮我: 1. 在 Supabase 后台建一张最简单的测试表(比如就一列文字),放一句话进去(比如"灵脉已通"); 2. 让我的网页打开时,从云端把这句话读出来、显示在页面上; 3. 改完告诉我怎么验证"这句话确实是从云端读来的,不是写死在网页里的"(比如去后台把它改一个字,刷新网页应该跟着变)。 一步步来,这是我第一次让站读云端数据,小步走、改完让我看到效果。
💡 这条做出来的就是"网页显示云端一句话"那张可发圈截图。它也顺手验证了 §7.3 的 env 双轨地基——钥匙读对了,数据才出得来。

5️⃣ 写登录 · 对应第 6 课

第 6 课是第一道渡劫(★),也是第一座大里程碑——能注册、能登录的真站。登录主路是邮箱 + 密码

【立身证道咒】· 让法器加上邮箱密码注册登录

何时用:第 6 课,给站加注册/登录功能。

请给我的网站加上"邮箱 + 密码"的注册和登录功能,用的是 Supabase 自带的 Auth。 我要的效果: 1. 访客能用邮箱+密码注册一个账号; 2. 注册过的人能登录; 3. 登录后页面能显示"你好,[用户邮箱]",并有一个退出登录的按钮。 请一步步来,先做注册,做完让我亲手注册一个测试账号看到效果,我说"继续"你再做登录。 改完每一步都用大白话告诉我:你改了哪个文件、我怎么验证它成了。

【自动建档咒】· 注册即自动在名册里建一行

何时用:第 6 课,登录做完后,让每个新注册用户自动在 profiles 名册表里建好档案。

现在我要让每个新注册的用户,自动在数据库的 profiles 表里建好一行档案 (这样以后才能记录他是不是付费会员)。 请帮我: 1. 建一个 profiles 表,每个用户一行,和登录账号一一对应,先包含:用户 id、邮箱、昵称、注册时间; 2. 设置成"有人注册,就自动在 profiles 里建好对应的一行"(用数据库触发器),不用我手动加; 3. 让我注册一个新测试账号,然后带我去 Supabase 后台看到那一行真的自动出现了。 这是关键一步,务必小步来,建表和触发器分两步做,每步做完我验证了再继续。
📌 口径备忘:此时 profiles 还没有 is_member 字段——付费开关第 11 课才加。这一课只立"名册"。

【会话讲透咒】· 验证"关掉浏览器还认得你"

何时用:第 6 课登录做完,想确认"会话"正常(关浏览器重开仍在登录),并让法器用人话讲透它。

我的站登录功能做好了。请帮我确认"会话"工作正常,并用一句人话给我讲它是怎么回事: 1. 我登录后,关掉整个浏览器再重开、重新打开我的站,应该还认得我、还显示着登录状态——带我验证这一点; 2. 我点"退出登录"后刷新,应该回到"请登录"状态; 3. 用一句人话告诉我:为什么关了浏览器还认得我(登录凭证存哪了),不用讲底层原理。 带我把上面两个动作各做一遍,确认会话真的在工作。
💡 "一进一出"(关浏览器重开还在 + 登出后回到请登录)都验过,才算登录真做成了——这就是里程碑①的验收动作。

6️⃣ 建表 · 对应第 6–7 课

第 7 课为你的产品造核心内容表 contents(藏经阁)。它是平台内容:由你(站主)发布,所有访客/会员来读——不是每人发自己的那种 UGC。

【藏经立库咒】· 建 contents 内容表

何时用:第 7 课,为你的会员站建放内容的表。

我要为我的会员站建一张放内容的表,叫 contents,这是平台内容 (也就是:只有我这个站主能往里加内容,所有用户来读,不是每个用户发自己的)。 请帮我建这张表,每条内容包含: - 标题(title,访客也能看到); - 简介/试读(summary,免费给所有人看的一小段); - 正文(body,完整内容); - 封面图地址(cover); - 是否免费(is_free,先全部设成 true,以后再分); - 排序(sort_order); - 创建者(created_by,自动记成我这个站主的 id); - 创建时间(created_at)。 建完先别加任何安全规则,我们下一步再上锁。建完带我去后台看到这张空表。
📌 口径备忘:is_free 此时全设 true、暂不投用——第 11 课才真正分免费/会员;created_by 现在就记好站主身份,为第 10 课写权限锁打底。

【schema 交底咒】· 建完表让法器把表结构回写进家规

何时用:第 6/7/11 课每建一张表 / 加一个字段后,让法器把最新表结构原样回写进 AGENTS.md(交底优先铁律落地)。

我刚建好/改好了一张表([填表名,例如:contents])。请你做两件事: 1. 把这张表现在"实际有哪些列、每列什么意思"用大白话整理一份, 原样回贴给我看一眼(这是交底),并写进我项目 AGENTS.md 家规的"数据库"那一段; 2. 从现在起,你给我写任何碰这张表的代码,都要先以这份表结构为准,绝不自己猜列名。 整理好回贴给我,其余文件别动。
💡 这条把"交底优先"铁律落到实处——每建一张表就回写一次家规,法器和你永远看同一张图纸,后面写 CRUD、写 RLS 才不会列名对不上。

【加字段咒】· 给已有的表安全加一列

何时用:第 11 课给 profiles 加 is_member,或任何时候要给已有表加列。

我要给已有的表 [填表名] 加一列:[填列名和用途,例如:is_member,记录是不是付费会员]。 请帮我: 1. 用"加列"的方式安全地加上去(不要重建表、不要动现有数据), 有合适的默认值就设好(比如 is_member 默认 false,member_since 可空); 2. 加完带我去 Supabase 后台看到这一列出现了、现有的行都填了默认值; 3. 把这张表最新的结构回写进 AGENTS.md 家规(交底)。 小步来,加完让我验证。
📌 口径备忘:is_member 默认 false(刚加时全站都还不是会员);加完别忘了第 12 课才把它接进读策略。

7️⃣ 内容 CRUD · 对应第 8–9 课

CRUD = 增(Create)、读(Read)、改(Update)、删(Delete)。第 8 课做"增+读",第 9 课做"改+删",把内容管理闭环。

【落子成形咒】· 站主新增内容 + 列表读取(C/R)

何时用:第 8 课,让你(站主)能往站里加内容,并在页面上列出来。

现在我要能往 contents 表里加内容,并在网页上看到它们。请分两步: 第一步(新增 C):做一个简单的表单,让我登录后能填标题、简介、正文, 点保存就存进 contents 表。做完我亲手加一条看到效果,我说"继续"再做第二步。 第二步(读取 R):在网站首页把 contents 里的内容列出来(显示标题和简介), 刷新页面后内容还在(因为存在数据库里了)。 每步做完用大白话告诉我:你改了哪个文件、我怎么验证。

【改易由心咒】· 编辑与删除(U/D)

何时用:第 9 课,补上"改"和"删",CRUD 闭环。

现在给我的内容列表补上"编辑"和"删除"两个功能,凑齐增删改查: 1. 每条内容旁边有"编辑"按钮,点了能改标题/简介/正文并保存; 2. 每条内容旁边有"删除"按钮,点了(确认一下后)能删掉这条。 先做编辑,做完我改一条试试;我说"继续"再做删除。 做完提醒我一句:现在这些内容还没上安全锁,任何人理论上都能改——下一课我们会上锁。
⚠️ 结尾埋雷:这条咒语故意让法器提醒你"还没上锁"——这是第 10 课 RLS 渡劫的引子,别忽略。

【刷新还在验证咒】· 确认内容真存进了云端(埋雷验收)

何时用:第 8 课新增内容后,验证"刷新页面内容还在"——证明真存进了数据库,不是屏幕假象。

我刚往站里加了一条内容,页面上也显示出来了。请帮我做一个关键验证: 1. 让我按 F5 刷新整个页面,确认刚加的那条内容还在(没消失); 2. 用一句人话告诉我:刷新后还在 = 真存进了云端数据库;一刷新就没 = 只显示在屏幕上、没真存进去(那是要修的)。 如果是后者,带我查为什么没存进去,先别改别的。
💡 "刷新还在"是 CRUD 这一阶最该养成的验收习惯——它把"看起来成了"和"真的成了"区分开,后面每加一个功能都该这样验一下。

8️⃣ 写 RLS(行级安全) · 对应第 10 课

第 10 课是第二道渡劫(★)和第二座大里程碑。RLS = 给数据库上锁:谁能读、谁能改,数据库自己说了算。本课的口径是读门——免费内容人人可读,非免费内容暂时挡住所有人(因为 is_member 付费开关第 11 课才加)。

【各守洞府咒】· 给 profiles + contents 上 RLS 锁

何时用:第 10 课,给名册和藏经阁上行级安全锁。

现在给我的数据库上"行级安全(RLS)"锁,分两块,务必一块一块来: 第一块 · profiles 名册(各管各的): 每个登录用户只能读取和修改自己那一行档案,别人的看不了也改不了。 第二块 · contents 藏经阁(读权限门): - 写:只有我这个站主(created_by 是我)能新增/修改/删除内容; - 读:is_free = true 的内容,任何人(包括没登录的游客)都能读; is_free = false 的内容,现在先一律挡住、谁都读不到 (因为"付费会员"这个开关我们下一课才加,这一课先把门立起来)。 每上完一块,带我用"游客 vs 登录用户"分别测一下,确认锁真的生效了再继续。 这是关键渡劫步骤,小步来,改完用人话交底。
📌 口径备忘(重要,别让法器搞混):第 10 课的读门是 is_free 可读 / 非 free 暂挡,此时还没有 is_member。第 11 课才加 is_member,第 12 课把读策略统一为 is_free OR is_member——那是这一课读门的自然扩展,不是推翻重写

【游客会员互验咒】· 验证 RLS 锁真的拦住了

何时用:第 10 课上完锁,要亲眼确认"游客读不到非免费内容"。

帮我设计一个最简单的验证: 1. 用没登录的游客身份,确认我能看到 is_free 的内容,但看不到非免费内容; 2. 用我自己登录的身份,确认我能正常管理我的内容。 把每一步"该看到什么"清楚告诉我,我照着点一遍,确认锁生效。 如果哪里没拦住,说明锁漏了,带我修。

【门禁交底咒】· 让法器把整套 RLS 策略回写存档

何时用:第 10 课配完 RLS 后,把这套门禁规则原样整理回贴、更新进 AGENTS.md(交底优先)。

我刚给 profiles 和 contents 配好了 RLS 策略。请你: 1. 用大白话把现在的门禁规则逐条整理(哪张表、读/改/增/删各自什么规矩、用 auth.uid() 怎么认人), 原样回贴给我看一眼,并写进 AGENTS.md 家规的"数据库"那一段; 2. 补一句口径:is_free=false 的非免费内容现在连会员都看不到,因为 is_member 字段第 11 课才加, 第 12 课会把读策略扩成"is_free OR 会员可读"; 3. 从今往后你改任何策略,都以这份说明为准,绝不自己猜。 整理好回贴,其余文件别动。
💡 这是 RLS 渡劫最值钱的收尾:法器从此一读家规就知道两张表上了什么锁,第 12 课扩付费墙时不会改乱、不会瞎编。

9️⃣ 做付费墙 · 对应第 11–12 课

第 11 课加付费开关(is_member),第 12 课立付费墙(前端遮罩 + 后端 RLS 真拦截)。后端这一步才是付费墙的"真身"——前端遮罩任何人按 F12 都能绕过,真正拦人靠后端 RLS

【定品分阶咒】· 给名册加付费会员开关(is_member)

何时用:第 11 课,给 profiles 加 is_member 字段,并让 is_free 正式投入使用。

现在给用户分"免费用户"和"付费会员"两档(只要这两档,不做月卡年卡多等级)。 请帮我: 1. 在 profiles 名册表里加一个字段 is_member(是否会员,默认 false), 再加一个 member_since(成为会员的时间); 2. 把 contents 表里的 is_free 字段正式用起来:我能把某些内容标成"免费试读", 其余默认是"会员专属"。 先加字段,做完带我去后台看到 is_member 列出现了(默认都是 false); 我说"继续",再带我把几条内容标成免费试读。

【设墙立禁咒】· 立付费墙(前端遮罩 + 后端 RLS 真拦截)

何时用:第 12 课,把"非会员看不到会员内容"做成真正的墙。

现在立"付费墙",分两层,务必都做,缺一层墙就是假的: 第一层 · 前端遮罩(给人看的): 非会员浏览"会员专属"内容时,正文用渐隐遮罩盖住,显示一张"解锁提示卡"。 第二层 · 后端 RLS(真正拦人的): 把 contents 的读取规则统一成—— "is_free = true 的内容任何人可读,或者 当前用户 is_member = true 才能读非免费内容"。 这样就算有人按 F12 绕过前端遮罩,数据库也不会把会员正文发给非会员。 请先做后端 RLS(真拦截),做完用游客账号验证"非会员拿不到会员正文"; 我说"继续"再做前端遮罩。改完用人话交底。
📌 口径备忘:第 12 课的读策略 is_free OR (当前用户 is_member) 是第 10 课读门的自然扩展——第 10 课立门挡住非 free,第 11 课加了 is_member 这把钥匙,第 12 课把钥匙接进门。不是冲突,是接力

⚠️ 诚实提醒:前端遮罩任何人 F12 可见,真正的拦截靠后端 RLS——这正是第 12 课存在的意义,别只做遮罩。

【meta 自证咒】· 给付费墙加一句"课程站同款"自证横幅

何时用:第 12 课付费墙做好后,想加 §9.1 的 meta 自证带(强化"你正在用的课程站就是同款实现")。

我的付费墙做好了。我想在付费墙的遮罩卡上,加一句诚实的自证小字,强化"这套付费墙是真的、和课程站同款"。 请帮我在解锁提示卡上加这样一段(文字可微调): "你现在看到的这道试读墙,和你正在学习的这个课程站是同一套实现—— 前端这层遮罩任何人按 F12 都能看穿,真正拦住你的是后端的行级安全(RLS)。这正是上一课的意义。" 只改这张卡的文案,别动任何拦截逻辑。改完让我看到效果。
💡 这是 spec 三处 meta 自证带之一(另两处在第 13 课"你刚输的激活码就是本课要教的闭环"、"我的洞府"标注 is_member)。诚实+自证,是本课最强的信任钩子。

🔟 支付闭环 · 对应第 13 课

第 13 课是第三道渡劫(★)和第三座大里程碑。支付走演示态最小闭环:收款码占位 + 激活码解锁。全链路在你自己数据库内,不碰 webhook / 自动扣款 / Edge Function(那是金丹期)。
🚩 合规红线(第 13 课第一步必读,务必先看):个人收款码做经营性收款在大陆可能被风控冻结,本课的收款码仅限你自己自测演示,不是让你真去对外收钱经营。正式经营要走合规商业通道。这是"准入公平的设计选择"——任何人无需营业执照就能跑通一个完整运转的商业闭环(注册→解锁→支付验证→权限激活全真实),把支付这一环做成演示态,是为了让你合法地学完全程。

【渡口令牌咒】· 建激活码表 + 解锁逻辑

何时用:第 13 课,做"输激活码→变会员"的最小支付闭环。

我要做一个"演示用"的最小支付闭环(我清楚这只用于自测、不对外经营收款)。 请帮我: 1. 建一张 activation_codes 表(渡口令牌),每个码包含: - code(形如 ZJ-XXXX-XXXX-XXXX 的激活码,去掉容易看错的 0/O/1/I/L); - used_by(谁用了,用了就作废)、used_at(用的时间); - expires_at(默认 7 天后过期,防止激活前被转卖); - batch(批次)、created_at。 2. 做一个"输入激活码"的输入框:用户输入有效的、没用过、没过期的码, 就把他 profiles 里的 is_member 翻成 true(变成会员),付费墙对他消失。 解锁逻辑务必放在一个 security definer 的数据库函数里(用户只能"递码",不能直接碰表)。 3. 关键:再补一道"列锁"防绕过——Supabase 默认允许用户改自己那行 profiles(改昵称), 而 RLS 管不到"列",会导致用户自己 update is_member=true 白嫖会员。请收回 authenticated 对 profiles 的整表 update 权、只 grant update(nickname),让 is_member 只有上面那个函数能翻。 4. 帮我先生成几个测试激活码,让我亲手输一个,验证"输完我就变会员、能看会员内容了"; 再用非会员账号在 F12 控制台试着直接改 is_member,确认改不动(列锁生效)。 务必小步:先建表、再做解锁逻辑(含列锁)、再测。每步做完用人话交底。
📌 口径备忘(别漏列锁):redeem 函数是"正门",列锁是"堵翻墙洞"——两个都做付费墙才是真的。RLS 只按行放行、管不到列,光有"本人可改自己那行"会让用户改到 is_member。详见第 13 课锦囊「第三段·配套」。

【收款占位咒】· 放一张收款码占位 + 准入公平文案

何时用:第 13 课,在解锁页放收款码占位与正向说明。

在"解锁会员"页面上,帮我放一个收款码占位区(我之后会换成自己的收款码), 旁边用一段诚实又正面的文案说明: "本产品的注册→解锁→支付验证→权限激活是完整真实运转的; 支付环节用收款码而非商业支付接口,是为了让任何人无需营业执照 也能跑通完整商业闭环——这是准入公平的设计选择。" 只做这个页面的展示部分,不要碰任何自动扣款/回调逻辑。

【退款作废咒】· 关掉某人会员 + 作废激活码(运营动作)

何时用:第 13 课之后,要给某用户退款 / 关掉会员(spec §9.1 退款=is_member 翻 false + 令牌作废)。

我要给一个用户退款,把他的会员关掉。请帮我: 1. 把这个用户(我会告诉你他的邮箱或 id)的 profiles.is_member 翻回 false; 2. 把他用掉的那张激活码作废 / 记一笔这次退款; 3. 带我验证:他现在再打开站,应该又看不到会员内容了(回到非会员)。 改数据前先告诉我你要动哪一行,我确认了你再改。一步步来。
💡 一次买断的反面就是退款。is_member 这一个布尔开关,正着翻是"解锁",反着翻是"退款"——同一道门,两个方向。

1️⃣1️⃣ git 存档回档 · 对应第 4 课(全程复用)

第 4 课立 git 渡劫回档:每过一道大关让法器"存个档",改坏了一句话回到上一个境界。git 全程由法器代管,你不写裸命令。本课不教分支/合并/PR/冲突。

【立档存真咒】· 第一次把项目交给 git 看管

何时用:第 4 课,第一次给项目立档。

我要给我的项目立"存档点",这样以后改坏了能一键回到之前的好状态。 我是零基础,所有 git 命令请你替我跑,我只说人话。 请帮我: 1. 把当前这个项目初始化成一个 git 仓库,并存下第一个存档点(写好说明,比如"初始可用版本"); 2. 用大白话告诉我:这个"存档点"到底存了什么、存在哪里; 3. 顺便把它连到我 GitHub 上的一个仓库(私有就行),把这次存档也推上去备份。 每一步你替我跑命令,跑完用人话告诉我成了没。不用教我命令原理。

【渡劫存档咒】· 每过一关顺手存个档

何时用:任何一道大关/渡劫做完,趁着是好状态,存一个档(第 4 课起全程复用)。

我刚把[这一关做了什么,比如:登录功能 / RLS 上锁 / 付费墙]做好了,现在是个好状态。 请帮我存一个档,说明写清楚是哪一关(比如"第 6 课:登录跑通"),并推一份到 GitHub 备份。 存完用一句话告诉我:现在万一改坏了,我说什么你就能把我带回这个点。

【一键回档咒】· 改坏了,回到上一个好状态

何时用:改崩了、白屏了、越改越乱,想退回上一个能用的存档点。

糟了,我们刚才的改动把站改坏了,我想回到上一个好的存档点。 请帮我: 1. 先告诉我最近几个存档点分别是什么(哪一关存的),让我挑一个肯定能用的; 2. 把项目恢复到我挑的那个存档点; 3. 恢复完让我刷新页面,确认站又正常了。 这一步请你格外小心、一步一确认,别把我还想要的东西也弄丢了。
💡 这套"立档→渡劫存档→一键回档"就是你的渡劫回档安全网。第 4 课会带你故意改坏→一键回档→复原演练一遍,让你亲眼看见"改坏不可怕"。

1️⃣2️⃣ 连仓部署 · 对应第 14 课

第 14 课把站从"网页拖拽静态占位"升级成连 GitHub 仓自动上线的全栈真身。这一课也兑现 env 双轨:本地 .env 和线上平台是两处同一套秘密——线上没填,部署成功也会白屏。

【雷动真渡咒】· 连 GitHub 仓自动部署

何时用:第 14 课,把全栈站连仓自动上线。

现在把我的站正式上线:从我 GitHub 仓库自动部署到 [Cloudflare Pages / Vercel], 以后我一更新代码、它就自动重新上线。 请带我一步步: 1. 在部署平台连上我的 GitHub 仓库,设置好自动部署; 2. 重点提醒我:我本地 .env 里的那些密钥(Supabase 网址、anon key 等), 线上平台需要我"再填一遍"——告诉我具体在平台哪个页面填、填哪几个; 3. 部署完打开线上链接,如果白屏,先带我检查是不是线上环境变量没填全 (你说过"部署成功但白屏,99% 是环境变量没填")。 一步一确认。改完用人话交底。

【传家底单咒】· 做一份 .env.example 防漏填

何时用:第 5 课埋、第 14 课兑现——做一份"该填哪些密钥"的清单模板。

帮我做一份 .env.example 文件,当作"传家底单": 把我的项目需要哪些环境变量(密钥)都列出来,但只写名字、不写真实的值 (真实值留在我自己的 .env 里,绝不上传)。 这样以后无论是我换电脑,还是去线上平台填,照着这张单子就知道"该填哪几样、一样都不能漏"。 做完告诉我这份单子里现在列了哪几样。

【上线白名单咒】· 部署后补 Auth 重定向白名单 / CORS

何时用:第 14 课上线后,登录/注册在线上失灵,多半是白名单没配。

我的站已经部署到线上了,但[注册/登录]在线上不正常。 我猜可能是 Supabase 那边还不认我这个新的线上网址。 请带我检查并配置: 1. 在 Supabase 的 Auth 设置里,把我的线上网址加进"允许的重定向地址/白名单"; 2. 检查跨域(CORS)相关设置有没有挡住我的线上域名。 告诉我具体在哪个页面改、加哪个网址。改完让我在线上重试注册/登录确认好了。

1️⃣3️⃣ 排错 · 全程通用

任何卡点的万能起手式。配合 渡劫急救箱 一起用:急救箱按"你看到的现象"帮你定位,这里的咒语帮你把问题交给法器

【报错三句话咒】· 任何卡点的万能模板

何时用:任何时候卡住、报错、白屏、按钮点了没反应——先用这条。

我卡住了,按三句话给你交底,请帮我排查: 1. 我刚做了什么:[一句话,比如:我点了"保存内容"按钮]; 2. 我现在看到什么:[照抄屏幕上的现象/报错,有红字就整段贴过来,别概括]; 3. 我希望它变成什么:[一句话,比如:我希望点保存后内容能存进去并显示出来]。 请先告诉我你判断问题大概出在哪,需要我再提供什么(某个文件、某段报错)你直接问我。 确认了原因再动手改,一次只改一处。不确定就说不确定,别猜着改。
💬 这就是免费课就用过的报错三句话。"我刚做了什么 / 现在看到什么 / 希望变成什么"——比你瞎描述管用十倍。把红字整段照抄给法器,别概括

【先描述别删除咒】· 越改越乱时,先停手

何时用:法器连续改了几轮还没好、你已经看不懂改到哪了,想止损。

停一下,我们越改越乱了,我有点跟不上。请你先别再改任何东西。 请用大白话告诉我: 1. 我们现在的站,处于一个什么状态(能用的部分有哪些、坏掉的有哪些); 2. 从我们最近一次"存档点"到现在,你一共改了哪些地方; 3. 你建议:是继续往下修,还是干脆回到上一个存档点重来? 我决定之前你不要动手。
💡 黄金原则:不要删,先描述。 慌的时候删东西最容易把好的也删掉。先让法器把现状说清楚,再决定是修还是一键回档(见第 11 类)。

【交底排查咒】· 让法器讲清它到底改了什么导致出问题

何时用:某次改动后功能坏了,想搞清是哪一处改动惹的祸。

刚才那次改动之后,[某功能,比如:登录]就坏了,之前是好的。 请帮我: 1. 回想刚才那次改动,你具体动了哪几个文件、哪几行; 2. 判断最可能是哪一处导致了现在的问题; 3. 给我一个最小的修法,只改那一处,别顺手改别的。 改之前先把你的判断讲给我听,我确认了你再动手。

附:咒语库使用心法(收尾)

  • 找不到对应咒语? 用 §13 的【报错三句话咒】或【认主咒】起手,把你要干的事用大白话讲给法器,它会带你往下走——咒语库是"加速器",不是"唯一入口"。
  • 每条咒语都可叠加铁律:嫌哪条不够稳,结尾补一句「小步改、不确定就问我、改完用人话交底」。
  • Codex 卡住时,同一段咒语可以原样发给 Claude Code 对照(第 3 课会顺手配一条备用)——两者咒语通用。
  • 咒语会跟着你成长:学到第几课,这一类咒语就为你解锁。出师时,这一整本就是你指挥法器造全栈站的随身法册。
🌿 一字一咒,皆是你与法器之间的约定。你不必懂它如何运转,只需知道——该用哪一句,该填哪一字。剩下的,法器替你飞升。
渡劫急救箱
按「你看到的现象」找自救话术。卡住了不慌,先填报错三句话。
报错三句话 · 万能急救
任何卡点都能用。把三句填好,一键拼成一段,复制给法器,比你瞎描述管用十倍。
我刚做了:[填①] 我现在看到:[填②] 我希望它变成:[填③]

# 🆘 渡劫急救箱 · 现象化全栈版

这不是一篇要从头读到尾的文章。它是一本字典——你哪一步卡住了,就按「你眼睛实际看到的那句报错 / 那个现象」翻到对应分组,照着做。

不用懂任何原理,也不用看懂代码。每一条都长这样:现象(你看到啥)+ 八成是因为(大白话原因,可跳过)+ 急救话术(一字不改发给法器,或照着点)+ 这是第几课的事

〇 · 总原则:不要删,先描述

筑基这一路,你一定会遇到红字、白屏、报错、卡住——这不是你笨,这是每个修士都会过的渡劫,90% 的人在 20 分钟内就过去了。但能不能 20 分钟过去,取决于你卡住的第一反应。

第一反应只有两个,记死它:

  • 不要删! 不要急着把刚建的文件删掉、把项目推倒重来、把账号注销重注册。你删掉的,往往正是法器排查问题需要的线索;重来一遍,十有八九卡在同一个地方。崩坏是预期剧情,不是世界末日——下面有通关路径。
  • 先描述,别瞎猜。 你不需要看懂报错,你只需要如实描述。把下面这三句话填好,发给法器(或答疑的地方),比你自己瞎琢磨管用十倍。

💬 万能急救 · 报错三句话(背下来)

任何卡点,先填这三句,整段发给法器:

1. 我刚做了什么:______(例:我按第 5 课第三步,让你把 Supabase 的网址和钥匙填进 .env)
2. 我现在看到什么:______(把屏幕上的红字 / 报错 / 白屏一字不差抄下来,或直接截图)
3. 我希望它变成什么:______(例:我希望网页能显示出云端那句话)

抄报错的小技巧:看不懂没关系,照抄就行。哪怕是一长串英文,你原样贴给法器,它就能读懂。抄不全就截图——Codex 看得懂截图。
🌿 道友别慌。所谓渡劫,从来不是「不出岔子」,而是「出了岔子能回来」。这本急救箱,就是你的回程符。

🧭 怎么用这本字典(分组速查)

你卡在干嘛
翻到哪组
大概第几课
装 Node / Codex,黑窗口报错
① 安装专用
第 2 课
配 cc-switch 中转、法器连不上供应商
② cc-switch 配置
第 3 课
git / GitHub 让你登录、推不上去
③ GitHub 认证
第 4、14 课
改坏了想回档、找不回上一版
④ git 回档
第 4 课
连不上 Supabase、读不到数据
⑤ Supabase 连接
第 5 课
两把钥匙搞混、红绿不分
⑥ 两把钥匙
第 5 课
部署上线后整个站白屏
⑦ env 双轨 · 部署白屏
第 14 课
自己被自己的安全策略锁在门外
⑧ RLS 自锁
第 10、12 课
存内容报错「列名对不上」
⑨ CRUD 列名对不上
第 7–9 课
收款 / 激活码 / 付费墙不灵
⑩ 付费 · 激活码
第 13 课
注册登录失败、收不到邮件
⑪ 登录 · 注册
第 6、15 课
上线后注册全失败、跨域红字
⑫ CORS · Auth 白名单
第 14 课
用了几天,站突然全死
⑬ Supabase 项目暂停
第 14、15 课
💡 看得懂透明层:每次法器帮你做完关键动作(装好了、改好了、建好表了),它会用人话回你一句「我刚做了啥、改了哪个文件、你可以怎么验证」。急救时,先看法器这句话,常常一眼就知道哪步没成。

一 · 安装专用(急救现象)

适用:第 2 课「请器入炉」。这是全程最高的悬崖——装 Node、装 Codex CLI 那一关。下面 4 条覆盖九成卡点。记住保底降级:只要黑窗口能打出版本号,这一关就算过了;登录卡点留到第 3 课配中转再解决,今天不用强求。

现象:黑窗口里打 node -v(或法器让你打的命令),提示「不是内部或外部命令」/「不是可识别的命令」/command not found

八成是因为:Node 没装上,或者装完了没重开窗口——新装的东西,旧窗口认不出来。
急救话术(照做):先把黑窗口整个关掉,重新打开一个,再打一次 node -v。如果还是不行,把这句发给法器:
``
我在装 Node 环境。我刚做了:______(例:我从官网下载安装包点了下一步装完)。
我现在看到:在命令行里输 node -v,它说"不是内部或外部命令"。
我希望:能正常显示出版本号。我是 Windows 系统、零基础,请一步步带我,告诉我每一步该点哪里、输什么。
``

现象:装 Codex CLI 时,一长串红字滚过去,最后停下不动 / 报 npm ERR! / 报网络超时(timeout / ETIMEDOUT)

八成是因为:下载源在墙外,网络拉不动——这不是你的错,是网络问题。
急救话术(照做):换个网络重试(手机热点常常就通了),或等几分钟再来一次。还有一招——让法器换国内下载源(淘宝镜像):把这句发给它「帮我把 npm 的下载源换成淘宝镜像 registry.npmmirror.com,再重装一次 Codex」(国内拉包会快很多)。都不行就把整段红字截图发给法器:
``
我在装 Codex CLI。我刚做了:按你上一步给的命令安装。
我现在看到:______(截图,或抄最后那几行红字,尤其有没有 timeout / network 字样)。
我希望:能装完。我是 Windows、零基础,如果是网络问题请告诉我怎么换源或换网络重试。
``

现象:提示「权限不足」/ EACCES / permission denied / 让你用管理员身份

八成是因为:这个安装动作需要更高权限。
急救话术(照做):关掉现在的黑窗口,在开始菜单找到「命令提示符」或「PowerShell」,右键 →「以管理员身份运行」,重新打开后再让法器把上一条命令跑一遍。

现象:全程跟着做,但就是装不上 / 来回报错半小时(保底降级)

八成是因为:某个环节卡在网络或系统差异上,不值得在这里耗光耐心
纯网页版保底:如果本地命令行实在装不上(老电脑/公司电脑限制等),别卡死在这一关——可以先用法器的网页版/在线 IDE(浏览器里就能用、零安装)把课程往下走,等有条件了再回来补本地命令行。这门课的过关线是「你能指挥法器干活」,载体不是唯一答案。
急救话术(照做):别硬刚。这一关的过关线是「黑窗口能打出版本号」。把这句发给法器,让它给你最省事的那条路:
``
我装 Codex 卡了快半小时,反复报错。我现在只想先过关:让命令行能打出版本号就行。
请给我一条最简单、最不容易出错的安装方式,一步一步带我,Windows 零基础。
登录和配中转的事,我们第 3 课再弄,今天先不管。
``

二 · cc-switch 配置(现象)

适用:第 3 课「cc-switch 配法器」。cc-switch 是个带托盘图标的桌面小工具,作用只有一个:告诉 Codex「去连哪个供应商」(比如能用人民币付费的大陆中转)。

🔎 先把一件事说清楚,省得你被吓:cc-switch 不创造任何新命令,你全程用的还是真·Codex、跑的是真命令。它只是个「切换器」,像给电视换信号源——换完照样是那台电视。毕业后想换供应商,改个配置就行,不锁你。

现象:cc-switch 配好了,但让 Codex 干活时报「认证失败」/「未授权」/ 401 / Unauthorized / invalid api key

八成是因为:API Key(那串供应商给你的密钥)粘错了、粘漏了、或前后带了空格
急救话术(照做):回到供应商后台重新复制一遍 Key(整段,别漏字符),回 cc-switch 里把旧的删干净、重新粘,确认前后没有多余空格,保存后切换一下当前供应商。再不行,把这句发给法器:
``
我在用 cc-switch 给 Codex 配中转供应商。我刚做了:把供应商的 API Key 填进 cc-switch 并切换。
我现在看到:让你干活时报 401 / 未授权(或抄下原话)。
我希望:能正常调用。请告诉我除了 Key 填对,还要检查哪里(比如选对了哪个供应商、网址有没有填对)。
``

现象:切换了供应商,但 Codex 好像「没生效」/ 还是连旧的 / 没反应

八成是因为:切换后法器那个窗口还没重启,旧窗口还连着旧配置。
急救话术(照做):在 cc-switch 托盘里确认当前勾选的是你要的那个供应商,然后把 Codex 的窗口关掉重开,再让它干活。

现象:配好能用,但担心钱花超了 / 不知道扣了多少

八成是因为:你还没在中转后台设上限——这是该做的事,不是出错
急救话术(照做):去你充值的那个中转供应商后台,找「用量上限 / 封顶 / 限额」这类设置,设一个你能接受的封顶(或干脆只充小额,比如几十块用完为止)。这正是第 3 课「灵石台账」要带你做的——整门课唯一真要花的就这点钱(悲观 ¥30–80),设好封顶就不会超支。

三 · GitHub 认证(现象)

适用:第 4 课「立档存真」(第一次让 git 管你的项目)和 第 14 课「连仓自动部署」。git 操作全程由法器代管,你不用记命令——但 GitHub 偶尔会拦你做身份验证,下面是这几个卡点。

现象:法器要把代码推上 GitHub 时,弹窗让你登录 / 让你授权 / 浏览器跳出一个授权页

八成是因为:GitHub 第一次确认「是不是你本人」——这是正常的,不是出错
急救话术(照做):按弹窗指引,用你免费课那个 GitHub 账号登录、点「Authorize / 授权」就行。如果它让你选「在浏览器里继续」,就点同意。这一步过了,以后法器再推代码就不用你管了。

现象:推代码报 Authentication failed / 403 / 要你输密码但输了说不对

八成是因为:GitHub 现在不收登录密码了,要的是「令牌」或浏览器授权——你输的网页密码它不认。
急救话术(照做):别在黑窗口里反复输密码(输了也没用)。把这句发给法器,让它带你走浏览器授权那条路:
``
我在用 git 把项目推到 GitHub。我刚做了:按你说的推代码。
我现在看到:报 Authentication failed / 让我输密码但说不对。
我希望:能成功推上去。我是 Windows 零基础,听说 GitHub 现在不用密码要用令牌或浏览器授权,
请带我走最简单的那条(最好是浏览器点一下就授权的方式),一步步来。
``

现象:报 repository not found / 找不到仓库 / 远程地址不对

八成是因为:仓库还没在 GitHub 上建,或者法器填的远程地址敲错了一个字。
急救话术(照做):把这句发给法器:
``
我推代码时报 repository not found。我刚做了:______。
请帮我确认两件事:1)GitHub 上这个仓库到底建了没;2)本地连的远程地址对不对。
如果仓库没建,请带我在 GitHub 网页上建一个,然后重新连。
``

四 · git 回档(现象)

适用:第 4 课「立档存真」。git 对你只有一个用途:渡劫回档——改坏了,一句话退回上一个好版本。不教分支、不教合并、不教冲突,只用这一招。第 4 课会专门带你「故意改坏 → 一键回档 → 复原」演练一遍,让你心里有底。

现象:法器改完代码,站坏了 / 报错了 / 不如改之前好了,想退回去

八成是因为:这次改动没成功——这正是 git 存在的意义,不慌
急救话术(照做):把这句发给法器(这是你最常用的一句,收藏它):
``
刚才那次改动把站改坏了。请帮我回到上一个能正常运行的存档版本(用 git 回档),
回完之后告诉我:你退回到了哪一版、现在站应该恢复成什么样、我怎么验证它好了。
``
法器回档后,刷新你的站,应该就回到改坏之前的样子了。

现象:法器说「你有还没存档的改动,挡住了回档」/ 报 uncommitted changes 之类

八成是因为:你手上有一摊「改了一半、还没存档」的东西,git 怕弄丢它,先拦着。
急救话术(照做):把这句发给法器,让它替你决定怎么处理:
``
你说我有没存档的改动挡住了回档。这些改动我不要了(我就是想退回上一个好版本)。
请帮我安全地丢弃这些没存档的改动,然后回到上一个正常存档版本,并告诉我回到了哪一版。
``

现象:不确定「上一个好版本」是哪个 / 怕回错了

八成是因为:你看不到存档历史——但法器看得到。
急救话术(照做):
``
请用人话列出我最近几个存档(几点存的、当时大概干了什么),
帮我找出"最后一个站还正常"的那一版,我确认后再回档。
``

五 · Supabase 连接(现象)

适用:第 5 课「开户立籍 · 接通灵脉」。第一次让你的站连上云端数据库。

现象:站打不开 / 报 Failed to fetch / Network Error / 控制台一堆红字,连不上 Supabase

八成是因为:那两样关键信息(项目网址 + 公开钥匙)填错了或填漏了(详见⑥ 两把钥匙)。
急救话术(照做):把这句发给法器:
``
我在按第 5 课连 Supabase。我刚做了:把项目网址和公开钥匙填进配置。
我现在看到:______(抄红字,尤其有没有 Failed to fetch / Network Error)。
我希望:网页能读到云端那条数据。请帮我逐项核对:网址对不对、钥匙填的是不是"公开那把(红绿对照里的绿钥匙)"、有没有填错位置。
``

现象:连上了,但网页一片空白,没报错也没数据

八成是因为:配置填了但没填对地方,或站没重启读到新配置。
急救话术(照做):把站停掉重新跑(法器会带你);还不行就让法器开「看得懂透明层」自查:
``
我的站连 Supabase 后白屏、不报错也不出数据。请帮我检查:
1)配置文件里网址和钥匙是不是真的读到了;2)我是不是改完没重启站。
检查完用人话告诉我问题在哪、怎么验证修好了。
``

现象:Invalid API key / JWT 相关红字

八成是因为:钥匙那把填错了(填成了另一把,见下一组)。
急救话术:直接翻到⑥ 两把钥匙,按那组来。

现象:站/数据库在国内打开特别慢、转圈、时通时断,换境外网络或不同运营商就好(国内访问)

八成是因为:Supabase 服务器在境外,大陆直连线路有时不稳——这是网络线路问题,不是你弄坏了、也不是代码错了(换个网络就通 = 基本实锤是线路)。
急救话术(三档,从省事到彻底):
1)先确认是不是线路:换境外网络 / 不同运营商 / 手机热点各试一次。若换网络就通,基本锁定是国内直连不稳,不用改代码。
2)建项目时选就近区域:新建 Supabase 项目时把 Region 选 Singapore / Tokyo 等离大陆近的节点,直连体感会好些(已建好的项目改不了区域,非必要别折腾迁移)。
3)走 Cloudflare 自定义域名代理(更稳的进阶解,留待你有自己的域名时):让 Supabase 请求经 Cloudflare 边缘中转,国内可达性通常优于直连。
⚠️ 诚实标注:①② 现在就能做;③ 的具体配置路径待真实国内网络实测后写实(候选步骤草案见 guonei-fangwen-beixuan-caogao.md)——别照搬未经验证的 IP/域名。演示态自测优先用 ①②,③ 作「上线给真实国内用户」时的可达性增强项。

六 · 两把钥匙(红钥匙 / 绿钥匙现象)

适用:第 5 课。Supabase 给你两把钥匙,长得像、用处天差地别,这是全程最容易踩的坑之一,单独拎出来讲。

- 🟢 绿钥匙(公开钥匙 · anon / public):贴在前端、给浏览器用、能上线的那把。安全,该用的就是它
- 🔴 红钥匙(管理钥匙 · service_role / secret):绝对不能贴进前端、不能上线、不能发给任何人。它能绕过一切安全策略,泄露了等于把整个数据库的门钥匙交出去。

现象:网页报 Invalid API key / 数据读不出来 / 权限怪异

八成是因为:钥匙填反了——前端该用绿钥匙,你填成了别的。
急救话术(照做):回 Supabase 后台,找到标着 anon / public 的那把(绿钥匙),重新复制,替换掉前端配置里那把。把这句发给法器让它帮你确认:
``
我怀疑 Supabase 钥匙填错了。请帮我确认:前端配置里该填的是 anon / public 那把(公开绿钥匙),
不是 service_role(管理红钥匙)。请检查我填的是哪一把,如果填错带我换成对的。
``

现象:你意识到自己把红钥匙(service_role)贴进了前端 / 提交到了 GitHub

八成是因为:两把钥匙长太像,一时拿错——别慌,但要立刻处理
急救话术(照做):这是要认真对待的安全事。立刻把这句发给法器:
``
紧急:我可能把 Supabase 的 service_role(管理红钥匙)贴进了前端 / 推到了 GitHub。
请带我做两件事:1)在 Supabase 后台把这把钥匙重置/轮换掉(让旧的作废);
2)把前端和代码里的红钥匙清干净,换回 anon 公开绿钥匙。一步步来,我零基础。
``
🔎 记住口诀:绿钥匙能上线,红钥匙锁抽屉

现象:你重置 / 轮换了钥匙(比如刚处理完红钥匙泄露),之后站突然连不上了 / 报 Invalid API key

八成是因为:旧钥匙作废了,但站里(本地 .env 和线上平台)还填着那把旧的——一处没换全,就连不上。
急救话术(照做):把这句发给法器:
``
我刚在 Supabase 后台重置/轮换了钥匙,现在站连不上、报 Invalid API key。
我猜是新钥匙还没在所有地方换上。请带我把新的 anon 公开绿钥匙,
在这两个地方都换一遍:1)本地 .env 文件;2)上线平台(Cloudflare/Vercel)的环境变量后台。
换完告诉我:本地要不要重启、线上要不要重新部署、怎么验证又连上了。
``
🔎 钥匙是"两处同一套"(env 双轨),换钥匙也要两处都换,漏一处就连不上。

七 · env 双轨(部署白屏现象)

适用:第 14 课「全栈站上真线」(双轨的「兑现」时刻),根子埋在 第 5 课

🔎 「双轨」是啥:你的那些秘密(网址、绿钥匙等)要在两个地方各填一遍——① 本地电脑上的 .env 文件,② 上线平台(Cloudflare/Vercel)的后台。本地填了 ≠ 线上填了.env.example(传家底单)只列「有哪些项要填」,不含真值,这份可以上传

现象:本地跑得好好的,一部署上线,整个站白屏(空白页 / 转圈不出东西)

八成是因为:99% 是线上平台的环境变量没填——你只在本地 .env 填了,忘了去上线平台后台再填一遍。
急救话术(照做):去你的上线平台(Cloudflare Pages / Vercel)后台,找 「Environment Variables / 环境变量」 设置,把本地 .env 里那几项原样填一遍,然后重新部署一次。把这句发给法器要清单:
``
我的站本地正常,一部署到 Cloudflare/Vercel 就白屏。我怀疑是线上环境变量没填。
请照着我本地的 .env.example,列出我必须在上线平台后台填哪几个变量(名字要和本地一致),
然后告诉我填完怎么重新部署、怎么验证白屏好了。
``

现象:线上也填了变量,还是白屏

八成是因为:变量名字拼错 / 多了空格 / 填完没重新部署
急救话术(照做):
``
线上变量我填了还是白屏。请帮我逐个核对:平台后台的变量名是不是和代码里要的一字不差、
值有没有多空格、是不是填完忘了重新部署。用人话告诉我哪一项有问题。
``

现象:你在本地改了 .env(换了钥匙 / 加了一项),但站好像没读到新的、还是老样子

八成是因为:.env启动时读一次的——你改完没重启本地开发服务,它还在用旧的。
急救话术(照做):把正在跑站的那个命令停掉(Ctrl+C)再重新跑一次(法器会带你),让它重新读 .env。还不行就发这句:
``
我在本地改了 .env 文件,但站好像没读到新值。我已经/没有重启过本地服务。
请带我正确地停掉再重新启动本地站,确认它读到了新的 .env;
并告诉我以后改 .env 是不是每次都要重启一下。
`
🔎 口诀:改了
.env`,先重启——本地改完重启 dev,线上改完重新部署。

八 · RLS 自锁(现象)

适用:第 10 课「行级安全 RLS」(渡劫课 ★)和 第 12 课「付费墙」。RLS = 数据库的「门禁」,决定谁能读谁能改。这道渡劫,「把自己锁在门外」是预期剧情——下面就是通关路径。

口径提醒(别记错):第 10 课的读门是「免费内容谁都能读 / 非免费暂时挡住」(这时还没有会员开关);第 12 课才把读策略扩展成「免费 OR 会员可读」——是第 10 课的自然延伸,不是矛盾

现象:刚配完 RLS,自己(站主)也读不到 / 改不了内容了,全空了

八成是因为:门禁一开,默认谁都进不来,要专门给该进的人开一道门——这是预期渡劫,90% 的人 20 分钟内过
急救话术(照做):把这句发给法器(★ 渡劫通关话术):
``
我按第 10 课开了 RLS,现在自己也读不到/改不了数据了。这是预期内的,请带我过劫:
1)给"站主本人"开放写权限(写策略锁 created_by = 我);
2)读策略按第 10 课口径:is_free=true 谁都能读、非 free 暂时挡住;
配完用人话告诉我:站主能改吗、游客能看免费内容吗、游客被挡住的是不是非免费内容,我怎么逐一验证。
``

现象:第 12 课加了会员判断后,会员账号也看不到会员内容 / 游客反而能看到了

八成是因为:读策略没统一成「免费 OR 会员」,或会员开关(is_member)没判断对。
急救话术(照做):
``
我在做第 12 课付费墙。现在权限不对:______(例:会员看不到会员内容 / 游客能看到付费内容)。
请把 contents 的读策略统一成"is_free=true 谁都能读 OR 当前用户 is_member=true 能读全部",
这是第 10 课读门的自然扩展。配完带我用两个账号验:游客只看到免费的、会员看到全部。
``

现象:用「游客账号」和「会员账号」互验,结果两个看到的一样

八成是因为:前端遮罩做了、但后端 RLS 没真正拦住(前端遮罩 F12 就能绕过,真拦截靠后端)。
急救话术(照做):
``
我用游客和会员两个账号测,看到的内容一样,怀疑后端没真拦住。
请检查 contents 的 RLS 读策略是否真的生效(不是只有前端遮罩),
用人话告诉我后端到底拦没拦、怎么从数据库这边验证。
``

九 · CRUD 列名对不上(现象)

适用:第 7–9 课(建表、新增、读取、编辑、删除内容)。法器写的代码,要和你数据库表里的列名一模一样,差一个字母都不行。

现象:存内容 / 读内容报 column ... does not exist / 字段不存在 / 400 带列名报错

八成是因为:代码里写的列名,和数据库表里实际的列名对不上(拼写差异、单复数、大小写)。
急救话术(照做):把这句发给法器——关键是先把你真实的表结构交给它:
``
我存/读内容时报"某列不存在"。我现在看到:______(抄报错,尤其引号里那个列名)。
请先帮我把 contents 表"实际有哪些列"查出来对一遍,再检查代码里用的列名是不是和它一字不差。
不对就帮我改成一致的,并告诉我改了哪里、怎么验证存得进去了。
``

现象:存的时候报「某列不能为空」/ null value ... violates not-null

八成是因为:有个必填列没给值(比如该自动记录站主的 created_by 没填上)。
急救话术(照做):
``
我存内容时报"某列不能为空":______(抄列名)。
请告诉我这列该填什么、能不能让它自动填(比如 created_by 自动等于当前登录用户),
帮我改好并验证能存进去。
``
💡 防坑铁律:让法器干活前,先把表结构交给它(spec §8.1「交底优先」)。一句「先看我现在的表长啥样,再动手」,能省掉一大半列名对不上的报错。

现象:新增 / 删除内容成功了,但页面列表不自动更新,要手动刷新(F5)才看到变化**

八成是因为:数据真的存进 / 删掉了(刷新就对),只是前端没在操作后重新拉一遍列表——这是体验问题,不是数据丢了。
急救话术(照做):
``
我新增/删除内容后,数据确实变了(刷新页面就对),但页面列表不会自动更新,要我手动刷新。
请帮我在"新增成功 / 删除成功"之后,自动重新拉一遍列表(或把那条直接加到/从列表里去掉),
让我不用手动刷新就能看到最新的。只改这一处,改完让我试。
``
💡 先分清:刷新后 = 数据没问题、只是没自动刷新(本条);刷新后还是错 = 真没存进去,翻到⑨ 列名对不上那组。

十 · 付费 · 激活码(现象)

适用:第 13 课「最小支付能跑通」(渡劫课 ★)。

🚨 第一步必读 · 合规红线:个人收款码用于经营性收款,在大陆可能被风控冻结。本课的收款码只用于你自己测试演示,不是让你真拿它对外收钱经营。正式经营要走合规通道。这不是技术问题,是保护你——记死了。

🔎 正向理解(不是阉割版):你做出的是一条完整商业闭环——注册 → 试读 → 付费验证 → 权限激活,全部真实运转。支付环节用收款码 + 激活码而不是商业接口,是「准入公平」的设计选择:任何人无需营业执照,就能把完整闭环跑通。本课不碰 webhook / 自动扣款 / Edge Function 自动发码(那些留金丹期)。

现象:输了激活码,会员没开通 / is_member 没翻成 true / 付费墙还在

八成是因为:激活码核销那一步没真正改到 profiles 里的会员开关,或码本身状态不对。
急救话术(照做):
``
我在测第 13 课激活码解锁。我刚做了:输入激活码点解锁。
我现在看到:会员没开通、付费墙还在(或抄报错)。
我希望:输码后我的 profiles.is_member 翻成 true、付费墙消失、能看到会员内容。
请带我查:这个码是不是有效(没被用过、没过期)、核销时有没有真的把我这行的 is_member 改成 true。
``

现象:激活码提示「已被使用」/「已过期」/ 用过一次再用就不行

八成是因为:这是设计如此,不是 bug——激活码一次性 + 默认 7 天有效期(防激活前被转卖)。
急救话术(照做):这是正常的。如果是你自测要再跑一遍流程,就让法器给你生成一个新的激活码:
``
这个激活码已被使用/已过期,这是正常的(一次性+7天有效期)。
我要再测一遍解锁流程,请帮我生成一个新的有效激活码,并告诉我它什么时候过期。
``

现象:想退款 / 把某人的会员关掉

八成是因为:正常运营动作。
急救话术(照做):
``
我要把某个用户的会员关掉(退款)。请帮我把他的 profiles.is_member 翻回 false、
对应的激活码作废,并告诉我怎么验证他现在又看不到会员内容了。
``

十一 · 登录 · 注册(现象)

适用:第 6 课「注册登录真生效」(里程碑①)和 第 15 课「引客入门」。登录主路是 邮箱 + 密码

现象:注册 / 登录报「邮箱或密码错误」/ Invalid login credentials

八成是因为:密码记错了,或这个邮箱还没注册过就来登录了。
急救话术(照做):先确认是注册还是登录——没注册过要先注册。还不行:
``
我登录报"邮箱或密码错误"。我用的邮箱是 ______,我确定已经注册过/不确定。
请帮我确认这个邮箱在 Supabase 用户里到底有没有,如果有但密码忘了,带我走重置密码;
如果没有,带我先注册。
``

现象:注册后说要「验证邮箱」,但收不到验证邮件****

八成是因为:邮件进了垃圾箱,或还没开/没配邮箱验证。
急救话术(照做):先翻垃圾箱 / 推广邮件文件夹(八成在那)。如果你是自测想省事,可以让法器帮你在 Supabase 后台暂时关掉邮箱验证:
``
我注册后收不到验证邮件(垃圾箱也没有)。我现在是自测阶段想先跑通。
请告诉我两条路:1)怎么手动把我这个账号确认为已验证;
或 2)自测期间怎么在 Supabase 后台暂时关掉邮箱验证(上线前我再打开)。我零基础,一步步带我。
``

现象:登录成功了,但刷新一下又变回没登录 / 一直要重新登

八成是因为:登录状态(会话)没存住。
急救话术(照做):
``
我登录后一刷新就退出了,登录状态没保持。请帮我检查会话有没有正确保存,
修好后告诉我:现在刷新还在登录吗、我怎么验证。
``

十二 · CORS / Auth 白名单(现象)

适用:第 14 课「全栈站上真线」。本地能用、一上线就出问题,常是这两件事:跨域(CORS)Auth 白名单(上线后的网址要先「报备」给 Supabase,它才认)。

现象:本地登录/读数据都正常,一上线就报 CORS / 跨域 / blocked by CORS policy 红字

八成是因为:你上线后的新网址还没被允许访问后端。
急救话术(照做):
``
我的站本地正常,上线后报 CORS / 跨域错误。我上线后的网址是 ______。
请带我把这个线上网址加到 Supabase 该允许的地方(白名单),一步步来,我零基础。
配完告诉我怎么验证线上能正常登录/读数据了。
``

现象:上线后登录/注册跳转回来就失败 / 重定向到错误页 / redirect URL not allowed

八成是因为:上线网址没加进 Auth 的重定向白名单(尤其用邮箱链接登录时)。
急救话术(照做):
``
我上线后登录/注册跳转失败,提示重定向地址不允许。我的线上网址是 ______。
请带我去 Supabase 的 Auth 设置,把这个线上网址加进允许的重定向白名单(包括首页地址)。
一步步来,配完告诉我怎么验证。
``

十三 · Supabase 项目暂停(现象)

适用:第 14、15 课(上线、引真人来用之后)。Supabase 免费项目超过 7 天没活动会自动暂停——这不是你弄坏了,是免费层的规矩。这是第 15 课「真人注册全失败」要首先排查的事。

现象:之前都好好的,隔了几天再打开,站全死了 / 登录注册全失败 / 数据全读不出来

八成是因为:Supabase 免费项目被自动暂停了(7 天没活动)——先查这个,别急着改代码
急救话术(照做):先登 Supabase 后台看你的项目是不是「Paused / 暂停」状态。如果是,点恢复(Restore / Resume)即可。把这句发给法器确认:
``
我的站隔几天没动,现在登录/读数据全失败。我怀疑是 Supabase 免费项目被自动暂停了(7天没活动)。
请带我去后台看项目是不是 Paused 状态,如果是怎么恢复;
恢复后告诉我怎么验证站又活了,以及以后引真人来之前怎么先"唤醒"一下别让他们扑空。
``

现象:要拉真人来注册了,怕他们一来就撞上「暂停」扑空

八成是因为:正常预防动作(spec §7.6 保活检查)。
急救话术(照做):引客前先自己登一次站、点一下,把项目「唤醒」;或让法器告诉你怎么做个简单的保活检查,确保陌生人来的时候站是活的。

🌿 收尾 · 一句话

这本急救箱不是让你背下来的——是让你卡住时知道「翻到哪一页」的

真到了那一刻,记住总原则就够了:不要删,先描述;填好报错三句话,发给法器。剩下的,字典里都有。

🪷 渡劫者众,陨落者寡。不是因为他们更厉害,是因为他们手里有这本回程符。现在,它也在你手里了。
出师大典 · 开宗立派
五幕仪式 · 验收你那座能注册、能收费的真站。
🔒
先登录,再来出师
出师大典需要:完成全部 18 课、四道渡劫闸门达标、你的真站公网可访问。达标后,这里会开启五幕授度仪式。
资料 · 锦囊袋
一路攒下的可复用模板、心法与清单。填空即用、复制即用、照单点。
总览
锦囊袋 · 总览
立地基(连接)
01 · 渡口立项卡
02 · 装环境清单
03 · cc-switch 速查
AGENTS · 项目家规
04 · git 存档 / 回档速查
05 · .env 与两把钥匙
通经脉(读写)
06 · profiles 建表 + 登录
07 · contents 建表模板
08 · 增 / 查代码模板
09 · 改 / 删代码模板
10 · RLS 四件套 SQL
凝金锋(闭环)
11 · 会员分级模板
12 · 付费墙模板
13 · 激活码闭环模板
受香火(复用)
14 · 部署上线清单
15 · 引客话术 + 保活
16 · 固元体检表
17 · 换主题复刻清单
18 · 出师帖 + 锦囊打包
19 · GEO 让 AI 帮你卖
心法 · 系统
提示词 craft 卡
自我渡劫咒
御剑心法 · 与 AI 协作
出关自查与四道闸门
AGENTS.md 通用模板
售前成本告知书
国内访问备选方案
激活码 · EdgeFunction 附录
完整 24 件锦囊随课更新;其余模板在毕业打包里一并带走。
🪷 修士行走,靠的不只是境界,还有囊中那几样反复能用的法宝。

这是什么

锦囊袋,是你上这门《码上飞升·筑基正传》一路攒下来的可复用 / 可分享物料合集

每一课,你赚到的都不只是「站上多一块功能」——你还会拿到一件能反复用的东西:一张填空即用的模板、一段复制即用的代码、一张照着点就不漏的清单。这些东西全部躺在这个 takeaways/ 文件夹里。

它和课文最大的区别是:课文是教你这一次怎么做,锦囊是你下一次(做第二个站、帮朋友、接私单)直接拿来就用的。 课文会忘,锦囊不会——它就在你硬盘里,随时翻出来。

💎 毕业那天你拥有的:不只是一个上线的会员站,还有一整套属于你自己的全栈模板库——建表 SQL、登录代码、付费墙、激活码闭环、部署清单……换个主题,照着锦囊袋复刻一遍,几天就能再起一座新站。这就是这门课真正留给你的「传家底」。

怎么用(三句话)

  • 填空即用:模板里凡是 【方括号】 的地方,换成你自己的;其余一字不改。拿不准就把整段连同你的项目情况发给法器,让它替你填。
  • 复制即用:代码 / SQL 段落,整段复制,交给法器(Codex 为主,Claude Code 为辅)让它放进对应文件——你不用自己写裸命令、不用懂每一行
  • 照单点:清单类(装环境、上线、体检)就是一行行勾选框,照着点,不漏步、不慌。
🛡 安全底线(所有物料通用):凡是带 service_role 字样的密钥,绝不进前端、绝不发给任何人、绝不截图。模板里凡涉及密钥的地方都会再提醒你一次。

每课给你什么(逐课锦囊清单)

锦囊名
文件
类型
一句话
1
立项卡
01-lixiang-ka.md
填空即用
一句话说清「卖给谁 · 看什么 · 解锁什么」,定下你这座站的魂
2
装环境清单
02-zhuang-huanjing-qingdan.md
照单点
法器(Codex/Claude Code)+ 命令行环境,照着装不漏件
3
AGENTS.md 家规模板 + cc-switch 速查
AGENTS.md · 03-cc-switch-sucha.md
填空即用
放进项目根目录的「家规」,让法器永远记住三铁律;附中转换源速查
4
git 存档 / 回档速查
04-git-cundang-suvcha.md
复制即用
三句话存档、一句话回到上一个境界,改坏了不怕
5
.env 与两把钥匙速查
05-env-yu-yaoshi-sucha.md
填空即用
分清「公开钥匙」和「绝密钥匙」,哪把能进前端一目了然
6
profiles 建表 + 触发器 + 登录模板
06-profiles-yu-denglu-moban.md
复制即用
用户表 + 注册自动建档触发器 + 邮箱密码登录骨架
7
contents 建表模板
07-contents-jianbiao-moban.md
复制即用
内容表 SQL,你的站「卖什么」就装在这张表里
8
增 / 查代码模板
08-zengcha-daima-moban.md
复制即用
往站上加内容、把内容读出来显示的两段标准代码
9
改 / 删代码模板
09-gaishan-daima-moban.md
复制即用
编辑、删除内容的标准代码,凑齐「增删改查」四件套
10
RLS 四件套 SQL
10-rls-sijiantao-sql.md
复制即用
行级安全四条策略,给每张表上锁,别人偷不走你的数据
11
会员分级模板
11-huiyuan-fenji-moban.md
复制即用
is_member 付费开关 + 按等级放行内容的判断骨架
12
付费墙模板
12-fufeiqiang-moban.md
复制即用
免费试读 N 条、其余「登录 / 付费才解锁」的拦截层
13
激活码闭环模板
13-jihuoma-bihuan-moban.md
复制即用
activation_codes 表 + 兑换逻辑,不接 webhook、不碰自动扣款
14
部署上线清单
14-bushu-shangxian-qingdan.md
照单点
Cloudflare Pages 连仓自动部署,上线前一项不漏
15
引客话术 + 保活清单
15-yinke-huashu-yu-baohuo.md
复制即用
发圈 / 发群的引流话术 + 让免费层不休眠的保活动作
16
固元体检表
16-guyuan-tijian-biao.md
照单点
一张全站自检表:登录、付费墙、密钥、RLS 逐项体检
17
换主题复刻清单
17-fuke-qingdan.md
照单点
同一套骨架换个主题,照着改这几处就能再起一座新站
18
出师帖 + 全套锦囊袋打包
18-chushi-tie-yu-jinnangdai.md
可带走·可分享
你的筑基出师凭证 + 把整袋锦囊打包成你的私人模板库
📌 文件随课更新:每上一课,对应物料就会出现在这个文件夹里。第 3 课的 AGENTS.md 家规,建表之后还会被法器回头更新(把最新表结构交底进去)——这正是「交底优先」铁律的落地,所以你的锦囊是活的,会跟着站一起长大。

哪些能分享(发圈 / 发群不踩坑)

放心分享:立项卡、装环境清单、git 速查、部署清单、固元体检表、换主题复刻清单、出师帖——这些是方法和流程,分享出去只会显得你专业,不会泄露任何秘密。

代码 / SQL 模板也能分享给同学一起学——它们是通用骨架,不含你的真实数据和钥匙。

🚫 永远不要分享:你的 .env 文件本体、任何真实钥匙(尤其 service_role)、Supabase 后台截图里没打码的地址和密钥。模板可以传,钥匙不能传。

💡 可发圈的一句话:「上了 18 节课,我手里多了一整套自己的全栈建站模板——换个主题,几天就能再做一个会员站。」
🌿 囊中渐满,便是道行渐深。每装进一件锦囊,你离「能独立起一座站」的那天,就近一步。
作品墙 · 出师者的真站
学员亲手做出、真实上线、能注册能收费的站。
筑基出师
家庭菜谱会员站
家人注册后能收藏菜谱、上传做法,付费解锁进阶菜单。
— 林阿姨
筑基出师
面试题库 Pro
免费题试读,会员解锁全部题解;激活码一兑就开通。
— 小周
筑基出师
独立约拍下单站
客人在线下单、付定金,后台管订单——一个人跑通收款闭环。
— 阿哲
筑基出师
同城宠物寄养
寄养主发布档期、客人在线预约付定金,后台一眼看排期。
— 糖糖
筑基出师
考研笔记会员站
免费试读三篇,会员解锁全部精校笔记与押题。
— 阿凯
筑基出师
手作皮具下单台
展示作品、接定制单、收定金——独立手作人的小前台。
— 老周
出师后,把你的站挂上墙
完成出师大典即可提交你的真站链接,展示给后来的同修。
此阁正在锻造
这一处尚在炉中——还没到开炉的时候。等它成器,会先在你的洞府里知会一声。
迷途
此处云深不知路
你寻的这一页不在洞天之内——也许链接抄错了一个字,也许它还未开辟。
🔒

这一课,登录后免费解锁

14 天外门试炼全程免费 —— 注册一个道号就能解锁全部课程,不收费、不要手机号。有了道号,你的修行进度也能存下来。

登录 · 入外门

邮箱登录,会话由 Supabase 托管。你的密码不会存在本站前端。
邮箱确认 安全重发 机器人防护
受 Cloudflare Turnstile 保护,用于拦截批量注册。

解锁内门 · 输入激活码

报名内门付款后会收到一串激活码,填进来即可成为内门弟子。