千里之行,始于一页
第一天不学语法、不装软件、不碰终端。只做一件事:让桌面上出现一个能打开、能改的 index.html。
开页大吉,只是第一程
第一天不学语法、不装软件、不碰终端。只做一件事:让桌面上出现一个能打开、能改的 index.html。
这门课不只是教学站——你正在用的这套会员渡口,就是它带你亲手造的。
不做开局劝退,但也不藏。下面是你跑通这门课,可能真要花的每一笔。
# 第 1 课 · 内门初窥 · 法器换代 + 旧站新渡
你免费课做出来的那个站,现在住在 GitHub Pages 上。它很好,但它只能放「死页面」——能看,不能登录、不能存数据、不能收钱。
筑基课要把它升级成一座会呼吸的真站:能注册、能存内容、能收费。但那需要一块能跑「后端」的新地基——GitHub Pages 撑不住。
所以今天第一件事,不是学新东西,而是搬家:把你现成的站,搬到一个能长出后端的新渡口(Cloudflare Pages 或 Vercel)。全程用网页点鼠标,一行命令都不用敲。搬完,你立刻就有一个新的在线链接——今天就能发朋友圈。
你要做的站,本质是一个「注册才能进、付费才能解锁」的会员站。先想清楚:你这座站卖什么?
用三把尺子挑一个主题:
参考菜单(任选其一,以后能换):面试题库 · AI 咒语库 · 素材下载站 · 居家健身计划 · 宝妈辅食食谱 · 考证刷题卡 · AI 小工具 · 短视频选题灵感库。
打开你电脑,找到免费课最后做的那个站的文件夹——就是里面有 index.html 的那个文件夹。
index.html 能在浏览器里打开你的站。打开浏览器,进 Cloudflare Pages(本课主线,推荐):访问 pages.cloudflare.com,点注册/登录。你可以直接用 GitHub 账号一键登录(免费课你已经有 GitHub 账号了)。
在 Cloudflare Pages 里选「上传资源 / Direct Upload」方式(不连仓库的那种,最省事):把第二步那个文件夹整个拖进上传框,给项目起个名字,点部署。
等进度条跑完(出现一堆滚动文字、几十秒到一两分钟,是正常的)。
https://你的项目名.pages.dev 的在线链接。掏出手机,在手机浏览器里打开那个 .pages.dev 链接。
最后花两分钟,把这门课的钱看个大概——省得你边学边怕被割。详细的台账在第 3 课会带你一笔笔算,买课前的「诚实成本告知书」也写清了,这里只给你一个总览:
【认主咒】· 让法器认识你要做的站
【...】 里换成你自己的主题,其余一字不改。现象:拖上去部署完,打开是一片空白 / 显示 404
index.html 不在根目录。index.html 的那一层文件夹内容重新传一遍——确保 index.html 就在最外面,不要多包一层。现象:不知道该传哪个文件夹
index.html,它在哪个文件夹里?现象:注册新渡口时卡在验证 / 页面打不开
.pages.dev 或 .vercel.app),手机能打开看到我的站你这一课赚到的,不只是站上多了个在线链接——你还拿到了一件能反复用的东西:一张定下你这座站「魂」的立项卡。以后做第二个站、帮朋友、接私单,照着它重填一遍,几分钟就能立项。
../takeaways/01-lixiang-ka.md。怎么用:把里面的 【方括号】 换成你自己的,填空即用;三把尺子全勾上才算选对;不会填就把整张卡发给法器,让它给你两个例子选。加练:把你的新链接发给一个朋友,让他手机打开看看。第一次有人在「你自己的网址」上看到你的作品,感觉不一样。
下一课预告:站搬好了,但它现在还是个不会呼吸的凡胎——能看,不能动。
下一课,请新法器入炉。你会装上筑基期的本命法器(Codex),亲眼看它读懂你的项目、自己改文件、自己跑起来。
别怕那个黑窗——命令行不咬人,它只是等你开口。
# 第 2 课 · 请器入炉 · 命令行不咬人
上一课你把站搬上了新渡口,但那站还是个不会动的凡胎——能看,不能改、不能长后端。
要给它加登录、加数据库、加收款,你需要一个能直接读你的项目、改你的文件、替你跑代码的助手。这个助手就是 Codex CLI(命令行版的 Codex)——本课要请的本命法器。
请它,要做三件事,就这三件,做完就过关:
Windows 自带这个黑窗,叫 PowerShell,不用另外装。打开它:
powershell(拼音输入法记得先切回英文)。打开后,你会看到一个深蓝色或黑色的窗口,里面有一行字,结尾是一个闪烁的光标,等着你输入。
PS C:\Users\你的用户名>,光标在后面闪。这就是黑窗,你已经站在跟法器对话的门口了。法器 Codex 不能凭空运行,它要踩在一个叫 Node 的底座上。我们用 Windows 自带的安装器一句话装好——复制下面这行,右键粘进黑窗,回车:
回车后会跑出一堆滚动文字、可能停顿几十秒到几分钟(在下载安装,正常)。中途如果黑窗问你「是否同意协议 [Y/N]」之类,打一个字母 y 再回车即可。
Successfully installed(成功安装)的字样,光标重新开始闪、等你输入。winget,先别重装,直接跳到第 5 区块 🆘 的对应现象,那里有备用装法。重新打开的新黑窗里,复制下面这行,右键粘贴,回车:
v22.11.0 的版本号(数字可能不同,只要是 v 开头的一串数字就对了)。这一行版本号,就是你今天的第一块硬里程碑——底座装上了。node 不是内部或外部命令):这是本课最常见的一道红屏,几乎人人都撞。不是你装坏了,八成是「装完没重开黑窗」。别重装、别慌,直接去第 5 区块 🆘「现象:黑窗说 node 不是内部或外部命令」,照急救话术做一遍,基本都能过。底座有了,现在请法器本体。复制下面这行,右键粘进黑窗,回车:
又会跑出一堆滚动文字(在下载,正常),可能要等一两分钟。中途出现黄色的警告文字(warning)不用管——黄字是提醒、不是报错,只有红字才需要处理。
跑完后,和第二步一样,关掉黑窗、重新打开一个新的(让系统认得新装的法器)。
npm 不是内部或外部命令,跳第 5 区块 🆘 对应现象。在新打开的黑窗里,复制下面这行,右键粘贴,回车:
codex-cli 0.x.x 的一串数字)。法器本体已经入炉——这是你今天的第二块硬里程碑。到这一步,你今天的「保底过关线」就已经踩到了。现在让法器醒过来。在黑窗里复制这行,右键粘贴,回车:
第一次启动,它可能会问你几个设置问题(比如选一个主题配色、问你信不信任当前文件夹),看不懂就一路按回车选默认即可。启动成功后,黑窗会变个样子——底部出现一个可以打字的输入框,等你跟法器说话。
在这个输入框里,用中文打字(这次是你自己打,不是粘贴命令),打这一句,回车:
法器会说话还不够,得看它真能动你的电脑。还在刚才那个 Codex 输入框里,用中文打下面这句(把咒语卡里的话复制进去也行),回车:
法器会想一下,然后可能会问你「是否允许它创建/修改文件」——这是它在守规矩、动手前先问你一声。看到这种询问,回复「允许」或按它提示的同意键(通常是回车或打 y),放它干活。
【点火咒】· 确认法器醒了(第六步用)
【动手咒】· 让法器在桌面建文件(第七步用)
[方括号] 里可以换成你想要的文件名和内容,不换就用默认值。最后一句让法器用人话回报它干了啥,这是你看得懂它的透明层,建议保留。现象:黑窗飘出一整片红字,看不懂,慌了
Successfully(成功)、already installed(已装过)这类词——有的话其实是成功了。现象:黑窗说 node 不是内部或外部命令(或 codex / npm 不是内部或外部命令)
node -v(或 codex --version)。九成情况下,重开一次就好了。④ 如果重开三次还不行,重启一次电脑再试——重启是最彻底的刷新。现象:装到一半卡住不动了 / winget 用不了 / 下载特别慢
winget 这个安装器。winget 用不了:改用官网装 Node——浏览器打开 nodejs.org,下载页面正中那个绿色「LTS」按钮对应的安装包,双击,一路点「下一步 / Next」装完,再重开黑窗跑 node -v 验货。③ 装好 Node 后,第四步那行 npm install -g @openai/codex 照常跑。现象:法器要登录 / 要 API Key / 转圈不回话 / 报连接错误(第六、七步卡住)
codex --version 能出版本号),只是法器还没「充上算力」——它要连一个供应商才能真干活。node -v 有版本号 + codex --version 有版本号。这两个版本号你都拿到了,今天就算出关,登录卡点带着它进第 3 课,那一课会手把手带你点亮法器。(如果你连「点火咒」那一步法器愿意启动、进到输入框都没做到,也没关系,第 3 课会重新带一遍。)node -v / 现在它回我 node 不是内部或外部命令 / 我希望它回我一个版本号。」node -v,黑窗回了我一个 v 开头的版本号(底座装好了)codex --version,黑窗回了我一个 Codex 版本号(法器本体装好了)——到这两条,今天的保底过关线已踩到你这一课赚到的,不只是「黑窗里装好了法器」——你还攒下了一件以后换电脑、帮朋友、隔半年再起新站都能直接翻出来照着点的东西。
node -v、装 Codex、点火唤醒、重开黑窗、报错三句话全在上面)。文件:../takeaways/02-装环境清单.md。怎么用:照单点——上半页一项一项勾,下半页要敲的命令整行复制、右键粘进黑窗回车;卡住了就翻到最后「救急」那段照着做。最底下留了几个 【方括号】,把你验出来的版本号填进去,就成了你自己的「装机留底」。加练:让法器再帮你建一个文件试试手感——在 Codex 输入框里用中文说「请在桌面建一个叫『今日笔记.txt』的文件,写上今天的日期」,看它问没问你「是否允许」、看它建得对不对。多来一两次,你会发现「跟法器说人话、它替你动手」这件事,比你想的简单。
下一课预告:法器请回来了,能说话、能动手——但它现在还没充上算力(你刚才如果卡在「要登录」,就是这个原因)。
下一课,用 cc-switch 给法器接上大陆能用人民币付的算力中转,把今天卡住的登录一次打通。我们还会带你做一张灵石台账,把这门课唯一真要花的那笔钱(悲观 ¥30–80)算到明明白白,并教你设好封顶、不超支——配好之后,第一次让法器改你那个真站。
# 第 3 课 · 灵石不外流 · cc-switch 配法器 + 法器改你的真站
上一课你装好了法器(Codex),也让它在桌面生成过一个文件,证明它活着、听你的。但有两件事还没解决:
干这两件事用的工具叫 cc-switch——一个开源的桌面小工具(系统托盘里一个图标,右键就能切)。
配好之后,今天还有一个爽点:第一次真正命令法器去改你第 1 课那个真站——它会读你的项目、自己改文件、改完用人话告诉你「我动了哪个文件、你怎么验证」。你刷新浏览器,就能看到站变了样。
第 1 课「灵石速览」给过你一个总览。今天你正要掏钱配供应商了,所以把账一笔笔摊开——省得你边充边慌。
正式动手前,花一分钟自检——确认你绕开了所有海外门槛:
cc-switch 是个普通的桌面软件,像装微信一样装。
让法器帮你确认下载地址(防止下到假货):打开 Codex,把下面 📜 咒语卡里的【取渡口咒】整段发给它,让它告诉你 cc-switch 的官方 GitHub 下载页,并提醒你认准官方仓库(避免装到山寨)。
拿到官方下载页后:
.exe 或 .msi)。^ 才看得到)。中转供应商 = 一个大陆能直连、能用微信/支付宝充值的服务,它替你把请求转给 AI 原厂。你充钱给它,它给你一把「钥匙」(API Key,一长串字符)。
操作:
sk-xxxxxxxx...),并且账户里显示有余额(比如 ¥30)。回到 cc-switch:
这一步是反被割的护栏,务必做:
A. 设用量封顶(在中转供应商后台)
登录中转供应商后台,找到「用量上限 / 消费限额 / 封顶」一类的设置(不同供应商叫法略有差异),设一个你能接受的上限(比如「单月 ¥50 封顶」或干脆靠「只充小额、充完即止」自然封顶)。
B. 钥匙安全三句心法(记下它)
Codex 是本课主力。但 cc-switch 里顺手也能给 Claude Code(辅助法器)配上同一个供应商,留作备用——万一哪天 Codex 那条线卡了,你有个后手。
操作和第五步几乎一样:在 cc-switch 里切到 Claude Code 栏,新增一个供应商配置,把同一个接口地址 + 同一把钥匙(或供应商为 Claude 单独给的那把)填进去,保存。
万事俱备。现在做这门课第一件真正激动人心的事——命令法器去改你第 1 课部署上线的那个真站。
index.html 的那个)。[方括号] 要你填一句想改的小文案)。法器改完后,会用人话回你一句类似:「我修改了 index.html 文件,把首页标题从 A 改成了 B,你可以刷新浏览器看看。」——这就是「看得懂」透明层:你不必读代码,但它会告诉你它动了哪个文件、你怎么验证。
index.html 打开的那个就行;上线版要等下一课学会部署才会更新)。刚才那条【小改一处咒】之所以一次就成,不是因为它是一句"神咒"、是因为它把话说清了——说清了改哪(index.html)、改成啥、只改这一处、改完怎么验证。法器没得猜,就不会跑偏。
这里要点破一个最值钱的认知:咒语不是背的,是写的。 你不需要一本"100 条神级提示词"去抄;你需要的是——看见自己写的一句模糊话,当场把它改具体的能力。改的招数永远是同一个:「反例 → 正例」。
❌ 反例(让法器猜):
✅ 正例(法器不用猜):
两句想做的事差不多,但右边把"哪里、改成啥、别动啥、怎么验"都说死了——这就是你刚才那条咒灵的原因。
两张能一字不改直接发的"杀手卡",今天先认个脸,后面课会反复用到:
这两张完整可复制的整段话,加上 4 组"反例 → 正例"对照,都在锦囊卡里:../takeaways/提示词craft卡.md。今天不用全记,先知道"咒语是写的不是背的"这一句,就够你受用整门课。
提示词craft卡.md 取。法器认你了,但它每次接管你的项目,都是从零开始的——它不会自动记得「我是零基础」「要小步改」「不许编」。上一步你那条【小改一处咒】里特地写了「只改这一处、改完用人话告诉我、先别上线」——这些其实就是你的规矩。难道每条咒语都得把这套规矩重抄一遍?太累了。
有个一劳永逸的办法:把规矩写进一份「家规」文件,放在项目根目录,法器每次都会先读它。 这份文件叫 AGENTS.md。
index.html 那一层)里的一张「家规纸」。法器(Codex)每次接管这个项目,第一件事就是读它——所以你的规矩、禁区、当前表结构只写一次,它就一直记得,不用每条咒语都重复三铁律。AGENTS.md;Claude Code 读的是同名同内容的 CLAUDE.md,两份内容一模一样,只是文件名不同。)操作(全程让法器代劳,你不写命令):
../takeaways/AGENTS.md 通用模板,把里面的 [方括号] 按提示填成你自己的(你的主题、你是谁、三铁律照抄、禁区照抄)。填好的内容存到记事本里备用。AGENTS.md 文件,内容就是你填好的那份。AGENTS.md,以后我每次接手都会先读它。」AGENTS.md 里——这正是三铁律里「交底」的落地。从此无论隔多久、换哪个法器接管,它一读家规就知道你的库长什么样,不会瞎编字段。AGENTS.md 文件,双击能打开、里面是你填好的家规(你的主题 + 三铁律 + 禁区)。从这一刻起,你不用每条咒语都重复「小步改、别编、说人话」了——法器已经记在心里。[方括号] 是要你自己填的地方,其余照抄。【取渡口咒】· 让法器帮你找到 cc-switch 官方下载页(第三步用)
【小改一处咒】· 第一次让法器改你的真站(第八步用)
【立家规咒】· 让法器在项目根目录创建 AGENTS.md(第九步用)
[方括号] 要填——填一句你想改的小文案(标题、欢迎语、按钮字)。其余一字不改。【取渡口咒】整段照发,无需填空。【立家规咒】里的 【...】 替换成你按 ../takeaways/AGENTS.md 模板填好的家规全文,其余照抄。现象:在 cc-switch 里切换了供应商,可法器还是用旧的 / 还是报海外连不上
现象:法器报错 401 / Unauthorized / invalid api key(钥匙无效)
现象:我担心这把钥匙泄露 / 截图发出去会不会被盗刷
现象:法器改完站,我刷新浏览器却没看到变化
index.html,不是上一课部署到网上的那个链接——线上版要下一课学会部署才更新)?② 浏览器是不是缓存了旧页面?index.html 打开(或在已打开的页面按 Ctrl + F5 强制刷新)。还看不到,就把下面的「报错三句话」发给法器问它。AGENTS.md 家规(主题 + 三铁律 + 禁区),知道法器以后每次接手都会先读它、不用再每条咒语重复三铁律你这课赚到的不只是站上多了能改的本事,还有两件能反复用一辈子的东西——尤其那份家规模板,是整门课的「定海神针」。
../takeaways/AGENTS.md。怎么用:复制到你项目根目录(和 index.html 同一层),把里面的 [方括号] 按提示填成你自己的(主题填空、三铁律和禁区照抄),填空即用。从此你不用每条咒语都重抄三铁律——法器一接手就记得。建表后再叫它把表结构交底进去,这份家规会随项目一起长大。(Codex 用 AGENTS.md,Claude Code 用同内容的 CLAUDE.md,模板里有说明。)../takeaways/03-cc-switch速查.md。怎么用:配的时候摊开对着填(接口地址 / 钥匙 / 当前供应商三件套),以后想换供应商也照这张查,复制即用。加练:再让法器改一处别的小文案(比如换个按钮文字、改个副标题),熟悉一下「我动嘴、它动手、我刷新验证」这个节奏。每多用一次,你就少怕它一分。
下一课预告:法器现在能改你的站了——这是好事,也是风险。它一手能改对,也一手能改坏。改坏了怎么办?
下一课,给你的项目立一道「渡劫回档」:把它交给 GitHub 看管。我们会故意把站改坏一次,再用一句话一键回到改坏之前——从此你让法器放手大改也不怕,改崩了,一句话就能回到上一个境界。
# 第 4 课 · 立档存真 · 把项目交给 GitHub 看管
上一课,你已经让法器(Codex)改动过你的真站——它能读你的文件、改你的文件。这很爽,但也藏着一个让所有新手半夜惊醒的恐惧:
「万一它改坏了,我怎么回去?」
今天就解决这个恐惧。你要给项目装上一个叫 GitHub 的"时光回廊"(专业说法叫版本控制)。它干一件事:每次你说"存个档",它就把项目当前这一刻的样子完整封存一份;以后不管改成什么样,你都能一句话回到任何一个存过的档。
具体今天做三件事:
跑通这一遍,你心里那块石头就落地了:从今往后,每过一道大关,我们都存一个档;改坏不怕,回得来。 这门课后面要给站加登录、加数据库、加收款,越改越大胆,靠的就是今天这道保险。
打开你上一课用的那个法器(Codex)窗口,确认它已经"接管"了你的项目文件夹(就是免费课那个含 index.html 的文件夹,上一课法器已经在里面改过文件)。
如果法器窗口关了,按上一课的方法重新打开它,让它重新进入你的项目文件夹。
把这句话发给法器,确认它看得到你的项目:
index.html)。说明法器和项目都在位,可以开始立档了。现在请法器干本课最关键的活:把你整个项目第一次推上 GitHub。你一行命令都不用敲,全部由法器代管。把下面这段(📜咒语卡里的【立档咒】)完整发给法器:
法器收到后,可能会:
github.com/你的用户名/仓库名 的地址。.git 文件夹),把当前所有文件记成了"第一个存档",再把这个存档上传到了 GitHub 云端那个保险柜。以后每次"存档",都是往这个账本里再记一笔,旧的那笔不会丢。光听法器说还不够,要亲眼确认存档真的上去了。打开浏览器,进 github.com,登录后找到刚才那个仓库(首页或你的头像菜单里能找到),点进去。
index.html 等),和你电脑上的一模一样。这就是云端那份存档,谁也删不掉你电脑上的,你也删不掉云端这份——双保险。现在做一件你以前绝不敢做的事:故意把站弄坏。因为你有存档了,坏了也能回来——这一步就是为了让你亲身体验后悔药的味道。
把下面这段(📜咒语卡 · 【演练改坏咒】)发给法器,让它故意搞坏你的站:
法器改完后,双击你电脑上的 index.html(或刷新你浏览器里打开的那个本地页面)看看。
现在念出本课的"复活咒"。把下面这段(📜咒语卡 · 【回档咒】)发给法器:
法器会从存档里把"好的版本"取出来,覆盖掉被改坏的文件。改完后,再双击 / 刷新你的 index.html。
最后花一分钟,把今天最重要的一条规矩刻进脑子里:
为什么?因为今天的回档之所以能成,是因为你事先存了档(第二步)。存档就像游戏里的存盘点——你存得越勤,万一后面哪一步改崩了,你能退回去的位置就越近,损失越小。后面第 6、10、13 课这些大关,我们都会在结尾提醒你存一个档。
存档其实就一句话,你已经会了——就是 📜咒语卡 · 【存档咒】,过关时发给法器即可。
【立档咒】· 第一次把项目推上 GitHub(对应第二步)
my-member-site)。【演练改坏咒】· 故意搞坏站,用来演练回档(对应第四步)
【回档咒】· 一句话把项目恢复到上一个存档(对应第五步,也是以后救命用的)
【存档咒】· 每过一道大关,顺手存一个档(对应第六步,日常用)
[...] 换成你刚做完的事的一句话描述,其余不动。现象:法器推送时提示要登录 / 要授权 / 要 GitHub 账号验证
它好像在让我做 GitHub 登录或授权,但我不知道该点哪里、填什么。请你用大白话一步一步告诉我现在屏幕上该做什么,每次只让我做一件事。
``现象:法器说"推送失败 / push 被拒绝 / 远程仓库有冲突"之类
推送失败了。我猜可能是 GitHub 那个仓库不是空的。请你帮我看看是什么原因,并用最稳妥的方式帮我把项目推上去,过程你来代办,每一步先用一句话告诉我你要干什么。
``现象:回档之后,站还是坏的 / 没恢复
index.html 打开;如果还是坏的,把这句发给法器——
我执行了回档,但站看起来还是坏的。请你帮我确认:第一个存档到底存上了没有?现在的文件和那个存档相比,差在哪里?请把它彻底恢复成我第一次推上 GitHub 的那个版本。
``你这一课赚到的,不只是给站装上了「时光回廊」——你还带走一张能反复用一辈子的东西:git 存档 / 回档咒语速查卡。
../takeaways/04-git-cundang-suvcha.md。怎么用:复制即用——以后任何项目(做第二个站、帮朋友、接私单),改对了发【存档咒】,改崩了发【回档咒】,想看存过哪些档发【查历史咒】。把这张卡收进你的「锦囊袋」,它是你随身的后悔药。加练:再走一遍"小循环"练手感——让法器随便改点东西(比如改个标题文字),然后发【回档咒】把它收回来。多走一两遍,"改坏不怕"这件事就从"道理"变成了你身体里的"肌肉记忆"。
下一课预告:保险有了,胆子也大了——可你的站到现在还是个没有记忆的凡胎:刷新一下,谁来过、填过什么,全忘光。
下一课,接通灵脉。你会请来一个叫 Supabase 的"云端记忆库",给你的站接上一颗能记住数据的心脏。你会拿到两把钥匙(一红一绿,红的千万不能外传——下一课重点讲),并第一次让你的网页显示出一句来自云端的数据。
# 第 5 课 · 开户立籍 · 接通灵脉 Supabase
你前面那座站,能看、能上线,但它没有记性——刷新一下,什么都不剩。它不能记住「谁注册过」「存了哪些内容」「谁是会员」。
要有记性,就得给它接一个数据库。我们用的是 Supabase——一个免费就能用的「云端数据库 + 登录系统」,是你这门课后面所有功能(注册、存内容、收费)的地基。
今天不建表、不写功能,今天只做一件最关键、也最容易被教程跳过的事:把管道接通,并且亲眼确认水能流过来。
具体三步:
.env 的秘密文件,并锁好它不让 GitHub 看见。打开浏览器,访问 supabase.com,点右上角 Start your project(开始你的项目)。可以直接用你的 GitHub 账号一键登录(免费课你已经有 GitHub 账号了,省得再记一套密码)。
登录后进入控制台(Dashboard),点 New project(新建项目)。会让你填几样东西,照下面对:
填完点 Create new project(创建新项目)。
你的站要连上这口云端灵泉,需要两样东西:灵泉的地址 + 一把钥匙。它们在控制台里。
在左边菜单最下方点 Project Settings(项目设置,齿轮图标)→ 点 API(或 API Keys)。你会看到三样东西,这里是今天最重要的认知,请把下面这张表读两遍:
一句话记住:
.env 秘密文件现在把「地址 + anon 钥匙」交给你的站。它们要写进一个专门放秘密的文件,叫 .env(注意:就叫这个,前面一个点,没有别的名字)。
这一步交给法器代你建文件,你不用手动找路径、不用敲命令。打开 Codex,把下面【接灵脉·建 .env 咒】整段发给它(咒语卡里有完整版,记得先填空)。
法器会做三件事,做完会用人话回你一句:
.env 文件,把你的地址和 anon 钥匙填进去;.env.example(传家底单,下面解释);.env 写进 .gitignore(护身符,下面解释)。.env,写入了你的 Supabase 地址和 anon 公开钥匙;同时建了 .env.example 作为模板,并把 .env 加进了 .gitignore,它不会被上传到 GitHub」。.gitignore「护身符」? 你第 4 课已经把项目交给 git 看管了。.env 里有你的钥匙,绝对不能跟着代码上传到 GitHub(那等于把钥匙挂网上)。.gitignore 是一张「黑名单」——写进去的文件,git 会自动当没看见、永远不上传。法器已经把 .env 加进这张黑名单了,这是保命的一步。.env.example「传家底单」? .env.example 是 .env 的空白模板——它只写「这里需要填地址、这里需要填钥匙」,但不填真值。它会上传到 GitHub(因为它没有秘密)。作用:以后你换电脑、或者别人帮你弄,一看这张「传家底单」就知道「哦,这个站需要填这两样东西」。真钥匙在 .env(不上传),清单在 .env.example(上传)——这套搭配你记住,后面每个全栈项目都这么干。.env 里。等第 14 课把站真正部署上线时,线上平台那边也要再填一遍同一套钥匙(平台读不到你电脑上的 .env)。所以这套秘密是「两处同一套」:本地 .env 一处、线上平台一处。现在不用做线上那处,只要心里有这根弦——第 14 课如果部署成功却白屏,99% 就是线上那处没填。现在最关键的一步:确认管道真的通了。我们不靠猜,做一个自检页让它自己说。
把咒语卡里的【自检页·会说话咒】整段发给 Codex。它会在你项目里建一个自检页面,这个页面的规矩是:
法器写完会用人话告诉你「自检页建好了,文件叫 xxx,怎么打开看」。
(它会告诉你文件名/地址) 查看」。先别急着看通没通,下一步才看——这一步只要确认文件建出来了、法器告诉你怎么打开就算成功。按法器告诉你的方式打开自检页(通常是在浏览器里打开一个本地地址,比如 http://localhost:xxxx,法器会给你确切的)。
两种结果,都正常,都有救:
结果 A——绿色「灵脉已通」+ 一句从云端读回来的话 🎉
恭喜,管道通了。那句话是你的站第一次从云端真的读回来的数据——这就是本课的微里程碑。
结果 B——红色,写着断在哪一步
这不是失败,这是自检页在干它的活。 红字会告诉你大概问题(地址没填好 / 钥匙不对 / 项目睡了)。照着它的提示,回到下面 🆘 卡住了 对号入座即可。改完刷新页面再看,绝大多数人一两次就转绿。
Supabase 免费层够你整门课用,但有两条边界先告诉你,不是要你现在做什么,是免得以后突然懵:
【...】 是要你填的空,其余照抄。今天两张:一张让法器建 .env,一张让法器做自检页。【接灵脉·建 .env 咒】· 让法器把钥匙安全地写进项目
【...】 换成第二步里你自己的 Project URL 和 anon public 钥匙。service_role 那把红钥匙不要给法器、不要进任何文件。【自检页·会说话咒】· 让法器做一个永不空白的连通自检页
现象:自检页红字写着「连不上 / 地址或钥匙有问题」
.env 里地址/钥匙贴反了。.env 里的 VITE_SUPABASE_URL 和 VITE_SUPABASE_ANON_KEY 是不是有多余空格、是不是贴反了,并告诉我怎么重新确认这两个值。」改完刷新页面再看。现象:自检页一片空白 / 报「key 无效」「Invalid API key」
.env 的 VITE_SUPABASE_ANON_KEY。注意:.env 改完,法器可能让你把本地预览重启一下才生效,照它说的做。现象:Supabase 控制台打不开 / 注册卡在验证 / 一直转圈
现象:以前能连,今天自检页突然报「项目暂停 / Project paused」
.env、打开了自检页;我现在看到红字写『Invalid API key』;我希望它变成绿色的『灵脉已通』。」——这样描述,法器十有八九一次就帮你定位。.env(含地址+anon 钥匙)和 .env.example(空白模板),且 .env 已被 .gitignore 保护、不会上传 GitHub.env 和线上平台是两处同一套秘密」,也知道「免费项目 7 天不用会暂停、控制台一点就能唤醒」.env.example 模板 — 接 Supabase 的「传家底单」空白模板,填空即用。文件:../takeaways/05-env与钥匙速查.md。怎么用:复制其中那段保存成项目根目录的 .env.example,真钥匙永远只填进 .env(不上传),清单留在 .env.example(可上传)。../takeaways/05-env与钥匙速查.md。怎么用:每次进控制台拿钥匙前对照一眼,确认复制的是 anon、不是 service_role,再贴进 .env;截图存手机,下个新项目直接对照。../takeaways/05-env与钥匙速查.md。怎么用:保存成 check.html、填好顶部两行、浏览器打开即可;留作对照法器版自检页的兜底,用完记得删或加进 .gitignore。加练:让法器给你讲解一遍它写的自检页——「请用大白话给我讲讲这个自检页是怎么连上 Supabase 的,哪一行在读 .env、哪一行在向云端发请求。」你不用看懂每个字,但听它讲一遍,下次自检页报红你会更有底。
下一课预告:管道通了,可你的站还不认识任何人——谁来了它都一视同仁,没有「注册」「登录」这回事。
下一课是本阶的大关(★渡劫课):你会让站真正长出邮箱+密码的注册登录,建第一张真表 profiles(名册),并让「有人注册就自动给他立一份档案」。
.env),歇一口气;第二次再做第四步往后(连接 + 自检页 + 读回云端第一句话)。分两次做完全不丢分——稳比快重要。# 第 6 课 · 身份初成 · 注册登录真生效
到上一课为止,你的站已经接通了云端数据库(Supabase),网页能显示云端的一句话。但它还有个大问题:它不认得人。谁打开都一样,没有「你」和「别人」的区别。
一个「注册才能进、付费才能解锁」的会员站,第一块基石就是身份:得让陌生人能注册成你的用户,能登录进来,能登出离开;登录后页面认得他、叫得出他的名字;他关掉浏览器明天再来,不用重新登录。
今天你要给站加上这三样东西:
is_member(默认 false)。这个开关今天只是先埋下,第 11–13 课才会用它来分会员、立付费墙。先去云端把登录方式的开关拨对,再让法器写前端,顺序不能反(不然法器写好了也登不进去)。
打开浏览器,登录你第 5 课注册的 Supabase,进你的项目。左边找到 Authentication(认证)→ Providers(登录方式) 或 Sign In / Providers,确认 Email(邮箱) 这一项是打开(Enabled)的。
同一块区域里,通常还有一个开关叫 Confirm email(确认邮箱) 或 Email confirmation。本课先把它关掉(设为 Disabled / 关闭)——这样注册后不用去邮箱点确认链接就能直接登录,把这道大关的崩溃点先拆掉一个。
现在请出本课主力法器 Codex。把下面 📜咒语卡里的【认主咒·写登录】整段复制给它(记得先把方括号里的内容换成你自己的)。
法器会去改你的项目:加上一个注册框、一个登录框、一个登出按钮,并把它们和 Supabase 的认证接起来。它跑完后,会用人话回你一句类似:「我在你的项目里加了 auth.js(管登录登出)和登录/注册界面,改了首页让它显示登录状态,你现在可以在浏览器里试着注册一个账号了。」
http://localhost:5173 之类的本地地址,它会帮你跑起来)。你在浏览器打开这个本地地址,看到了注册 / 登录的输入框。在那个本地打开的站里,找到注册(Sign up / 注册)入口,用一个你自己的真实邮箱 + 一个你记得住的密码注册。密码建议至少 6 位(Supabase 默认最低 6 位)。
用刚注册的邮箱 + 密码登录。登录成功后,首页应该不再显示「请登录」,而是显示一句「欢迎,xxx」(xxx 是你的昵称或邮箱),旁边有个登出按钮。
如果你的页面还没显示欢迎语,把 📜咒语卡里的【显欢迎咒】复制给法器,让它把「登录后显示欢迎 + 登出按钮」补上。
这是本课的技术核心,也是 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 课起才会用它分会员。」
profiles,里面有一行——就是你自己,email 是你注册的邮箱,is_member 这一列是 false(或不打勾)。is_member 现在全是 false? 因为「会员」是要付费才解锁的。今天所有人都只是「注册用户、还不是会员」——这完全正常。这个开关就是你整座付费墙的总闸,第 11 课给它通电、第 13 课让它「付钱才翻成 true」。今天先把闸装好、确认它默认是关的,就够了。现在做一个小实验:完全关掉浏览器(不是关标签页,是整个关掉),再重新打开,访问你那个本地站。
你会发现——它还认得你,不用重新登录(如果你刚才没点登出的话)。
这背后的东西叫 会话(session)。用人话讲:你登录成功的那一刻,Supabase 给了你浏览器一张「门禁卡」,悄悄存在浏览器本地。以后你再打开站,浏览器把这张卡亮一下,站就认得你了——不用每次重输密码。这张卡有有效期,过期了或你点了「登出」(等于交回门禁卡),才需要重新登录。
本地跑通了,最后一步:把这个能登录的站推到线上,让它变成真·能被陌生人注册的站。
你第 1 课已经会用网页拖拽部署到 Cloudflare Pages 了。本课同样请法器帮你打包好,再用你熟悉的方式部署(连仓自动部署留到第 14 课,今天还用第 1 课那套最省事的方式)。把 📜咒语卡里的【上线咒】复制给法器,它会帮你把项目打包成可部署的成品,并告诉你「传哪个文件夹上去」。
.env 里填的那两把 Supabase 钥匙,线上平台也要再填一遍(同一套秘密、两处都要填,这就是第 5 课埋的「env 双轨」)。具体照「🆘卡住了」的「现象:上线后白屏」那条做。第 14 课会把这件事讲到底,今天先知道「白屏 = 99% 是钥匙没填到线上」。profiles 名册里能看到刚注册的新行。[ ] 里的内容要换成你自己的,其余照抄。【认主咒 · 写登录】· 让法器给站加注册/登录/登出
【立名册咒】· 建 profiles 表 + 注册自动建档触发器
【显欢迎咒】· 登录后显示「欢迎,xxx」(第四步若没自动出现欢迎语时用)
【上线咒】· 打包部署上线
现象:注册/登录点下去,提示「Email not confirmed(邮箱未确认)」或要我去邮箱点链接
现象:登录时提示「Invalid login credentials(账号或密码错误)」,但我确定没输错
现象:建 profiles 表 / 触发器时报错(已存在、触发器冲突、权限不足等)
我刚才执行你给的建 profiles 表和触发器的步骤,报了这个错:[把完整报错粘到这里]。
请你检查是不是表或触发器已经部分存在,
用「如果不存在才创建」的安全写法重做一遍,不要丢掉我已经注册的用户,
做完告诉我现在 profiles 表和触发器都正常了没有。
``现象:登录后页面没显示「欢迎」,或登录完一刷新又变回「请登录」(会话掉了)
我登录成功后,页面没显示欢迎语(或者一刷新就退回未登录状态)。
请检查是不是页面加载时没有读取 Supabase 当前会话(session)、
或没有监听登录状态变化。请修好「刷新/重开后仍保持登录」,并告诉我怎么验证。
``现象:上线后打开是一片白屏 / 报「连不上数据库」
.env 里那两把 Supabase 钥匙,线上平台后台也要再填一遍(同一套秘密、两处都要填,这是第 5 课的「env 双轨」)。.env 里的那两把钥匙(URL 和 anon key)原样填进去,保存后重新部署一次。(第 14 课会把这套讲到底。)profiles 名册表里有我这一行,is_member 是 false你这一课赚到的,不只是站上多了「能登录」这块功能——还有一件能反复用的东西:一套「用户名册 + 邮箱密码登录」的成品模板,以后做任何会员站都能直接搬。
../takeaways/06-profiles与登录模板.md。怎么用:复制即用(SQL 贴进 Supabase 跑一次,代码接到你的按钮上)+ 填空即用(只需填两把 Supabase 钥匙)。最省事的办法是把这个文件整个发给法器,让它照着模板建好表、接好登录——你看得懂大意即可,不用自己敲。加练 1 · 让别人来注册一个:把你的线上链接发给一个朋友,让他用自己的邮箱注册。然后你去 Supabase 的 profiles 名册里看——多了一行陌生人。第一次有「不是我」的真实用户进你的站,那种感觉很不一样。
加练 2 · 把「确认邮箱」开回来(进阶安全玩法):今天为了跑通,我们关了「确认邮箱」。等你想让注册更正规(防止有人乱填别人邮箱),可以回 Supabase → Authentication 把 Confirm email 打开——之后注册就会先发一封确认邮件,点了链接才算注册成功。
下一课预告:你的站现在认得人了,但它还没有东西可看——注册进来空荡荡的。
下一课「立库藏珍 · 为产品造一张表」,我们给站造第二张表 contents(藏经阁):这是你真正要卖的内容住的地方。从下一课起,你这座站才开始有货。
# 第 7 课 · 立库藏珍 · 为产品造一张表
contents 表(站主一人发布、字段一栏看清),并把这张表的结构原样交底给法器,从此「控制台」和「代码」用的是同一份说明书第 6 课你给站装上了「身份」——能注册、能登录,后台 profiles 表里每注册一个人就自动多一行。但你的站现在还没有任何「内容」:用户登进来,看到的是一片空。
筑基中期(通经脉)这几课,就是把「内容」这条经脉打通。今天是第一步,也是最关键的一步:为你的产品造一张专门装内容的表。
这张表叫 contents(你可以理解成你这座站的「藏经阁」)。你第 1 课定的主题——面试题库、辅食食谱、AI 咒语库……——里的每一条,将来都是这张表里的一行。
今天有一个容易被忽略、但极其重要的动作:表建好后,你要把这张表的结构(有哪些列、每列是什么类型)原样交给法器存进项目。这一步叫「交底」。它解决一个会反复坑新手的坑——控制台里你建的列名,和代码里法器写的列名对不上(比如你建的是 title,法器却猜成 name,结果页面一片空白还查不出原因)。交底之后,「控制台」和「代码」共用同一份说明书,这类「列名对不上」的鬼故事就基本绝迹。
profiles 表的那个),② 电脑上你的项目文件夹 + 法器(Codex)。建议把 Supabase 控制台和法器窗口都打开备用。打开浏览器,进入 Supabase 控制台,选中你这门课用的那个项目(就是第 6 课建 profiles 表的同一个项目,别新建项目)。
在左侧菜单找到 SQL Editor(图标像一段代码 </>,中文界面叫「SQL 编辑器」),点进去,点 New query / 新建查询,你会得到一个空白的输入框。
profiles 表了,这次轻车熟路。建表的指令我们让法器替你生成(下一步),你只负责粘贴和点运行——你不用自己写一个字的代码。切到法器(Codex)窗口,把下面 📜 咒语卡①「建库咒」 整段发给它(记得先把 【...】 里换成你第 1 课定的主题)。
法器会回给你一段 SQL 建表指令(一段以 create table 开头的文字)。你不用读懂它,但请确认它末尾附了一句人话说明——告诉你这张表有哪些列、每列装什么(这是法器的「透明层」,看不懂修仙没关系,但要看得懂它干了啥)。
create table ... 的 SQL(在一个带「复制」按钮的代码框里);② 一段大白话,逐列解释这张表装什么(比如「title 是标题、游客也能看;body 是正文、将来只有会员能看」)。回到第一步那个 Supabase 的 SQL 编辑器空白框,把法器给你的那段 create table ... SQL 整段复制粘贴进去,点右上角 Run / 运行。
在 Supabase 左侧菜单点 Table Editor / 表编辑器,你会看到表列表里多出了一张 contents。点开它,上方会一列一列列出这张表的「格子」:id、title、summary、body、cover、is_free、sort_order、created_by、created_at。
contents,点开能看到上面这一排列名(顺序可能略有不同,但 title、body、is_free、created_by 这几个关键列必须在)。表里现在还没有任何数据行,是空的——这是对的。contents 表建成 · 字段一栏看清。title 立于阁门、人皆可见;body 深藏阁内、留待有缘(会员);is_free 是那道试读与秘藏的分界线——今日只立其形,启用留待后课。title 标题 / summary 摘要(试读用)/ body 正文(将来只有会员能看全)cover 封面图链接 / is_free 是否免费试读(先建着,第 11 课才真正启用)sort_order 排序用的数字 / created_at 自动记录创建时间created_by 记录是谁建的——默认就填当前登录的站主,这是今天的另一个主角(下一步细说)这一步是今天最有产品味的一步。你要给这张表立两条规矩(同样让法器替你写指令,你只负责粘贴运行):
created_by 默认填当前登录用户)。把 📜 咒语卡②「立规咒」 整段发给法器,它会给你第二段 SQL(开启行级安全 + 写策略锁创建者 + 一条临时读策略)。和第三步一样:复制 → 粘进 SQL 编辑器 → Run。
contents 表,它的名字旁边或设置里会显示 RLS enabled / 行级安全已启用(一个小盾牌或「Enable RLS」已变成已开启状态)。is_free)谁都能读、非免费内容先一律暂挡(那时站上还没有「会员」这个概念,所以先一刀切挡住)。再往后第 11、12 课加上「会员」身份,才把这道门扩成「免费谁都能读、会员能读全部」。每一步都是在今天这道「读门」上继续加固,不是推翻重来。 而「写的规矩(站主才能动)」今天就锁死,以后一直不变。光建好空库不踏实,亲手放一条进去验一下。回到 Table Editor → contents 表,点 Insert / 插入 → Insert row / 插入一行,最少填这几格:
title:随便写一条,比如 测试内容·我的第一条is_free:勾上(或填 true)——当作一条免费试读created_at、id 这类会自动生成)created_by 怎么填:理想情况它会自动填上当前登录你的那个用户 ID(这就是「默认 auth.uid()」的效果)。但在控制台手动插入时,你这会儿的「登录身份」可能和网页前端不同——如果它要求你填 created_by 而你不知道填啥,本步可以先跳过这条手填自测,等第 8 课用前端页面、以真正登录的站主身份写入时,created_by 会自动盖章。控制台手填只是想让你眼见为实,不是必须项。点保存。
contents 表里出现了一行真实数据,title 那一格是你刚写的字,created_at 自动填了当前时间。你的藏经阁,有了第一件藏品。created_by 不能为空 / 违反策略之类——这正是「写规矩」在生效(它要确认是站主在写)。按上面📌的提示先跳过控制台手填,留到第 8 课前端写入即可,不影响今天过关。这一步防的是新手最常踩、又最难查的坑:控制台里你建的列名,和代码里法器写的列名对不上。
做法很简单:把 📜 咒语卡③「交底咒」 整段发给法器,让它把这张 contents 表的结构原样写成一份说明文件,存进你的项目文件夹里(文件名通常是 schema.sql 或 docs/数据库表结构.md 之类,法器会替你建文件、替你写、替你存,你不动手)。
title、body、is_free 这些真实列名来写,不再瞎猜。你和法器从此「看同一张图纸」——这就是专业开发里说的「单一事实源」。第 8、9 课写内容页面时,你会真切感到它「不犯低级错」了。【...】 是要你替换的填空,其余照抄。【建库咒】· 让法器写出「建藏经阁」的指令(对应第二步)
【立规咒】· 让法器写出「阁主才能动 + 临时可读」的指令(对应第五步)
【交底咒】· 让法器把表结构存进项目(单一事实源)(对应第七步)
现象:粘进 SQL 编辑器点 Run,红字报错里有 already exists(已存在)
contents already exists。我想保留已经建好的表,只确认它字段对不对就行。请告诉我:怎么在不删表、不丢数据的前提下,检查现有 contents 表的列是否和你设计的一致?」按它给的检查指令做即可,别急着删表重建。现象:报错里有 type、column、syntax 这类词(字段类型 / 列 / 语法)
现象:建表成功,但站主手动插入一行时,报错 created_by 不能为空 / 违反策略(violates row-level security / not-null)
created_by 会自动盖章、一切正常。今天不影响过关。现象:交底时,法器说「不知道你项目在哪 / 找不到文件夹」
contents 表,点开能看到 title、body、is_free、created_by 这几个关键列你这一课赚到的,不只是站上多了一张能装内容的表——你还揣走了一件能反复用的东西:一套「建表 + 上锁 + 交底」的完整模板。换个主题做第二座站时,照着改几列就能再立一座藏经阁。
本课物料:
../takeaways/07-contents建表模板.md。怎么用(复制即用):整段交给法器(Codex 为主,Claude Code 为辅),让它替你粘进 Supabase 运行;表建好后,把第三段「交底法」发给法器,它会把真实表结构回贴一份存进项目(这正是「交底优先」铁律的落地)。你不写一个字、不用懂每一行。
加练:打开法器替你存的那份「表结构说明文件」自己读一遍(中文部分就行)。试着对照 Supabase 里的表,确认两边列名一字不差。这一眼,就是你第一次以「站主」的视角,看清自己产品的「数据底盘」长什么样——很多人做了半年站都没认真看过自己的表结构,你第 7 课就看了。
下一课预告:藏经阁建好了,可它还空着、用户也看不见。
下一课,落子成形——你会请法器给站加一个「站主后台」,让你在网页上新增内容,并把藏经阁里的内容列出来显示给用户看(增 + 读,C/R)。亲手敲进去一条,刷新页面,它还在——那一刻,你的站才算真正「会记事」了。
# 第 8 课 · 落子成形 · 新增与读取 C/R
contents 表,并自动出现在页面列表里;关掉重开、刷新,它还在。contents 表),今日要往里落下第一子——亲手写一条心法,看它沉入云端,再从云端浮回你眼前。落子无悔,存档为证。上一课,你让法器在云端建好了一张空表 contents(藏经阁)——它现在空空如也,一行数据都没有。
今天要做的,是程序员口中最基础、也最让人有成就感的两件事,合称 C / R:
contents 表。contents 里的所有内容,列在屏幕上给你看。把这俩接通,你的站就第一次「能往里存东西、还能再拿出来」了——这是它从「死页面」变成「活产品」的关键一跳。
打开浏览器,登录你的 Supabase 后台,点左侧 Table Editor(表编辑器),找到上一课建好的 contents 表,点开它。
现在它应该是一行数据都没有的(除非你上一课手动加过测试行)。先看一眼这个「空」的状态——等会儿你发布完,再回来看它「多了一行」,对比最明显,成就感也最强。
contents 表,它的数据区是空的(或只有你上一课加的测试行),列名里有 title、summary、body、is_free、created_by 这些。title=标题(这条内容叫啥)、summary=简介(试读那一小段)、body=正文(完整内容)。其余的 is_free(是否免费)、created_by(谁发布的)现在先不管,后面几课才用到。打开你的法器 Codex(第 2、3 课装好配好的那个),把下面 📜 咒语卡①「落子咒」 整段复制发给它(记得先把方括号里的内容换成你自己的)。
这条咒语会让法器给你的站加两样东西:一个能填内容的表单,和一个把内容列出来的列表。
发完咒语、法器说改好了,对它说一句「帮我把项目在本地跑起来,告诉我打开哪个网址」(或直接用 📜 咒语卡②)。法器会启动本地预览,给你一个形如 http://localhost:5173 的本地网址。
把这个网址复制到浏览器打开。
localhost 是啥? 就是「只有你这台电脑能打开的预览地址」——相当于法器把站先搭在你自家客厅给你试,还没搬到公网。第 14 课才会把它正式推上线给陌生人看。现在它只给你一个人看,放心试、随便填。在表单里填一条真内容(别填「测试测试」,就填你这个站第一条真正想放的内容——比如你主题是「AI 咒语库」,就填一条你常用的提示词):
填完,点「保存 / 发布」。
保存成功后,看页面的列表区域——你刚填的那条内容,应该自动出现在列表里了(标题、简介都在)。
如果没自动出现,手动刷新一下页面(按 F5 或点浏览器刷新)再看。
这一步最重要,别跳过:把整个浏览器标签页关掉,重新打开那个 localhost 网址(或者按 Ctrl+Shift+R 强制刷新)。
如果你刚才填的那条内容还在列表里——恭喜,它不是「暂时显示在屏幕上」,而是真的被写进了云端数据库,下次打开还能读回来。这就是「数据持久化」,是产品和玩具的分界线。
最后,回到第一步打开的 Supabase 后台 → Table Editor → contents 表,刷新一下。
title、summary、body 都对得上。云端确确实实收到了你的数据。contents 表(这叫 insert / 插入);另一段在页面打开时,从 contents 表把所有内容捞回来铺成列表(这叫 select / 查询)。你做的 C 和 R,底下就是这两个动作。[...] 里的内容换成你自己的,其余一字不改。【咒语① · 落子咒】· 让法器给站加「新增 + 读取」
【咒语② · 起灶咒】· 让法器把项目跑起来给你看
现象:页面打开一片空白,或者根本没出现「填内容的表单」
现象:填好点「保存」,毫无反应 / 跳出一串红字 / 列表一直是空白(本课头号卡点)
content、text、name),和你 Supabase 表里真实的列名(title、summary、body)没对齐,于是数据写不进去、也读不出来。column "xxx" does not exist(某列不存在)或 400 / Bad Request。这就是「列名对不上」的铁证。现象:保存成功了,但刷新页面(第六步)内容就没了
contents 表看一眼——如果表里没有你那条数据,说明只是前端假装存了、其实没进数据库。现象:F12 / Console 我没找到 / 不会用
Fn + F12),右边或下边弹出一个带很多英文标签的面板,点其中写着 Console 的那个标签即可。看到的红字就是报错,把红字整行复制下来丢给法器就行——你不用看懂它,法器看得懂。contents 表,亲眼看到多了这一行数据你这一课赚到的,不只是站上多了「能存能读」这块功能——还有一件能反复用的东西:把今天这次成果沉淀成的标准代码模板,下次做新站直接拿来就用。
contents 表(insert)、把内容读出来铺成列表(select)的两段标准代码,配好了「加载中」和「空列表」两种状态。文件:../takeaways/08-增查代码模板.md。怎么用:整段复制 → 交给法器(Codex 为主,Claude Code 为辅),让它按你真实的列名接进内容页文件,你不写一行裸代码。表名 / 列名换成你自己的,即复制即用。加练:多发布 3–5 条真内容,把你的列表填得像点样子(这些以后都能改、能删,今天先不管)。发布时留意——列表是不是越来越长、刷新都还在?这就是你的「藏经阁」在慢慢攒货。
下一课预告:今天你的站能存、能读了(C 和 R),但还差两件事——改和删(U 和 D)。
下一课,改易由心:你会让法器补上「编辑」和「删除」,把内容的「增、查、改、删」四件套(程序员叫它 CRUD)彻底打通,你的内容就完全攥在自己手里了。
# 第 9 课 · 改易由心 · 编辑与删除 U/D
上一课(第 8 课)你已经能新增内容、读取列表(CRUD 里的 C 和 R)。但你一定试过:录错一个字、想改个标题,却只能删了重录;或者多录了一条,根本删不掉——只能眼睁睁看着它躺在列表里。
今天补上剩下两块拼图:
做完,你的内容管理就是一个完整闭环:增(C)、查(R)、改(U)、删(D)四件事齐活。这正是任何一个「能管理内容的真站」最核心的底座。
打开你的项目(Codex 已经在第 4 课接管了它)。先别急着让它加功能——让它先把上一课的「新增 + 列表」那段代码摸清楚,这样它后面加编辑/删除才不会改乱。
把 📜 咒语卡里的 【交底咒】 整段发给 Codex。
contents 表,每条有 title / summary / body 等字段;目前能新增和显示,但还没有编辑和删除」。它复述对了你的现状,就算成功——说明它读懂了,没瞎猜。现在让法器给列表里每一条内容旁边加一个「编辑」按钮。点它,页面上方那个「新增内容」的表单,要自动填进这条的原标题、原简介、原正文——这叫回填。
把 📜 咒语卡里的 【编辑回填咒】 发给 Codex。它改完会告诉你它动了哪个文件、加了什么。
这里有个关键细节,法器会替你处理,但你要看懂:同一个表单,现在要干两件事——
法器的做法是:点编辑时偷偷记住「我正在改的是哪一条的 id」,保存时按这个 id 去更新;没记 id 就当新增。你不用管它怎么记,但你要会验证它记对了没有。
把 📜 咒语卡里的 【保存分流咒】 发给 Codex(如果第二步它已经一并做了分流,这步它会回你「已经处理过了」,那就直接跳到验证)。
现在加「删除」。但删除不能点一下就没——手一滑就删错了,删错的还可能是费半天劲录的内容。所以要加二次确认:点「删除」先弹一个「确定要删除『某某标题』吗?」的确认框,你点「确定」才真删,点「取消」就什么都不发生。
把 📜 咒语卡里的 【删除确认咒】 发给 Codex。
这一步最容易被忽悠,一定要做。有时候法器会偷懒,只把那条从屏幕上藏起来,但数据库里还在——你一刷新它就又冒出来了。我们要确认它是真删了。
删掉一条后,按 F5 刷新整个页面(或者关掉标签页重新打开)。
同理,编辑完也别急着信。改完保存后按 F5 刷新,确认你改的新内容还在(不是只在屏幕上改了样子、数据库里还是旧的)。
闭环跑通了。最后让法器用大白话给你复盘一句:它这一课到底改了哪些文件、编辑和删除分别是怎么实现的。你不必看懂代码,但要听它把「干了啥」说成人话——这是你看得懂的透明层,将来排错有用。
把 📜 咒语卡里的 【交底复盘咒】 发给 Codex。
[某个文件] 里加了编辑按钮和回填逻辑、加了删除按钮和二次确认;编辑走的是 Supabase 的 update,删除走的是 delete;目前还没有任何权限判断,谁都能改删任意一条」。它主动点出了「还没上锁」这个洞——说明它和你认知一致,下一课补锁有的放矢。[方括号] 里是要你按自己情况替换的,其余照发。Claude Code 同款可用,把同一段发给它即可。【交底咒】· 动手前先让法器摸清现状
【编辑回填咒】· 加编辑按钮 + 表单回填
【保存分流咒】· 让保存分清新增还是编辑
【删除确认咒】· 加删除按钮 + 二次确认
【交底复盘咒】· 听它把这一课干了啥说成人话
content 不叫 body),法器在【交底咒】那步会自己读出来并对齐,你不用手动改。现象:点了「编辑」,表单是空的,没有回填原内容
我点编辑后,表单是空白的,没有自动填进这条的原标题/原简介/原正文。
请检查编辑按钮有没有把这条内容的数据带进表单,修好回填。
改完告诉我怎么验证。
``现象:编辑保存后,列表里多出一条重复的(原来那条还在,又冒出一条新的)
我点编辑、改完保存后,列表里多了一条重复的,原来那条没被更新。
说明保存时把编辑当成了新增。请改成:有正在编辑的 id 就用 update 更新那一条,
不要新增。改完告诉我怎么验证编辑不再产生重复。
``现象:删除点了一下就没了,没有弹确认框 / 删错了
我点删除时没有弹确认框,一点就直接删了,容易误删。
请加上二次确认:点删除先弹出"确定要删除『标题』吗?",点确定才真删。
``现象:删除/编辑当时看着成功了,一刷新又变回原样 / 删的那条又回来了
我编辑/删除后当时看着对,但一按 F5 刷新就变回原来的样子(删的那条又回来了)。
说明只改了页面、没真改 Supabase 数据库。
请改成真正调用 Supabase 的 update/delete 改动数据库,确保刷新后结果还在。
``你这一课赚到的,不只是站上多了「编辑 / 删除」两块功能——你还拿到了一件能反复用的东西:一套改 / 删标准代码模板。它和第 8 课的「增 / 查」两囊一合,就是完整的增删改查四件套(CRUD)。以后做第二个站、帮朋友、接私单,换个表名就能复用。
../takeaways/09-改删代码模板.md。怎么用:把整份文件连同一句话发给法器(「按我项目真实的 contents 列名、复用已有连接和列表函数,接进我的内容页」),它替你对齐列名、接进正确文件、复用现成连接,你不写一行裸代码;接好后照文件里的「验收五条」逐项勾。加练:给自己出一道「闭环演练题」——新增一条测试内容(C)→ 在列表里看到它(R)→ 编辑改个标题(U)→ 最后删掉它(D),每一步都按 F5 刷新确认。一口气把 CRUD 四件事走一遍,你会对「我这站真的能管理内容了」有实感。截一张「编辑回填成功」的图,这是你通经脉三层的微里程碑。
下一课预告:闭环是通了,可你有没有发现一件细思极恐的事——
现在任何一个登录的人,都能编辑、删除你站里的任意内容,包括别人录的、甚至将来付费会员才能看的内容。门是开着的,谁进来都能动手脚。
下一课(第 10 课)是这一阶的 ★渡劫关:我们给数据库装上行级安全锁(RLS)——让每个人只能动自己那份,游客连会员专属内容都读不到。
# 第 10 课 · 各守洞府 · 行级安全 RLS
is_member 下一课才加)、不做前端遮罩(第 12 课)、不碰支付上一课(第 9 课)你做完了 CRUD 闭环——内容能增、能查、能改、能删。但你应该还记得我反复提醒的那个故意留的洞:
现在任何一个登录的人,都能改、能删你站里的任意内容。 门是开着的,谁进来都能动手脚。这对一个将来要收费、要放会员专属内容的站来说,是致命的。
今天就来补这个洞。我们用的工具叫 RLS(Row Level Security,行级安全)——它是 Supabase 数据库自带的一道后端门禁。一句话说清它干嘛的:
为什么强调「绕不过去」?因为这是它和「前端遮罩」最大的区别——前端那种遮罩(第 12 课才做),任何人按 F12 打开浏览器开发者工具就能掀开看。而 RLS 是长在数据库里的,不管你从哪个页面、哪个工具、甚至直接拿密钥来访问,它都先拦一道。真正的付费墙,靠的就是它。
今天我们给两张表上锁:
profiles(名册)各管各的:每个人只能读、只能改自己那一行档案,看不到也动不了别人的。contents(藏经阁)立读门:is_free = true(免费试读)的内容任何人都能读;is_free = false(非免费)的内容暂时先挡住所有人——因为此刻你的站还没有「会员」这个概念(is_member 下一课才加)。所以今天的读门只到「免费能读 / 非免费暂挡」为止,会员能解锁是第 11、12 课的事。今天要动数据库的安全策略,是这一阶最「玄」的一关。动手之前,先让法器顺手存个档——就是第 4 课学的 git 渡劫回档。万一今天哪一步彻底乱了,一句话就能回到现在这个「CRUD 能跑、还没上锁」的干净状态,重新来过。
把 📜 咒语卡里的 【存档咒】 发给 Codex。
先别急着开锁。让法器先读一遍你的数据库结构,并用人话给你讲清楚今天要做的事——这样它后面动手才不会改乱,你也能听懂它在干嘛。
把 📜 咒语卡里的 【交底咒】 发给 Codex。它会读你的 profiles 和 contents 表,然后给你交个底。
这里有个概念你要听懂(不用会写):RLS 不是一道笼统的锁,而是分四件套,对应数据的四个动作——
还有一个关键词你会反复听到:auth.uid()。它是数据库里的一句「当前登录的这个人是谁」——返回当前登录用户的身份编号。RLS 的规矩就是靠它来判断「这行是不是你的」:比如「只有 auth.uid() 等于这行的 id 时,才允许读/改」,翻译成人话就是「只有本人能动自己那行」。
profiles 每个用户一行(id/email/nickname 等),contents 是内容条目(有 is_free 字段区分免费/非免费,有 created_by 记录是谁发布的)。今天要做的是:给 profiles 配『各管各的』四条策略、给 contents 配读门和写策略。我会用 auth.uid() 来判断身份」。它把现状和计划复述对了,就算成功。profiles 开锁(开了之后,准备迎接「黑屏」)现在动真格。让法器给 profiles 表开启 RLS,并配上「各管各的」四条策略:每个人只能 读 / 改自己那一行(用 auth.uid() 判断),新增交给注册时的自动建档(第 6 课那个触发器),删除暂不开放。
把 📜 咒语卡里的 【profiles 上锁咒】 发给 Codex。
profiles 已开启 RLS,配好了四条策略:本人可读自己那行、本人可改自己那行,新增由注册触发器负责,删除暂关」。你刷新「我的洞府」页面,还能看到你自己的昵称/邮箱(说明「本人读自己」这条放行了)。contents 开锁(这一步最可能「黑屏」——别慌,这是渡劫正景)现在给 contents(藏经阁)开 RLS。这一步就是今天的渡劫主场,请做好心理准备:
让法器给 contents 开启 RLS 的那一刻,你站里的内容列表很可能「唰」地全部消失,变成一片空白——连你自己录的、你自己能看的,全都不见了。
这正是渡劫的黑屏正景。 我再说一遍原因:RLS 一开,默认「全部禁止读」,而你还没写「许可谁读」的规矩,所以连你自己都被默认挡在外面。这不是搞砸了,这是劫的中段。
把 📜 咒语卡里的 【contents 上锁咒】 发给 Codex。先单独开锁、先看到黑屏,再配读门——我特意让你完整经历这个「先黑后亮」的过程,因为亲眼见过黑屏,你将来排错时才不会被它吓退。
contents 读门 + 写策略(重生:内容带着门禁回来)现在补钥匙,让洞门重启。给 contents 配上今天的核心规矩:
is_free = true 的内容——任何人都能读(包括没登录的游客,这是你的免费试读);is_free = false 的内容——暂时挡住所有人。 > 为什么非免费内容现在「挡住所有人」、连你自己都看不到?因为此刻你的站还没有「会员」这个开关(is_member 下一课才加)。所以今天的读门只能做到「免费放行 / 非免费暂挡」。让会员能解锁非免费内容,是第 11、12 课的事——今天这道门是付费墙的地基,第 12 课会在它上面自然扩展成「免费 OR 会员可读」,不是推翻重做。
created_by 等于 auth.uid())才能新增、修改、删除内容。这就把第 9 课那个「谁都能改删」的洞彻底补上了。把 📜 咒语卡里的 【contents 读门+写策略咒】 发给 Codex。
光自己看着对不算数。RLS 的验收,必须用两个不同身份各看一遍——这才是「门禁真的拦住人了」的铁证,也是今天里程碑②的核心。
准备两个身份(法器会在 📜 咒语卡里教你怎么快速造一个测试账号):
is_free = true 的免费内容;is_free = false 的非免费内容一条都看不到;想改、想删任何内容,都被拦下。把 📜 咒语卡里的 【互验咒】 发给 Codex,它会带你走一遍两个账号的对照验证。
渡劫过了。最后让法器用大白话复盘一句:它今天给哪两张表、各加了哪些策略,用人话说清「现在谁能读什么、谁能改什么」。你不必看懂 SQL,但要听它把门禁规则讲成人话——将来排错、第 12 课扩展付费墙时都用得上。
复盘完,再让它存一个档(备注「RLS 渡劫已过」),把这个「带门禁的干净状态」固定下来。
把 📜 咒语卡里的 【交底复盘+存档咒】 发给 Codex。
profiles:每个人只能读改自己那行;contents:免费内容人人可读、非免费暂时挡住所有人(等下一课加会员),内容只有站主本人能增删改。is_member 还没加,所以非免费内容现在连会员都没有——这是下一课的事」。并告诉你「已存档:RLS 渡劫已过」。它主动点出「is_member 下一课才加」,说明它和你认知一致,付费墙地基已就位。[方括号] 里是要你按自己情况替换的,其余照发。Claude Code 同款可用,把同一段发给它即可。【存档咒】· 渡劫前留退路
【交底咒】· 动手前让法器看懂现状并讲清 RLS
【profiles 上锁咒】· 名册各管各的
【contents 上锁咒】· 先单独开锁(我要亲眼看到黑屏)
【contents 读门+写策略咒】· 配钥匙,让内容带门禁回来
【互验咒】· 游客 vs 站主两个账号对照验证
【交底复盘+存档咒】· 听人话复盘并固定成果
is_free 你叫 free、created_by 你叫 owner),法器在【交底咒】那步会自己读出真实字段名并对齐,你不用手动改。现象:开 RLS 后,连我自己(站主)也看不到任何内容 / 页面一片空白
我给 contents(或 profiles)开了 RLS 后,内容/我的档案全看不到了,页面空白。
我知道这可能是 RLS 默认全禁、还没配读策略导致的(预期黑屏)。
请帮我配上 SELECT 读策略:is_free=true 人人可读,我自己发的内容站主可读;
profiles 我自己能读自己那行。配好后告诉我怎么刷新验证内容回来了。
``现象:开 RLS 后,我(站主)想新增内容,存不进去 / 报错存不了
开 RLS 后我新增内容存不进去了(报错/没反应)。
应该是 contents 的 INSERT 写策略没配,把站主新增也挡了。
请配上:站主本人(created_by=auth.uid())可以新增内容。改完告诉我怎么验证能存了。
``现象:新增能存进去,但存进去后我自己又读不到刚存的那条 / 新增的 created_by 是空的
created_by 填成当前用户(auth.uid()),结果这条内容「不属于任何人」,读门和写策略都不认它,于是你存了却看不见、也改不了。
我新增内容时,created_by 是空的,导致存进去后我自己也读不到、改不了这条。
请改成:新增内容时自动把 created_by 设成当前登录用户(auth.uid())。
已经存进去的那几条 created_by 为空的,也帮我补上是我的。改完告诉我怎么验证。
``现象:游客账号居然也能看到非免费内容 / 还能改内容(锁好像没拦住)
is_free=false 挡住,或者 UPDATE/DELETE 没绑 created_by=auth.uid(),等于门虚掩着。
我用游客账号登录,居然也能看到 is_free=false 的非免费内容(或者还能改内容)。
说明 RLS 策略太松了。请收紧:
SELECT 只放行 is_free=true 给所有人,is_free=false 暂时挡住所有人;
UPDATE/DELETE 只允许 created_by=auth.uid() 的站主本人。改完带我用游客账号再验一遍。
``profiles 表已开 RLS,每个人只能读、只能改自己那一行(别人那行读不到、改不了)contents 表已开 RLS:免费内容(is_free=true)任何人能读、非免费内容暂时挡住所有人is_member 下一课才加;这道读门是付费墙的地基,第 12 课自然扩展、不是推翻你这一课赚到的,不只是站上多了道后端门禁——你还拿到了一件能反复用的东西:一套写明白的 RLS 四件套 SQL 模板。以后做第二个站、帮朋友、接私单,凡是「要给数据库立门禁」的活,照着它改几条列名,几分钟就能把读门和写策略立起来,不用再从零琢磨。
profiles 各管各、contents 立读门,SELECT / INSERT / UPDATE / DELETE 四条规矩配齐,靠 auth.uid() 认人。文件:../takeaways/10-RLS四件套.sql.md。怎么用:整段复制 → 发给法器 → 让它替你粘进 Supabase SQL 编辑器点运行,你一行 SQL 都不用自己写;[is_free]、[created_by] 这些列名若和你的不同,把整段连同真实字段名发给法器,让它对齐后回贴;最后一段「交底法」记得发,让法器把这套门禁规则更新进 AGENTS.md。auth.uid() 认人)我整理成一套模板了,拿去用——给数据库立门禁,免费内容人人看、付费内容锁住,几分钟搞定。」——只讲方法、不含任何钥匙,放心晒。加练:给自己出一道「越权演练题」——用游客账号,试着去改一条站主发的内容(在页面上点编辑、改个字、保存)。你会看到它改不动 / 被拦下 / 报错。亲手撞一次这堵墙,你才真信「锁是真的锁住了」。截一张「游客看不到非免费内容」的对照图,这是你通经脉四层、过完中期渡劫的里程碑②。
下一课预告:门禁立起来了,可你有没有注意到一个别扭的地方——
现在 is_free = false 的非免费内容,连付了钱的会员都看不到(因为压根还没有「会员」这个身份)。门是锁上了,但还没给任何人发钥匙。
下一课(第 11 课),我们给 profiles 加上 is_member(会员开关) 这个字段,让「免费用户」和「会员」第一次分成两重天——is_free 这个字段也终于要真正派上用场了。等到第 12 课,付费墙就会在今天这道读门上自然长出来:把读策略统一成「免费内容 OR 会员可读」。今天你打的这道地基,下一课就要在上面盖墙了。
is_member 是在这个干净底座上动小手术,放心改——真出岔子,一句「回到『RLS 渡劫已过』那个档」就能重来。九成修士都在这道渡劫关二十分钟内重生——你已经是过了劫的人了。# 第 11 课 · 定品分阶 · 免费与会员两重天
profiles 表)装上付费开关——一个叫 is_member 的字段;再把藏经阁(contents 表)里的内容分出两档:哪些免费给所有人看(is_free = true),哪些只留给会员(is_free = false)。最后把「免费能拿什么、会员多拿什么」写成一张对照表存进项目。回顾一下你现在站到哪了:
profiles 表(名册)就自动多一行。contents 表(藏经阁),站主自己能增、查、改、删内容(一套完整 CRUD)。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,进你这个项目,左边点 Table Editor(表编辑器),选中 profiles 这张表(你的名册)。
我们要给它加一个新字段(数据库里叫「列 / Column」):
is_memberboolean(布尔,意思是「是 / 否」两种值)false(新注册的人默认都不是会员——这一点很重要,下面会专门强调)操作:在 profiles 表上方找 「+ 新建列 / Add Column」(或表名旁的下拉菜单里的 New Column),填上面三项,保存。
false。如果忘了设、或设成了 true,那以后每个新注册的人一进来就是会员,等于你的付费墙天生漏了个大洞(所有人不付钱也是会员)。设成 false,才是「默认非会员、付费才解锁」的正路。这一条第 12 课砌墙时会再验一次。profiles 表里多出一列 is_member,类型是 boolean,已有的几行(包括你自己那行)这一列都显示 false(或空格代表 false)。光有字段还不够——你得有至少一个会员账号,才能在后面几课里测试「会员能看到、游客看不到」。最方便的就是把你自己先设成会员。
还在 profiles 表里,找到你自己那一行(按 email 认,就是你第 6 课注册登录用的那个邮箱),双击 is_member 那个格子,把它从 false 改成 true,保存。
is_member 显示 true(打勾 / 显示 true),其他行(如果有别的测试账号)还是 false。is_member 从 false 翻成 true。你现在亲手翻的这一下,就是整套付费系统最核心的那个动作。先看清它,后面就不神秘了。切到 contents 表(你的藏经阁)。第 7 课建表时,这里就留好了一个字段 is_free(这条内容免不免费)。今天第一次真正用它。
打开 Table Editor,逐条给你已有的几条内容定档(双击 is_free 格子切换 true / false):
is_free = true(免费试读):挑你内容里最能勾人、最像"样品"的那几条。这是免费用户进站后唯一能看全的东西,作用是让人尝到甜头、产生"想看更多"的冲动。is_free = false(会员专属):这些就是你将来收费的理由——只有会员才能看全。contents 表里,有几条 is_free = true、有几条 is_free = false,你能一眼说清「哪几条免费试读、哪几条会员专属」。你刚在 Supabase 网页上动了两处结构:profiles 多了 is_member、contents 的 is_free 开始投入使用。照老规矩——网页上改了什么,就得让法器也知道,免得日后「控制台里是这样、代码里以为是那样」对不上。
打开你的法器 Codex,把下面 📜 咒语卡里的【交底咒】整段发给它(记得把方括号填成你刚才的真实改动)。
profiles 表新增 is_member 布尔字段、默认 false,用来标记谁是付费会员;contents 表用 is_free 区分免费试读和会员专属。我已在项目的表结构说明里同步记下,今天还没动读权限策略(那是第 12 课)。」最后一步,把今天定的"两重天"写成一张人能看懂的对照表——不是给数据库看的,是给你自己和将来的买家看的:免费用户能拿到什么、会员多拿到什么。这张表第 13 课做招生页时会直接拿来用(它就是你"凭什么收费"的说明)。
让法器帮你生成(见 📜 咒语卡【对照表咒】),存成项目里一个文件,比如 docs/membership-benefits.md。一张最朴素的对照表长这样:
membership-benefits.md(或类似命名),里面这张对照表用你自己的主题词填好了(不是"内容 1 / 内容 2",而是"基础食谱 / 全部进阶食谱"这种具体话)。is_member / is_free 是机器判断用的开关,对照表是把这套开关翻译成买家能懂的"我花钱买到啥"。两边说的得是同一件事,第 13 课写招生页时它俩会对上。定价不是玄学,下面 4 个人尽皆知的小套路,你知道了不一定全用,但至少被别人用时能看穿、自己用时不心虚。
1. 尾数价(¥9 / ¥99 比 ¥10 / ¥100 顺手)
把价格标成 ¥9、¥39、¥99,而不是 ¥10、¥40、¥100。差一块钱,但买家第一眼读到的是"几十块"而不是"上百块",心理门槛低一截。这不是骗——它是给犹豫的人一个台阶,价格本身没变。别滥用到 ¥99.9 这种小数点,普通会员卡 ¥9 / ¥19 / ¥39 / ¥99 这种整尾数就够了。
2. 年付优惠(用"省了多少"代替"贵了多少")
如果你想做"按月续",那就同时给一个年付价,并把它标成"相当于每月 ¥X、立省两个月"。买家算的不是"年付要一次掏一笔",而是"原来年付更划算"。一句话原则:月付让人轻松上车,年付让人觉得占了便宜——两个都给,让人自己挑。如果你嫌按月续麻烦(很可能),那就只做一次买断,反而最干净(你买这门课就是一次买断,没有任何续费——这本身就是个让人放心的定价)。
3. 锚定(先给个"贵的",再给"它")
人对价格没有绝对感觉,只有对比。所以聪明的招生页会先亮一个高价做参照,再把你真正想卖的价摆出来,后者立刻显得便宜。
¥299 不是骗你,它是个诚实的静态锚:没有倒计时、没有虚高划线、没有"还剩 3 个名额"。它只是老老实实告诉你"正式期会涨到这个数,你现在是首发价"。这就是锚定的正路——给真实参照,不制造假紧迫。你给自己会员卡定价时,也可以这么干:标出"单买全部内容值 ¥X,开会员只要 ¥Y",但那个 ¥X 得是你真敢单卖的价,不能是凭空编的虚高数。4. Most Popular(替犹豫的人做选择)
如果你给了好几档(比如月卡 / 年卡 / 永久卡),在中间那档上贴个"最受欢迎 / Most Popular"小标签。大多数人面对一排选项会懒得想、直接选你推荐的那个——所以你想主推哪档,就给哪档贴标。这不是耍诈,是帮选择困难的人省脑子;前提是那档确实是性价比最好的,否则就成了坑人。
¥39 永久会员,招生页上标『单买全部进阶食谱值 ¥99,开会员只要 ¥39』,那个 ¥99 是我真敢单卖的价,不是编的」。把这句写进备忘录,第 13 课直接拿来用。【...】 是要你替换成自己真实情况的填空,其余照抄。【交底咒】· 把"加字段 / 用 is_free"两处改动同步给项目(第四步用)
【今天不要改…】 这一整条原样保留(这是给法器的红线,防它擅自上墙)。如果你第三步实际分档和上面描述不同,按你的真实情况微调 1、2 两行即可。【对照表咒】· 生成「免费 vs 会员」权益对照表(第五步用)
【...】换成你自己的主题和真实内容例子,其余照抄。现象:加字段时报错,或保存不了 / 没反应
is_member(全小写、下划线、没空格没大写)?类型是不是选的 boolean?类型选错(比如选成 text 文本)最容易出问题。is_member,类型严格选 boolean(bool),默认值那一栏填 false。三项都对了再保存。现象:加完字段,已有的行 is_member 那一格是空的,不是 false
false(NULL),多数情况不影响——但为了干净、也为了第 12 课砌墙时不出岔子,最好让它明确是 false。现象:把自己 is_member 改成 true 保存后,刷新又变回 false / 没保存上
email,别认错行)?email 重新找到你自己那一行,双击 is_member 格子改成 true,确认页面上出现了"已保存 / Saved"提示再离开。刷新页面,确认那一格稳定显示 true。现象:不确定到底免费几条、收费几条,怕分错
...;我希望它能加成功、默认 false。」profiles 表里多了一个 is_member 字段,类型 boolean、默认值是 false(我亲眼确认过默认不是 true)is_member 改成了 true,刷新后仍然是 true(我有了一个会员测试账号)contents 表里的内容已分出两档:几条 is_free = true(免费试读)、几条 is_free = false(会员专属),我能一句话说清哪是哪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)接成一道真正能拦人的付费墙——非会员看会员内容,直接被后端拦在门外。这是凝金锋最关键的一道渡劫,也是你这座站第一次真正"能凭权限拦人"。
is_free 可读 / 非 free 暂挡)的自然长大——到时把"暂挡"那半句,扩成"is_free 可读 或 是会员可读"。不是推倒重来,是顺着同一条路往前走一步。今天先把开关备齐,墙明天就好砌了。# 第 12 课 · 设墙立禁 · 付费墙拦住凡客
到上一课(第 11 课)为止,你已经有了两样东西:
profiles 里有一个 is_member 开关(true = 已解锁会员 / false = 普通免费用户);is_free 标记(true = 免费试读 / false = 会员专属)。但它俩还没真正连起来干活——现在一个免费用户,照样能看到会员专属内容的完整正文。开关装好了,墙还没砌。
今天就砌这道墙。它分两层,缺一不可:
contents 读策略统一升级——会员专属内容,数据库只对会员返回正文,对免费用户根本不发。这一层管真安全。contents 立读策略时是「is_free 可读 / 非 free 暂时全挡」(那时还没 is_member,连会员自己都被挡在外面,是临时的)。今天等于把那道门的判断从「非 free 一律挡」改成「非 free 时,会员放行、非会员挡」——is_free OR is_member。同一道门,只是补上了「会员例外」这一条。不是推翻重来,是把当初留的口子接上。is_member = false,比如你第 6 课注册的那个普通号)、一个会员账号(is_member = true)。会员账号怎么来?你第 11 课已经会在 Supabase 后台把某个账号的 is_member 手动改成 true 了——今天就用那个。两个账号是本课的「试金石」,砌完墙要拿它俩一个个试。打开你的项目。先别让它砌墙——让它先把现状摸清:内容是怎么读出来显示的、is_free 和 is_member 现在有没有真的在起作用。
把 📜 咒语卡里的 【交底咒】 整段发给 Codex。
contents 表读的;每条有 is_free 标记;用户的会员身份存在 profiles.is_member;目前免费用户也能看到会员专属内容的完整正文,前端没遮、后端 RLS 也还没按会员身份区分」。它如实点出了「现在墙还没砌、谁都能看全文」这个现状——说明它看懂了,没瞎猜。先砌好看的那一层。让法器改成:当一条内容是会员专属(is_free = false)、而当前用户不是会员时——
把 📜 咒语卡里的 【试读墙咒】 发给 Codex。它改完会告诉你动了哪个文件、加了什么。
is_free = true),它完整显示、没有任何遮罩。这一步别跳——它是今天最重要的「认知」步骤,也是你将来不被忽悠的底气。
还是用免费账号,停在那条被渐隐遮住的会员内容页上。按一下键盘上的 F12(或鼠标右键 →「检查 / Inspect」),打开浏览器的开发者工具。在弹出的面板里找到「Elements / 元素」那一栏,往下翻——
现在砌真的那一层。让法器去 Supabase 改 contents 表的读取策略(RLS Read Policy)——这正是第 10 课那道门的自然扩展:
is_free = true 可读 / 非 free 一律挡(那时没有 is_member)。is_free = true(免费试读,谁都能读) OR 当前登录用户的 is_member = true(会员,能读全部)。也就是说,数据库在返回一条会员专属内容的正文前,会先看「问它要数据的这个人是不是会员」——是,就给;不是,就根本不返回正文。
把 📜 咒语卡里的 【RLS 统一读门咒】 发给 Codex。它会替你在 Supabase 后台执行策略变更,并用人话回报它改了什么。
contents 表的读取策略更新了:现在是 is_free = true 或者 当前用户在 profiles 里 is_member = true 才能读到这条;会员专属内容对非会员不再返回正文。这是第 10 课那道读门的扩展,不是新建一道冲突的门」。它明确说出了「这是第 10 课的扩展、非冲突替换」——口径对上了,就算成功。contents 表的 SELECT(读取)策略」。SELECT = 读。它没动你的内容数据本身(你录的那些标题正文都还在),只动了「谁有资格读到」这条规则。改错了也不丢内容,最多是策略要重调。墙砌好了,现在拿两个账号当试金石,一个个验。先验会员。
用会员账号(is_member = true)登录,打开那条会员专属内容。
现在退出会员账号,换免费账号(is_member = false)登录,打开同一条会员专属内容。
再做一次第三步的 F12 验证(关键):停在这条被拦的页上,按 F12 打开开发者工具,往 Elements 里翻那段会员正文——
最后两件小事,一起做。
其一,挂自证横幅:在付费墙顶上挂一行小字横幅——「🪷 你眼前这堵墙的做法,和你正在学的这个筑基课网站一模一样:前端试读遮罩 + 后端 RLS 真拦截。」这就是把 meta 钩子落到页面上:你不是在学玩具,你在复刻你正在用的东西。
其二,让法器用人话给你交个底(透明层):让它复盘这一课到底改了哪些文件、前端遮罩和后端 RLS 分别在哪起作用、为什么说后端那层才是真拦截。
把 📜 咒语卡里的 【自证横幅咒】 和 【交底复盘咒】 发给 Codex。
[某文件] 加了渐隐遮罩和令牌卡,只管显示;真正的拦截在 Supabase 的 contents 读策略,已统一为 is_free OR is_member,对非会员不返回会员正文;所以就算有人 F12,也只能看到空遮罩、拿不到数据」。它把「前端管样子、后端管安全」说清了,就算成功。[方括号] 里是要你按自己情况替换的,其余照发。Claude Code 同款可用,把同一段发给它即可。【交底咒】· 砌墙前先让法器摸清现状
【试读墙咒】· 前端渐隐遮罩 + 渡口令牌卡
【RLS 统一读门咒】· 后端真拦截(第 10 课读门的自然扩展)
【自证横幅咒】· 挂上 meta 自证横幅
【交底复盘咒】· 听它把这一课干了啥说成人话
body),法器在【交底咒】那步会自己读出来并对齐,你不用手动改。现象:会员账号登录了,可那条会员内容还是被遮住 / 还是看不到全文
profiles 表里,is_member 到底是不是 true?(第 11 课手动改的那个,去后台再确认一眼。)②前端遮罩的判断条件,是不是真读到了当前用户的 is_member,还是写死成「非 free 一律遮」忘了放会员。
我用一个 is_member = true 的会员账号登录,但会员专属内容还是被遮住、看不到全文。
请检查:前端遮罩的判断有没有真读到当前登录用户的 is_member,
以及后端 contents 读策略是不是 is_free OR is_member(会员应放行)。
帮我修成"会员账号能看到完整正文",改完告诉我怎么用这个会员账号验证。
`
💡 先用 Supabase 后台直接看这个账号那行的 is_member` 值,是排查这类问题最快的一招——先确认数据对不对,再怀疑代码。现象:免费账号没被拦,照样能看到会员内容的完整正文
我用免费账号(is_member 不为 true)登录,会员专属内容(is_free = false)的完整正文照样能看到,没被拦。
请检查两层:
1. 前端:会员专属内容对非会员有没有真的遮罩;
2. 后端(更重要):Supabase contents 表的读取策略,是不是真的统一成了 is_free OR is_member,
确保对非会员根本不返回会员正文。
两层都修好,改完告诉我怎么用免费账号 + F12 验证它"连数据都拿不到"。
``现象:法器说改了 RLS,但好像两道策略打架了 / 报"策略冲突"或读不出任何内容
改完读策略后,内容读不出来了(或提示策略冲突)。
我怀疑是第 10 课的旧读策略没被替换,和新的 is_free OR is_member 这道门同时存在、打架了。
请检查 contents 表上的 SELECT 策略,确保最终只保留一道、就是 is_free OR is_member,
把多余/旧的那道清掉。改完告诉我怎么验证内容能正常读、且非会员被挡。
``现象:F12 一打开是满屏看不懂的代码,我懵了
Ctrl+F 搜一下你那条会员内容正文里的一句原话。contents 读策略已统一为 is_free OR is_member,且表上只有这一道读门(是第 10 课读门的扩展,不是冲突替换)你这一课赚到的,不只是站上立起了一道墙——你还拿到了一件能反复用的东西:一套付费墙的标准料。以后做第二个内容站、帮朋友接私单,任何「免费试读 + 付费解锁」的站,照搬这套就能立墙,不用从零摸索。
is_free OR is_member,管真安全)。文件:../takeaways/12-付费墙模板.md。怎么用:整段发给法器,让它按你项目真实的 contents / profiles 字段名,把前端组件接进内容详情页、把后端 SQL 在 Supabase 执行,并确保 contents 上只留这一道读策略;前端组件填空式对齐列名即可,后端 SQL 把第 10 课那道旧策略名填进 drop policy 那行。先做后端那层,那才是真墙。加练:把一条原本 is_free = true 的免费内容,在 Supabase 后台改成 is_free = false(变会员专属),再用免费账号刷新看它有没有立刻被墙拦住;然后改回 true,看它又敞开。你会直观感到——整座墙的开关,其实就攥在 is_free 和 is_member 这两个布尔值手里。这正是你将来运营这个站时,决定「哪些免费引流、哪些会员专属」的旋钮。截一张「会员放行 / 免费被拦」的对比图,这是你凝金锋二层的微里程碑。
加练 · 让法器自我渡劫一遍(强烈建议):付费墙是「错了会漏钱漏数据」的关键代码——这种地方值得让法器写完后自己当审查者再过一遍(业界叫 self-critique 自我批判)。把第四步那道 RLS 读策略、第二步那段前端遮罩判断贴给它,追发一句「你刚写的这段,扮一个挑剔的安全审查者再过一遍,专挑漏判和能被绕过的洞,挑出来直接改好」。具体三档咒语(基础 / 严格 / 维度)见 ../takeaways/自我渡劫咒.md。
下一课预告:墙砌好了,凡客被拦在了令牌卡前——可那张「了解如何解锁」的按钮,现在还是个占位。
下一课(第 13 课)是这一阶的 ★渡劫关:我们把钱真正收进来。你会做一个收款码占位 + 激活码的最小支付闭环——买家付款、拿到一张「渡口令牌」(激活码 ZJ-XXXX-XXXX-XXXX)、输进去,is_member 当场翻成 true,付费墙应声消失。你这一课砌的墙,下一课就有人能掏令牌过墙了。
# 第 13 课 · 灵石入袋 · 最小支付能跑通
ZJ- 字符的青玉令牌悬于门前 · 令牌没入门缝、石门轰然洞开、门内灵光涌出。第 12 课你给会员内容装了「付费墙」:游客和未付费的人,只能看到标题和试读摘要,正文被遮住了——而且就算他 F12 扒前端,后端 RLS 也不把正文给他(这是第 12 课的真功夫)。
但现在有个问题:墙是死的——付了钱的人,怎么进去?
今天就解决这件事。你要造一条完整的收钱闭环:
注意这一整条链路,全部在你自己的数据库里完成——没有第三方回调、没有 webhook、没有任何资质门槛。这就是为什么你一个零基础小白,今天就能让一座站「真的能收钱」。
你今天会用到「个人收款码」(你自己的微信/支付宝二维码)。请记死下面三句话:
打开 Codex(你的本命法器,第 2 课装好的)。先用大白话把今天的目标交给它,别让它自由发挥。
把下面这条【交底咒】整段发给 Codex(咒语卡①,可直接复制):
activation_codes 表(渡口令牌)、② 一个校验+激活的数据库函数、③ 前端一个「输码解锁」的输入框。它先讲计划、没急着写代码,就对了。你的数据库里已经有两张表了:profiles(名册,扛着 is_member 这个付费开关)和 contents(藏经阁,你的内容)。今天加第三张、也是最后一张:activation_codes——渡口令牌。
让 Codex 帮你建表(咒语卡②)。它会生成一段 SQL,你不用看懂每一行,但你要知道这张表大概长这样:
Codex 生成 SQL 后,会让你复制到 Supabase 后台执行(和第 7 课建 contents 表一模一样的操作:Supabase 控制台 → SQL Editor → 粘贴 → Run)。
activation_codes。点进去,字段名和上面这张表对得上。现在它是空的——没关系,下一步就往里放码。表建好了,但里面空空的。现在造几张真码出来——你自己测试要用,以后真卖也用这一套。
让 Codex 生成一段 SQL,往 activation_codes 里插入 3 张码(咒语卡③)。它会:
ZJ-XXXX-XXXX-XXXX 的随机码(避开 0/O/1/I/L);expires_at 设成「现在往后 7 天」;used_by 留空(表示还没人用、是有效的)。同样,复制到 Supabase 的 SQL Editor 里 Run 一下。
activation_codes 表,里面躺着 3 行,每行有一串 ZJ- 开头的码,used_by 是空的,expires_at 是一周后的日期。把这 3 串码抄到备忘录里——第六步你要用它们来测试。这是今天最关键的一块,也是法器干活、你验收的一步。
你需要一个数据库函数(可以理解成数据库里一个"自动办事窗口"):用户把一串码递进去,这个窗口当场办四件事,一气呵成、不可拆开:
activation_codes 表里存在吗?used_by 是空的吗)?过期了没(还在 7 天内吗)?profiles.is_member 翻成 true,记下 member_since(成为会员的时间)。used_by 和 used_at)——这码从此作废。让 Codex 写这个函数(咒语卡④)。
redeem_code 的 RPC 原子方案——教学版咱们用「前端 + 数据库函数」实现,两者同源,逻辑一模一样。金丹期会把它升级成 Edge Function(自动化更强),但今天这套不是简化版玩具,是同款实现的入门档。你买课输的那串码,走的就是这条路。../systems/激活码-EdgeFunction附录-选做.md(参考实现,待真机验证,有真需求再上)。profiles 配的改策略是"本人可改自己那行"(为了让用户能改昵称)吗?麻烦就在这:数据库的行级安全(RLS)只能按"行"放行、管不到"列"——允许用户改自己那一行,他就能改这行的任意列,包括 is_member。也就是说,任何登录用户打开浏览器 F12 控制台,不输你的码、自己跑一句 update profiles set is_member=true,就能白嫖成会员,把你这整套激活码绕过去。所以造完函数,必须再让法器补一道"列锁":收回普通用户对 profiles 的整表改权,只留"昵称"这类该让他自己改的列;is_member 从此只有上面那个函数能翻(它以"表主人"身份运行,不受这条限制;你在 Supabase 后台手动开会员也照常有效)。把咒语卡④里那段已经带上了这道列锁——照发即可。await supabase.from('profiles').update({is_member:true}).eq('id',(await supabase.auth.getUser()).data.user.id),应当改不动(报错或 0 行被改、is_member 仍是 false);而输一张有效激活码,会员照常开。两条都对,才算门正、洞也堵了。数据库这边的"办事窗口"开好了,现在给用户造一个"递码的窗口口子"——前端的输入框。
让 Codex 在你第 12 课做好的付费墙那块遮罩下面,加上(咒语卡⑤):
is_free=false)的内容——你看到付费墙遮罩下面,多了一块收款码占位图 + 一个激活码输入框 + 一个解锁按钮。这是阶段渡劫③的正题,也是本课里程碑。 你要扮演一个"刚付完钱的陌生人",亲手把墙推倒。
先拍解锁前的样子:用那个没付费的账号,停在一条会员专属内容上,正文被付费墙挡着、看不全。
然后,把第四步抄下来的其中一串真码,粘进激活码输入框,点「解锁」。
is_member 已经真的存进数据库了)。再去后台验两件事,确认闭环是真的闭上了:
is_member = true(整套付费墙的总开关,被你刚才那串码翻开了)。activation_codes 表,你刚用的那串码,used_by 已经填上了你的账号、used_at 有了时间——这码作废了。再拿同一串码去输第二次,会被拒(下面急救处有验证)。[方括号] 的地方按提示替换成你自己的内容,其余原样发。咒语卡① · 【交底咒】先讲计划,别急着写代码
咒语卡② · 建 activation_codes 表
咒语卡③ · 生成第一批激活码
咒语卡④ · 写"校验+激活"数据库函数
咒语卡⑤ · 前端加"收款码 + 输码解锁"入口
[今天日期] 换成形如 20260616 的数字。其余整段原样发给 Codex。现象:输入激活码,提示「激活码不存在」
- 要带上,字母大小写要和表里一致);② 你输的这串码,确实在 activation_codes 表里吗(去 Supabase Table Editor 核对一下)。activation_codes,直接复制表里一行的 code 整串,粘进输入框再试。八成是手抄抄错了。现象:输入激活码,提示「激活码已被使用」
used_by 还是空的,用那些空的。这不是 bug,是闭环在正常工作。现象:输入激活码,提示「激活码已过期」
expires_at 是不是已经过了今天(默认发码后 7 天有效)。现象:输了码,提示成功了,但付费墙没消失 / 内容还是被挡
is_member 到底变 true 了没;③ 如果数据库里 is_member 已经是 true 但还被挡,那是第 12 课的付费墙读策略没读到最新状态。现象:执行那个函数的 SQL 时,Supabase 报红色错误
member_since 列)。activation_codes,里面有几张 ZJ- 开头的真码(used_by 空的是有效的)nickname):非会员账号在 F12 控制台直接 update profiles set is_member=true 改不动——确认没人能不输码、自己白嫖会员is_member = true,且我刚用的那串码 used_by 已被填上(作废了)你这一课赚到的,不只是站上多了「能收钱解锁」这块功能——你还拿到了一件能反复用的东西:一整套零资质付费解锁闭环模板。以后做第二个站、帮朋友、接私单,照着搬一遍,几分钟就能让一座站「真的能收钱」。
../takeaways/13-激活码闭环模板.md。怎么用:五段按顺序整段复制 → 发给法器 → 让它替你粘进 Supabase 运行、替你改前端,你不用写一个字、不用懂每一行;带 [方括号] 的(如 ZJ- 前缀、占位价、批次日期)按提示替换。里面不含任何钥匙,可放心复制、放心给同学。加练:扮演两个角色各跑一遍——① 一个"陌生买家"账号,从注册 → 撞墙 → 输码 → 解锁,全程走通;② 你自己用一张故意过期的码(把某张码的 expires_at 在表里手动改成昨天)测一下,确认它被正确拒绝。亲手验证"防转卖"和"过期作废"真的在工作,你才敢拿这套去面对真实买家。
下一课预告:你的站现在能注册、能存内容、能拦人、能收钱解锁——麻雀虽小,五脏俱全。但它还住在第 1 课那个"拖拽上传"的临时地基上,每次改了代码要手动重传,太原始。
下一课(第 14 课 · 连仓自动部署),把你的站接上 GitHub 仓库,以后改一行代码、法器帮你存个档,站就自动重新上线——真正的"全栈真身"渡劫。
# 第 14 课 · 雷动真渡 · 全栈站上真线
到上一课为止,你已经造出了一座真·全栈会员站:能注册、能登录、能存内容、有付费墙、能用激活码解锁会员。但它有一个致命的限制——它只活在你这台电脑上。你一关预览,全世界就没人能访问它。
第 1 课你用「网页拖拽」把练气期那个静态站搬上过线,那只是个不会动的占位。现在你这座站有了后端、有了登录、有了数据库——今天才是它真正意义上的「上线」:
.env 和线上平台是两处同一套秘密」——今天兑现。你要去线上平台后台,把那几个环境变量逐项、名字一字不差地再填一遍。老规矩:动大事之前先存档。打开 Codex,让它把当前这座能本地跑通的全栈站提交一次(咒语卡【上线前存档咒】整段发它)。
法器会做两件事,做完用人话回你:把你的改动 git commit 存一个档、并 git push 推到 GitHub 仓库。这一步不只是存档——它顺便把你最新的代码推上了 GitHub,下一步连仓部署才有东西可连。
你的仓库名,你现在在 GitHub 网页上能看到最新的文件」。打开你的 GitHub 仓库页面刷新一下,文件是最新的。打开浏览器,进 Cloudflare Pages(pages.cloudflare.com,第 1 课你已经有账号了)。这次不走「拖拽上传」那条路了——我们要走连仓那条:
接着平台会问你「怎么构建(Build settings)」。这是连仓部署和拖拽上传最大的不同——平台要自己把你的代码编译成网页。照下面这张表填(你的项目是 Vite + 原生 JS,这套是标准值):
npm run build、Build output directory 填的是 dist,下面还有一块叫 Environment variables(环境变量) 的区域——先别点最后那个部署按钮,下一步要先填环境变量。npm run build + dist。来到本课最关键、也最容易出错的一步。还记得第 5 课埋的那根弦吗——
.env 里。等第 14 课部署上线时,线上平台那边也要再填一遍同一套钥匙。这套秘密是『两处同一套』。」今天就是第 14 课,就是兑现它的时候。 平台读不到你电脑上的 .env(那是你本机的私密文件,根本没上传),所以你必须在线上后台把同一套秘密手动再填一遍。
怎么知道要填哪几项、叫什么名字?——看你的 .env.example(传家底单)。第 5 课起,每次法器往 .env 加一个变量,都会同步往 .env.example 加一行空白模板。所以 .env.example 里列着的每一个变量名,就是你线上要填的清单,一个都不能漏、名字一个字母都不能差。
先让法器把这张清单给你念出来(咒语卡【念传家底单咒】),它会回你类似:
然后在刚才那个设置页的 Environment variables(环境变量) 区域,逐项添加:
VITE_SUPABASE_URL 不能写成 SUPABASE_URL、不能少写 VITE_ 前缀(Vite 规定只有 VITE_ 开头的变量才会进前端,少了前缀=填了等于没填)。.env 完全一致——最稳的做法是从 .env 里整段复制粘贴,别手敲,别框选漏字符。service_role 那把🔴红钥匙第 5 课就说了,前端永远不碰,这里也绝对不填。.env.example 列出的每一项都对应填好了一行,变量名和本地 .env 完全一致。.env 读;上了线、跑在 Cloudflare 的服务器上时,你电脑的 .env 它根本够不着,只能从平台后台你填的这份读。两处填的是同一套值,但必须填两次——这就是「双轨」。漏了线上这一轨,站照样能部署成功,但一打开就是白屏(它连不上数据库,啥也渲染不出来)。这正是第七步要救的那个崩法。环境变量填完,回到设置页底部,点 Save and Deploy / 保存并部署。
平台开始干活:拉你的代码 → 跑 npm run build → 把构建出的 dist 发布上线。屏幕上会滚一大片日志文字(几十秒到两三分钟),这是正常的,别关页面。
https://你的项目名.pages.dev 的在线链接。现在你有了线上链接,但直接拿它去注册登录,多半会被 Supabase 挡回来。因为 Supabase 出于安全,默认只认它白名单里的网址——你之前都在本地 localhost 调试,Supabase 认得 localhost,但还不认识你这个新的 .pages.dev 网址。要开三道门:
打开 Supabase 控制台 → 左边菜单 Authentication(认证) → URL Configuration(URL 配置),填两处:
填完点 Save / 保存。
CORS 字样的红字(少见),那就是某个请求的来源没被放行——别自己猜,直接把那行红字原文丢给法器(用第七步的话术),它会告诉你具体哪个地址要补进哪里。先按上表配好这两处 URL,CORS 一般就不用你操心。.pages.dev 线上网址;Redirect URLs 里同时有 localhost(本地)和你的 .pages.dev(线上)两条;点了保存。掏出手机或在电脑浏览器里,打开你的 https://你的项目名.pages.dev。两种结果,都在预料之中:
结果 A——站正常亮了 🎉
首页出来了、能点能动。那直接跳到第八步做线上回归测试。运气好(或者你前面三条铁律全没踩坑),就是会这么顺。
结果 B——一片空白,啥也没有
别慌,这就是本课写在剧本里的那一瞬黑。 部署明明成功了、链接也有,打开却白茫茫一片——99% 是环境变量没在线上填好(第三步那三条铁律踩了坑)。这不是失败,这是渡劫的标准画面。第七步就是为这一刻准备的通关路径,照着走。
这是本课的核心保命技能,学会它,你以后所有「线上白屏」都不慌。白屏的页面不是真的什么都没有——它把出错的线索,藏在一个叫 Console(控制台) 的地方,我们用 F12 把它揪出来。
第 1 步 · 打开 console(看见红字)
在白屏的那个页面上:
Fn + F12),弹出一个开发者面板,点上面的 Console(控制台) 标签页。第 2 步 · 对号入座(90% 是这两种红字之一)
第 3 步 · 把红字原文丢给法器(万能兜底)
看不懂红字、或对不上上表?别自己猜。 用下面这套——这就是第 5 课起反复用的报错三句话,这次填上 console 红字:
把这三句发给 Codex,它会照着红字告诉你具体哪个变量错了、去 Cloudflare 后台还是 Supabase 后台改、改完要不要重新部署。
站亮了,但还要确认它在公网上功能真的全活。别用你平时登录的那个老账号——你要扮一个完全陌生的新香客,从零走一遍:
在你的 .pages.dev 线上链接里,按顺序走:
profiles 触发器)。is_member 翻 true。.pages.dev。还不行就用报错三句话把现象丢给法器(见 🆘 卡住了)。很多大陆小白一听「网站上线」就紧张:「我是不是得去备案?会不会违规?」 这一步给你吃颗定心丸:
.pages.dev 域名也不在中国大陆境内服务器上。大陆的网站备案(ICP 备案)制度,针对的是使用中国大陆境内服务器的网站——你这种部署在海外平台、用平台免费子域名的情况,不涉及大陆备案,可以直接访问、直接用。.com)也不强制备案才能用——只要它解析到海外节点。买不买域名是下下阶的事(大圆满阶才碰),今天用平台送的 .pages.dev 免费网址完全够,不影响你这门课出师。.pages.dev 网址。整门课唯一真花钱的,还是那 ¥30–80 的 AI 算力,其余大概率 0 元。上线没让你多掏一分钱。【...】 是要你填的空,其余照抄。今天两张:一张让法器上线前存档并推送,一张是出问题时把线上报错丢回法器。【上线前存档咒】· 让法器提交并推送到 GitHub(连仓部署的前提)
【部署线上报错·丢回法器咒】· 部署失败 / 线上白屏时,把红字交给法器定位
【...】 换成你的真实情况,红字一定一字不差地抄进来(这是法器能一次定位的关键)。这三句就是第 5 课起反复用的「报错三句话」,这次用在线上排错。现象:部署成功了、链接也有,但打开是一片空白
VITE_ 前缀或拼错;②某个变量没填、值是空的;③改了环境变量后没重新部署,线上还用着旧的空变量。supabaseUrl is required / undefined / Missing environment variable,回 Cloudflare 后台核对变量名一字不差、值都填了,然后到 Deployments 里点 Redeploy 重新部署一次(改了不重部署 = 没改)。还不确定就用咒语卡【部署线上报错·丢回法器咒】,把红字原文发给法器。现象:构建日志直接飘红、部署失败(连链接都没拿到)
npm run build + dist。现象:站能打开,但线上注册 / 登录失败,或登录后跳不回来
.pages.dev 网址,把请求挡了。.pages.dev、Redirect URLs 里同时有 localhost 和你的 .pages.dev,保存后再试。若 console 里有带 CORS 字样的红字,照第五步说明把红字原文丢给法器定位。现象:以前能连,今天线上突然连不上数据库 / 报「项目暂停」
现象:线上站我自己或朋友在国内打开很慢、转圈、时好时坏,挂境外网络就秒开
npm run build、产物目录是 dist,首次部署成功、拿到了 .pages.dev 线上链接.env.example 清单逐项填好了环境变量,变量名和本地 .env 一字不差(且只填了 anon 🟢 钥匙、没碰 service_role 🔴)localhost 和 .pages.dev 两条都在)你这一课赚到的,不只是站上多了个「公网在线」——你还拿到了一件能反复用的东西:一张「本地能跑 → 线上也能跑」的逐项核对单。以后你上线第二个站、帮朋友部署、隔半年再上一个站,照着它走一遍,就绕开了那一瞬白屏,不用再凭记忆碰运气。
.env.example 本地→线上逐项对照(含三条防白屏铁律)、Supabase 白名单/重定向/CORS 三道门禁,外加一张「F12 看红字对号入座」自救表。文件:../takeaways/14-部署上线清单.md。怎么用:从上往下一项一项勾,每项都是「本地是这样 → 线上要这样 → 怎么验证」;环境变量照你自己的 .env.example 逐项搬、名字一字不差;改完环境变量记得重新部署;任何一行红字对不上,就用单子末尾的「报错三句话」整段发给法器。.env.example 逐项补、改完必重部署——三步点亮。」——只讲方法、不含任何钥匙,放心晒。加练 · 体验「连仓自动部署」的爽点:让法器随便给你的线上站改一个小地方(比如首页标题改个字),按【上线前存档咒】提交并推送。然后什么都别做,几十秒后去刷新你的 .pages.dev 线上链接——你会看到改动自己上线了。这就是「连仓自动部署」的意义:以后你(让法器)改完代码一推,站自己更新,你再也不用手动部署。第一次看到它自己变,挺神奇的。
附录 · 用 Vercel 行不行? 行。Vercel 是和 Cloudflare Pages 同类的部署平台,连仓、填环境变量、配白名单的逻辑一模一样,只是后台按钮叫法略有不同(构建命令、产物目录 dist、Environment Variables 一样填)。但本课主线钉死 Cloudflare Pages——你先把这一条走通、出师不慌;想折腾 Vercel,等出师以后当加练。
下一课预告:站上了真线,可它现在还是一座没人来的空城——只有你自己在里面走来走去。
下一课是本阶最后一道大关(★渡劫课):你要把链接发出去,引第一个真·陌生人来注册,在后台亲眼看见「用户 +1」。同时教你上线后的保活检查(免费项目 7 天会睡,引客前先唤醒它,免得真人来了一片连不上)。
# 第 15 课 · 引客入门 · 真人使用与变现验证
profiles 名册里多出来的,不再是你自己,而是别人。这是你的站第一次有外人来往。到上一课为止,你的站已经真的上线了:有真域名(或平台免费子域名)、能注册、能登录、有免费内容也有会员内容、付费墙能拦人、激活码能解锁。一整套商业闭环都通了。
但它有个「问题」——到现在为止,进过这座站的只有你自己一个人。你测的、你注册的、你解锁的,全是你。一座只有站主自己用的站,还不算真站。
今天这一课,就干一件事:让第一个「不是你」的真人,顺顺利利地注册进你的站。
这件事听起来简单,但有几个真实的坑要先填平:
profiles 名册里多出别人的那一行。先别急着改。打开你的线上站(用第 14 课部署好的真域名或平台免费子域名),假装你是第一次来的陌生人,从头走一遍:
把这些「卡壳的地方」记在备忘录里——这就是你下一步要让法器帮你改的清单。
把第一步记下的清单,连同 📜咒语卡里的 【理引路幡咒 · 润色注册引导】 一起复制给 Codex。法器会帮你把首页和注册区的文案改清楚,让陌生人一眼明白「这是个啥站、为什么注册、注册完能干嘛」。
法器改完会用人话回你一句类似:「我改了首页顶部的一句话介绍和注册框旁边的引导文案,让第一次来的人能看懂这是个什么站、注册有什么好处;改的是 index.html(或首页组件)的文案部分,没动任何登录/数据库逻辑。你刷新线上站就能看到。」
光把链接发出去还不够。你有没有发现:当你把一个网址发到微信、发朋友圈时,下面会自动带一张小卡片(一张图 + 一个标题 + 一句描述)?这张卡片决定了别人刷到时第一眼看到什么——卡片好看、说得清楚,别人才愿意点。
这张卡片不是微信生成的,是你的网页里一段叫 分享元信息(Open Graph / 社交分享标签) 的东西控制的。把 📜咒语卡里的 【做分享卡咒】 复制给 Codex,让它给你的站配好这张卡。
法器改完会用人话回你一句类似:「我在你网站的 <head> 里加了社交分享标签(标题、描述、一张预览图),这样别人把你的链接转发到微信/朋友圈时,会自动带上一张说明卡片。我没动任何功能,只加了这段‘转发时显示什么’的信息。」
这是今天最关键、最容易被忽略、也最容易救你一命的一步。
你用的 Supabase 是免费层。免费项目有一条规矩:一段时间(官方约定约 7 天,具体以你 Supabase 后台项目页的提示为准)没有任何活动,它会自动「暂停(Paused)」——相当于数据库睡着了。睡着期间,任何人来注册、登录都会失败。
想象一下:你今天兴冲冲把链接发到群里,结果你的项目恰好前几天没动、正睡着——所有来的人全注册失败,你还以为是自己代码写崩了,第一批宝贵的真实用户就这么白白流失了。
所以,发链接之前,必须先把数据库叫醒、确认它是醒着的。做法:
test+今天日期@你的邮箱域名),能注册成功,就说明灵脉确实通着。第二、三步法器改的文案和分享卡,现在还只在你本地或代码里,线上的站还是旧的。把它推上线,外人看到的才是润色后的版本。
把 📜咒语卡里的 【上线咒】 复制给 Codex,让它帮你打包、按你第 14 课用的方式重新部署。(你第 14 课已经把站连到 GitHub 仓自动部署了——那样的话,法器帮你把改动「存档并推上去」,平台会自动重新上线,你等它跑完即可。)
万事俱备。现在,真的把你的线上链接发出去。建议这样发(任选,能拉到 1 个真人就算成功):
发出去之后,盯着对方的反馈:他能打开吗?能找到注册入口吗?能注册成功吗?哪一步卡了?——真实用户的卡点,比你自己测一百遍都值钱。
最后,回到 Supabase 后台,进 Table Editor(表编辑器)→ profiles(名册)表。
现在看这张名册——它里面应该不止你一行了。多出来的那些行,邮箱不是你的:那是真实的陌生人,今天经你的手,注册进了你亲手做的站。
profiles 名册里,除了你自己,还有别人的行(邮箱是你刚拉来的真人的)。配合你在线可访问的站(真域名或平台免费子域名都算),里程碑④ 达成。profiles 名册里多出来的真实用户(不是你自己)。[ ] 里的内容要换成你自己的,其余照抄。【理引路幡咒 · 润色注册引导】· 让站对陌生人一看就懂
[ ] 里换成你自己的人群、价值、好处和清单,其余照抄。【做分享卡咒】· 让链接转发到微信时带一张说明卡片
【上线咒】· 把润色后的站重新部署上线
现象:真人注册全失败 / 我自己当场注册也失败(第四步就过不去)
CORS 字样,说明你的线上域名没被允许访问 Supabase——同样去 Supabase 把你的域名加到允许列表里。
我把网站发给真人注册,全部失败,我自己当场注册也失败。
我已经检查:Supabase 项目状态是 [Paused / Active],我的线上域名是 [粘你的域名]。
浏览器控制台报的错是:[把 F12 控制台里的红字粘到这里,没有就写「没看到红字」]。
请帮我判断是「项目暂停没醒」「域名没进白名单」「CORS 跨域」还是「确认邮箱卡邮件」,
并告诉我具体去 Supabase 哪个设置页、改哪一项、怎么验证修好了。
``现象:项目点了 Restore(恢复)后还在转圈 / 迟迟不变 Active
现象:把链接发到微信,下面没有分享卡片 / 卡片是旧的
?v=2)再发一次试;或等一段时间微信缓存刷新。分享卡是锦上添花,没卡片也不影响别人注册,别为它卡住今天的正事。现象:朋友说「打开了,但找不到在哪注册 / 不知道注册干嘛」
profiles 名册,里面有别人的行(邮箱不是我的)——我亲眼见证了「用户 +1」你这一课赚到的,不只是站上第一次有了真实陌生用户——你还拿到一套能反复用的开张工具:一份引客冷启动话术(私聊 / 发群 / 小红书三套,填空即发)和一张Supabase 保活检查清单(每次发链接前过一遍,永远不让真人撞上一扇打不开的门)。
【方括号】填空)+ 发链接前的 Supabase 保活检查清单(含当场注册失败的排查顺序与急救话术)。文件:../takeaways/15-引客话术与保活.md。怎么用:要拉人时,挑对应场景的话术,把 【方括号】 换成你自己的主题和好处,整段复制发出;发链接之前,先把保活清单逐条勾一遍,全绿了再发——尤其隔了几天没动项目时,这张清单能救你第一批真人。加练 1 · 收集第一批真实反馈:发链接时多问一句「哪一步让你犹豫了?」。把收到的反馈记成一个小清单——这是你下一步优化站的最真实依据,比你自己拍脑袋强一百倍。
加练 2 · 给自己设一个小目标:今天拉到 1 个就算过关。如果还想多拉几个,可以把链接发给更多目标人群——但别买流量、别群发陌生人,今天只是验证可用,不是搞推广。
加练 3 · 给自己排一张「冷启动 SOP」:今天拉到第一个真人后,别一股脑乱发。按这个顺序 + 节奏来,转化最稳:
【方括号】 换成你的主题和好处,整段复制即发。文件:../takeaways/15-引客话术与保活.md。下一课预告:站有真人来了,但真人一来,问题就藏不住了——有没有人能越权看到不该看的内容?这一个月下来,AI 算力到底花了多少、有没有超支?手机上打开你的站,会不会有地方错位、点不动?
下一课「固元体检 · 安全与成本双复盘」,带你做一次全面体检:亲手做一次越权自测(验证游客真的看不到会员内容)、对一次账(看清这门课到底花了你多少钱、有没有超出第 1 课说的 ¥30–80)、再把手机上的小毛病修一修。把这座有人来往的真站,夯实成一座经得起住的洞天。
# 第 16 课 · 固元体检 · 安全与成本双复盘
第 15 课你做成了一件大事:有真实的陌生人在你的站上注册了。你的站不再是「自己玩的玩具」,它开始有真实用户、真实数据、真实流量了。
而「有了真实用户」这件事,会立刻带来三个你必须当面回答的问题:
做完这三件,再顺手让法器把站在手机上的排版修一修(真实用户大半是用手机打开你的站的,手机上歪了可不行)。最后,法器会帮你把这次体检的要点,整理成一张「上线后必盯的安全点」体检表——以后每隔一段时间,你照着勾一遍,就能让站一直健康。
越权自测的核心,是用「不该看到的身份」去试着看「不该看的东西」。所以你需要手上有两个能登录的账号:
is_member 是 true(第 11、13 课你给自己开过会员)。它代表「已付费的会员」。profiles 表里,你能看到甲那行 is_member 是 false、乙那行是 true。profiles 表,找到对应邮箱那一行,看 is_member 这一格是 true 还是 false,一目了然。这是检验你付费墙后端(第 12 课)是否真的锁住了。
做法:
is_free = false)的内容,点进去。正确的结果是:游客 / 普通用户只能看到标题和试读摘要,看不到正文——正文要么是渐隐遮罩,要么干脆空着。这就是付费墙在生效。
这是检验你行级安全(第 10 课)的写策略是否真的把「写权限锁在站主手里」。
最稳、最像「真坏人」的测法,是请法器模拟一次越权写入——不用你自己手写代码:
把 📜 咒语卡①「白帽越权咒」 整段发给法器(Codex)。它会以账号甲(普通用户)的身份,试着去做几件「不该被允许」的事,例如:
contents 表里新增一条内容(普通用户不该能发内容,只有站主能);profiles 里的资料(每个人只该能管自己那行);is_member 直接改成 true(不输激活码、自己白嫖会员)——这是付费墙头号绕过点,第 13 课配的「列锁」就是堵它的,今天亲手验一遍堵没堵住。法器跑完,会用人话告诉你每一项是「被挡下了(安全)」还是「居然成功了(漏洞!)」。
permission denied、row-level security 之类,法器会翻译成人话:「普通用户想新增内容,被后端拒绝了,这是对的」)。如果全是「被挡下 / 安全」,你的写权限锁是牢的。这一步查的是新手头号安全事故:把本该藏在 .env 里的「私钥」(尤其是 Supabase 的 service_role 那把红色钥匙——第 5 课讲过的「红绿两把钥匙」)不小心提交到了 GitHub 公开仓库里。
把 📜 咒语卡②「翻箱验钥咒」 整段发给法器,让它把你的整个项目仓库翻一遍,专门找有没有「不该出现在代码里的钥匙 / 密码」,并且特别确认 .env 文件没有被 git 跟踪、没有被推上 GitHub。
法器会给你一份人话报告,逐项说清:
.env 是否被 .gitignore 正确忽略(应该被忽略、不该上传);.env 已被正确忽略、没有被提交;仓库里没有发现裸露的 service_role 私钥或密码」。绿灯。anon 那把绿色钥匙(它本来就是公开给浏览器用的,配合 RLS 才安全);但绝不能出现 service_role 那把红色钥匙(它能绕过所有安全规则,泄露=后台失守)。法器报告里会帮你区分这两把——绿的露了没关系,红的露了要立刻处理。现在查「钱」。你这座站真实在花钱的地方,第 1 课「灵石速览」、第 3 课「灵石台账」、买课前的「诚实成本告知书」都写清过:唯一真要花的是 AI 算力(悲观 ¥30–80),其余(Supabase / Cloudflare / GitHub)大概率 ¥0。今天来验证「大概率 0」到底有没有兑现。
打开 Supabase 控制台 → 进入你这个项目 → 找到 Usage / 用量(通常在项目设置或组织账单页面里,中文叫「用量」)。重点看这几条免费层额度:
把这三条,和你第 3 课记的灵石台账、买课前告知书的数字对一对:是不是都远在免费层以内、没有产生一分钱实际扣费?
你的真实用户,大半是用手机打开你的站的。在电脑上好看,不代表手机上不歪。这一步让法器把移动端排版修一修。
做法:
前面几步守的是「安全」和「成本」,这一步守的是第三条命脉:代码本身的健康。这一路你大量让法器写代码,速度快,但也会留下一身「赘肉」——几个月后你回来改一处小功能,发现满屏看不懂的代码、改一处崩三处,这就是「渡劫的暗坎」:站没出事,是你自己先被代码吓退了。
AI 写代码的三种典型「赘肉」,今天一次性请白帽军师替你减掉(注意:是「减法」,不是「加功能」——和今天全课基调一致,只守不增):
console.log。它们不报错,但让代码越读越厚。fetch:你站里那些跟 Supabase 要数据 / 提交数据的网络请求(fetch / await supabase...),一旦网络抖一下、后端拒了,如果没写「失败了怎么办」,用户看到的就是整页卡住或白屏。关键请求必须补上「失败给个提示、别让页面死掉」。做法:把 📜 咒语卡④「代码收拾咒」 整段发给法器(Codex)。它会先列一份「打算删什么、收敛什么、给哪些 fetch 补错误处理」的清单给你过目(这就是杀手卡【Plan-First 先谋后动】——大改前先出方案,你点头再动手),你确认后它分小步改、每步存档,绝不一把梭哈把站改崩。
fetch 补了错误处理),你点头后它分步改完并存档;站功能一切照旧(登录、内容、付费墙都没变),但代码更短、更好读了,关键网络请求失败时会给提示而不是白屏。最后,把今天查过的东西沉淀成一张清单,以后定期照着勾。
把 📜 咒语卡⑤「立体检表咒」 发给法器,让它把今天这套体检整理成一张「上线后必盯的安全点 · 固元体检表」,存进你的项目文件夹(比如 docs/安全体检表.md),内容包含但不限于:
is_member(列锁生效);.env 没被提交、红色私钥没裸露在仓库;每一条都做成可勾选的样子(前面带 - [ ]),让你以后每隔一段时间(比如每月一次、或每次大改之后)照着体检一遍。
【...】 是要你替换/填空的地方,其余照抄。今天这五张卡,让法器全程扮演「站在你这边的白帽安全军师」。【白帽越权咒】· 让法器模拟普通用户去攻击你自己的站(对应第三步)
【翻箱验钥咒】· 让法器检查仓库有没有误传私钥(对应第四步)
【移动端正骨咒】· 让法器修手机上的排版(对应第六步)
【代码收拾咒】· 让法器当白帽军师给代码做减法(对应第七步)
【立体检表咒】· 让法器把今天的体检沉淀成可勾选清单(对应第八步)
现象:越权自测时,普通用户 / 游客竟然能看到会员专属内容的正文(发现越权 · 读)
现象:越权自测时,普通用户竟然能新增 / 修改 / 删除内容(发现越权 · 写)
现象:法器报告发现 service_role 红色私钥被传到过 GitHub(发现私钥外泄)
现象:成本对账时,发现 Supabase 用量某条接近上限 / 出现了非 0 的费用
现象:手机打开站,整页都歪 / 加载不出来(不只是排版问题)
.env 没被提交、service_role 红色私钥没裸露在 GitHub 上(绿色 anon 钥匙在前端是正常的)fetch 补了错误处理(站功能照旧、代码更短、网络请求失败不白屏)你这一课赚到的,不只是站上多了一次安全体检——你还拿到了一件能反复用一辈子的东西:一张「上线后定期体检单」。以后这座站每隔一段时间、每帮人做一个新站,都照着它勾一遍,就能让站一直健康、不被反噬。
fetch 补错误处理)三条。每条都配「怎么查 → 查到什么算正常」,勾不上还附带可直接发给法器的急救话术。文件:../takeaways/16-固元体检表.md(其中「代码收拾」勾选项就在这份体检表里,照着勾即可)。怎么用:存进你项目的 docs/ 文件夹,照着把 - [ ] 一条条勾掉;带 【方括号】 的填你自己的实际情况(会员邮箱、看到的数字);哪条勾不上就把那条下面的急救话术整段发给法器,修完回来重勾。建议每月一号 + 每次大改后各体检一遍。加练:把今天那张「固元体检表」设成一个固定提醒——比如手机日历每月一号提醒你「给站做一次固元体检」。一座有真人来往的站,安全和成本都是「需要定期复查的活物」,不是做完就一劳永逸。养成这个习惯,你就比 90% 的「做完站就不管」的人靠谱。
进阶加练(更想懂底层的人选做):让法器用大白话给你讲一遍「为什么前端遮罩挡不住、必须靠后端 RLS」——它会告诉你「任何人按 F12 都能看到前端代码、绕过遮罩,但绕不过数据库的 RLS 规则」。理解了这一句,你就真正懂了「付费墙的真锁在后端」这件事,而不只是会照做。
下一课预告:体检过了,你的站既安全又不超支,是一座能放心交给陌生人的真站了。
下一课,一键复刻——你会请法器把这一整套「注册→内容→付费墙→激活码」的骨架抽象成一个可复用的模板,然后现场换一个主题、重搭一座同款站。那一刻你会发现:你学会的不是「做了一个站」,而是「随时能再造一个站」的生产力。这才是筑基真正给你的东西。
# 第 17 课 · 一键复刻 · 把付费墙变成可复用模板
到上一课为止,你已经有了一座完整跑通的付费站:陌生人能注册、能登录、游客只看试读、会员才解锁、付钱给激活码就开通。它真的在公网上活着。
但这里藏着这门课最值钱的一句承诺:你学到的不是「做出某一个站」,而是「做出这一类站的能力」。 同样这套骨架——三张表(名册 profiles / 藏经阁 contents / 渡口令牌 activation_codes)、登录、付费墙、激活码——只要把里面装的内容主题换一换,立刻就是另一座全新的付费产品。面试题库可以,辅食食谱可以,AI 咒语库可以,刷题卡也可以。
今天就把这件事当场做一遍给你自己看,分三步:
打开你的法器(Codex),把【📜咒语卡 1·抽骨架咒】整段发给它。它会把你这座站拆成几块拼图,用人话告诉你:哪几块是「骨架」(每座站都一样、复刻时不用动),哪几块是「主题填充」(每座站不一样、复刻时要换)。
法器读完你的项目后,会输出一张类似这样的清单(你的具体内容以法器输出为准):
contents 表里的内容条目、首页文案、配色与封面图、is_free 哪几条做试读骨架看清了,接下来让法器把它变成一张可照着勾的待办清单。把【📜咒语卡 2·复刻清单咒】发给法器,告诉它你下一座站想做的新主题。
法器会生成一张按顺序排列的 checklist,每一条都是一个具体动作,例如:
contents 内容、录入新主题的 20 条内容is_free=true 做试读挑一个和你现在这座站不同的新主题——故意挑个不一样的,才能验证「换主题真的换得干净」。
老规矩,还是那三把尺子(任挑其一即可,今天只是演示,别纠结):①你有没有现成内容能凑 20 条 ②有没有人要 ③会不会越界。
打开你的法器,把【📜咒语卡 3·开分身咒】发给它,让它基于你现在这套代码、为新主题起一份新的项目副本,并帮你把站点名称、首页标语改成新主题。
这是最容易串味的一步,专门拎出来讲。第二座站的「壳」换了主题,但它连的还可能是同一个 Supabase 数据库里的旧内容——如果不换干净,新站点开会冒出上一座站的旧条目,主题就「串味」了。
两种正规做法,二选一(推荐 A):
contents 里录入新主题的 20 条内容。两座站各用各的数据库,永不串味。contents 内容先清空、再录入新主题内容。省一个项目,但两座站不能同时上线展示(共用一份内容)。让法器带你做(把【📜咒语卡 4·换内容咒】发给它,告诉它你选 A 还是 B)。
像第 1 课和第 14 课那样,把第二座站部署到新渡口(Cloudflare Pages),并按第 14 课教的,把环境变量(两把钥匙)填到线上平台——如果第五步你选了做法 A(新数据库),这里要填的是新数据库那两把钥匙,别填成旧的。
https://你的第二个项目名.pages.dev),手机打开能看到第二座站,主题是新的、不白屏。最后一步,验证「付费墙这套机制原封不动搬过来照样灵」:在第二座站注册一个新账号、登录、确认游客只看到试读;然后用你第 13 课造的同一批激活码(如果第五步选了 A 新数据库,记得让法器把激活码也录进新库一批),输入解锁,看会员内容是否出现。
【方括号】 里的内容按提示替换成你自己的,其余原样发送。【咒语卡 1 · 抽骨架咒】· 让法器把你这座站拆成「骨架」和「主题」两类
【咒语卡 2 · 复刻清单咒】· 让法器生成一张可照着勾的「换主题复刻清单」
【咒语卡 3 · 开分身咒】· 让法器基于现有代码、为新主题起一份项目副本
【咒语卡 4 · 换内容咒】· 让法器带你把旧内容换成新主题内容(不串味)
现象:第二座站打开,内容里冒出第一座站的旧条目(主题串味了)
contents 内容没清干净?或者第二座站填的环境变量(两把钥匙)还连着第一座站的旧数据库?现象:复刻后第二座站打开是一片空白 / 白屏
现象:法器把我原来那座线上站改坏了 / 改乱了
现象:第二座站激活码输进去解锁不了
你这一课赚到的,不只是站上又多了一座能收钱的复刻站——你还拿到了一件能反复用的东西:一张「换主题复刻清单」。以后做第 3、第 4 座站,帮朋友、接私单,照着它点一遍,就能把一套付费站套到下一个产品上。
../takeaways/17-复刻清单.md。怎么用:先看第一部分「骨架 vs 主题分家表」——眼睛只盯「🔁 要换」那一栏,「🔒 不动」那栏看都不用看;再从第二部分五步清单从上往下点,【方括号】 换成你第二座站的信息,每一步让法器带你做(咒语在本课「📜 咒语卡」里);复刻完照第三部分留个底,下一座站照着走几分钟立项。加练:把你那张「换主题复刻清单」精简成一段你自己看得懂的「复刻 SOP」,存进备忘录置顶——这是你毕业后做副业产品最值钱的随身工具。想再练手的,可以在脑子里走一遍第三座站会怎么搭,但别真去搭,留着精力出关。
下一课预告:两座站都立起来了,复刻的法门也握在手里了——筑基大圆满,只差最后一步:出关。
下一课是筑基出关·开宗立派大典:当场验收你的真站(注册→付费墙→激活码解锁全流程跑一遍)、授筑基印、换内门袍、领出师帖,再给你递上金丹期的内门拜帖。
# 第 18 课 · 筑基出关 · 开宗立派大典
过去十七课,你从一个"只会用网页点鼠标做静态页"的小白,一步步把自己练气期那个静态站,养成了一座会呼吸的真站:
今天不再给它加任何东西。今天做三件事,按顺序来:
打开你这十七节课,把每一课结尾的 ✅ 出关自查 清单挨个翻一遍,数一数:有多少课的自查,你是全部勾上的?
不用全过。毕业线是 18 课里至少 15 课全勾上(≥ 15/18)。哪几课当时卡了没全过,没关系——你今天产品能跑通,比当时某一步的勾更重要。
做一张简单的清点表(写在备忘录里就行):
整个筑基期,你过了四道阶段渡劫(课名里带 ★ 的那几课)。每一道渡劫,都对应你产品的一块"真本事"。现在挨个确认,你的站当下还守得住这四关:
四道里,至少点亮 3 道(≥ 3/4)就达标。前三道现在就能逐个点一遍;第四道是今天这堂课本身。
这是毕业大考最硬的一关,也是整门课"核心承诺可被验证"的那一刻。 前面两关是清点战绩,这一关是当场跑一遍真实剧本:你要扮一个完全陌生的人,从门外一路走到密室,全程在线、全程真实。
请严格按这个剧本走,一步都别跳。建议用手机或浏览器无痕窗口(这样不会带着你已登录的身份,最像"陌生人第一次来"):
is_free=false)的内容,确认你看不到正文——被付费墙拦住了。(这是闸门②在工作)这一条龙——注册 → 登录 → 撞墙 → 输码解锁 → 看到会员内容——就是设计里写死的"产品端到端验收"。它绿了,等于你这座站的整条商业闭环,对一个真实陌生人是通的。
毕业标准里有一条硬性的:产品成功部署到公网可访问(平台免费子域名就算达成,不一定非要真域名)。第三步你已经在手机/无痕窗口打开过了——这一步只是正式把它记成一块毕业基石,并补一个"别人也能开"的确认。
把你的在线链接,发给一个朋友,让他用他自己的手机/网络打开看看。
毕业大考三关全绿、公网可访问确认无误——绿灯亮齐,放行出关。 现在举行出师大典。这是仪式,慢慢来,一幕都别省。
#### 幕一 · 验收真器
你已经在前四步亲手验过了。此刻,最后看你的站一眼:它能注册、能登录、能存能改、能拦人、能收钱解锁、公网真能开。这不是教程里的截图,是你亲手造的、活在公网上的真器。
#### 幕二 · 授筑基·开宗朱印 + 换内门玄袍
你过了筑基全程四阶——立地基、通经脉、凝金锋、受香火。从今天起,你不再是那个"怕代码、怕被割"的外门小白。
让法器为你落下筑基朱印、换上内门玄袍:把咒语卡②【开宗朱印咒】发给 Codex,它会为你的"我的洞府"个人中心页加一枚出关徽记(一行小小的成就标识,比如"筑基大圆满 · 已出关"),并在你的站上留下这个时刻。
#### 幕三 · 印筑基出师帖(含你的真实链接 · 可截图分享)
这是大典的高潮。你要印一张筑基出师帖——一张能发出去、能让人点进来的成就卡,上面有:
让法器帮你把这张帖做出来:把咒语卡③【出师帖咒】发给 Codex,它会在你站上生成一张可截图分享的出师帖页面(或一张分享卡片),把上面这些信息排好版。
#### 幕四 · 立派复盘三句话
开宗之后,沉淀一下。用三句话给自己的筑基期收尾(写进备忘录,也建议发出去):
#### 幕五 · 金丹期内门拜帖 + 候补漏斗
出关不是终点,是另一座山的山脚。今天你做的这套,刻意没碰的那些——webhook 自动扣款、Edge Function 自动发码、商户号合规收款、防爆破限流、更复杂的会员体系——那是金丹期(进阶课)的天地。
金丹期内门拜帖:如果你想继续往上走,金丹期会带你把今天"演示态"的闭环,升级成"能真经营、能自动化、能扛量"的真产品。今天不必决定,先把出关这件事,好好庆祝完。 想了解后续,留意课程里的"金丹期候补"入口(你已经是内门弟子,候补优先)。
仪式毕,封存成品。让法器把你这座站存最后一档(git 提交)——给整个筑基期一个干净、可回头的句号。
把咒语卡④【出关封存咒】发给 Codex,它会把你当前这个"已出关、能跑通全闭环"的版本存成一个档,并打上一个一眼能认出的标记(比如"筑基出关 · v1.0")。
[方括号] 的地方按提示替换成你自己的内容,其余原样发。咒语卡① · 【端到端验收陪跑咒】让法器盯着你跑通全闭环
咒语卡② · 【开宗朱印咒】给"我的洞府"加一枚出关徽记
咒语卡③ · 【出师帖咒】印一张含真实链接、可分享的出师帖
咒语卡④ · 【出关封存咒】把成品存最后一档
[...] 里换成你自己的真实信息(链接、站名、宣言、日期),其余整段原样发给 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。」这是闸门②的核心,务必修到拦得住。现象:输激活码解锁那一步失败(提示不存在/已用/过期)
activation_codes,直接复制一行 used_by 为空、expires_at 还没过的码,粘进去再试。没有可用的码了,就用第 13 课咒语卡③再生成一批新码。详细见第 13 课急救区。现象:朋友打开你的链接是一片白屏(你本机却正常)
.env 填了,线上平台那一侧没填。你这最后一课赚到的,不只是站上多了一枚出关徽记、一张存档——你还把这一路 18 课攒下的所有物料,封装成了一套属于你自己的、随身带得走的全栈模板库。换个主题,照着它复刻一遍,几天就能再起一座新站。
../takeaways/18-出师帖与锦囊袋.md(第一部分)。怎么用:挑一个版式,把里面的 【方括号】 换成你的山门名、立派宣言、真实链接,填空即用;填完自己先点一下链接确认能打开,再截图发出去。填的全是「方向 + 链接」,不含任何钥匙,放心晒。../takeaways/18-出师帖与锦囊袋.md(第二部分)。怎么用:照着「打包四步」勾一遍——清点收齐 → 放进项目跟着仓库走 → 让 AGENTS.md 家规指向模板库 → 连模板库一起存最后一档。全绿了,你就有了一套丢不了、随时能复刻的传家底。加练一 · 把出师帖发出去:别只是截图存着。真发到朋友圈/小红书/给一个朋友——「我从零基础做出一座能注册能收钱的真站」。第一个陌生人因为你这张帖点进你的站,那一刻才是筑基真正圆满。
加练二 · 用模板再开一座山门:第 17 课你把这套付费墙抽成了可复用模板。趁手感还热,用它换个主题再复刻一座站(比如第一座做的是 AI 咒语库,这次做个考证刷题卡)。能复刻,才证明你学到的是"造站的能力",不是"抄了一个站"。
加练三 · 回头看一眼练气期的你:翻出你免费课做的那个静态小游戏/倒计时。从"只能看的死页面"到"能注册能收钱的真站"——这条路你十八课走完了。 截一张今昔对比,留给自己。
# 📜 咒语库 · 全栈法器版
[方括号] 里换成你自己的东西、整段粘给法器。剩下的,法器替你干。[方括号] 是唯一要你动手改的地方,换成你自己的主题/文件名/报错原文,其余一字不改,整段粘给法器。帮我做好看点给登录按钮加 hover 高亮,保留现有字段和文案,别动页面其他区域优化代码登录页加载慢,帮我把图片改成懒加载,只改这一处../takeaways/tishici-craft-ka.md。【先谋后动咒】· 大改动前,先让法器出方案、你点头再动
何时用:任何一个你心里没底的大改动(接数据库、写登录、立付费墙、连仓上线…)动手之前,先发这条。
这三句话,是本库每一条咒语的底色。很多咒语结尾都带着它们——不是啰嗦,是给你兜底。
【认主咒】· 让法器认识你要做的站
何时用:第一次和法器对话(第 2–3 课),给它定调子。
[...] 换成你的主题,其余一字不改。【接管咒】· 让法器接管你已有的项目文件夹
何时用:你已有一个项目文件夹(免费课的站/已搭起的站),想让法器在它基础上干活(第 3 课起)。
【全局问诊咒】· 改大动作前,先让法器讲清它要动哪儿
何时用:法器准备做一个你心里没底的大改动前,先让它交底再动手。
【新渡定锚咒】· 让法器帮你确认部署是否成功
何时用:第 1 课用网页拖拽部署后,第 2 课请到法器,想让它帮你复核站点是否正常。
【自选主题套用咒】· 把现成静态站换成你的主题外壳
何时用:第 1 课定好主题后,想让法器把免费课那个站的文案/配色,换成你会员站的主题(先做静态外壳,真内容后面再填)。
【旧站体检咒】· 部署前让法器把现成站查一遍
何时用:第 1 课部署前,想让法器确认现成站能不能直接上线、有没有明显问题。
【灵石封顶咒】· 让法器帮你确认中转配置与防超支
何时用:第 3 课用 cc-switch 配好供应商后,想确认法器真的连上了、且不会超支。
【门槛体检咒】· 配之前先确认前置都就位
何时用:第 3 课配 cc-switch 前,想让法器帮你确认前置(Node/Codex 装好了、cc-switch 打开了、手上备齐了配置信息)都 OK。
【备用法器咒】· 顺手配一条 Claude Code 作备用
何时用:第 3 课配好 Codex 主法器后,想再配一条 Claude Code 作备用(Codex 卡住时换它对照)。
【开户接脉咒】· 让法器把站接上 Supabase
何时用:第 5 课,你已在 Supabase 注册建好项目、拿到两把钥匙,要把它接进站里。
anon(绿钥匙)可以放前端;service_role(红钥匙)是最高权限,绝不能放进会上传的代码或前端。这条咒语已经替你把这点焊进去了。【连接自检咒】· 让法器做一个"连上了吗"自检页
何时用:接好 Supabase 后,想要一个能一眼看出"连通/没连通"的可视化页面(第 5 课微里程碑)。
【读第一条数据咒】· 让网页显示云端一句话(第 5 课微里程碑)
何时用:第 5 课接好 Supabase 后,想做"网页真的显示出云端第一条数据"这个微里程碑。
【立身证道咒】· 让法器加上邮箱密码注册登录
何时用:第 6 课,给站加注册/登录功能。
【自动建档咒】· 注册即自动在名册里建一行
何时用:第 6 课,登录做完后,让每个新注册用户自动在 profiles 名册表里建好档案。
is_member 字段——付费开关第 11 课才加。这一课只立"名册"。【会话讲透咒】· 验证"关掉浏览器还认得你"
何时用:第 6 课登录做完,想确认"会话"正常(关浏览器重开仍在登录),并让法器用人话讲透它。
contents(藏经阁)。它是平台内容:由你(站主)发布,所有访客/会员来读——不是每人发自己的那种 UGC。【藏经立库咒】· 建 contents 内容表
何时用:第 7 课,为你的会员站建放内容的表。
is_free 此时全设 true、暂不投用——第 11 课才真正分免费/会员;created_by 现在就记好站主身份,为第 10 课写权限锁打底。【schema 交底咒】· 建完表让法器把表结构回写进家规
何时用:第 6/7/11 课每建一张表 / 加一个字段后,让法器把最新表结构原样回写进 AGENTS.md(交底优先铁律落地)。
【加字段咒】· 给已有的表安全加一列
何时用:第 11 课给 profiles 加 is_member,或任何时候要给已有表加列。
is_member 默认 false(刚加时全站都还不是会员);加完别忘了第 12 课才把它接进读策略。【落子成形咒】· 站主新增内容 + 列表读取(C/R)
何时用:第 8 课,让你(站主)能往站里加内容,并在页面上列出来。
【改易由心咒】· 编辑与删除(U/D)
何时用:第 9 课,补上"改"和"删",CRUD 闭环。
【刷新还在验证咒】· 确认内容真存进了云端(埋雷验收)
何时用:第 8 课新增内容后,验证"刷新页面内容还在"——证明真存进了数据库,不是屏幕假象。
is_member 付费开关第 11 课才加)。【各守洞府咒】· 给 profiles + contents 上 RLS 锁
何时用:第 10 课,给名册和藏经阁上行级安全锁。
is_free 可读 / 非 free 暂挡,此时还没有 is_member。第 11 课才加 is_member,第 12 课把读策略统一为 is_free OR is_member——那是这一课读门的自然扩展,不是推翻重写。【游客会员互验咒】· 验证 RLS 锁真的拦住了
何时用:第 10 课上完锁,要亲眼确认"游客读不到非免费内容"。
【门禁交底咒】· 让法器把整套 RLS 策略回写存档
何时用:第 10 课配完 RLS 后,把这套门禁规则原样整理回贴、更新进 AGENTS.md(交底优先)。
is_member),第 12 课立付费墙(前端遮罩 + 后端 RLS 真拦截)。后端这一步才是付费墙的"真身"——前端遮罩任何人按 F12 都能绕过,真正拦人靠后端 RLS。【定品分阶咒】· 给名册加付费会员开关(is_member)
何时用:第 11 课,给 profiles 加 is_member 字段,并让 is_free 正式投入使用。
【设墙立禁咒】· 立付费墙(前端遮罩 + 后端 RLS 真拦截)
何时用:第 12 课,把"非会员看不到会员内容"做成真正的墙。
is_free OR (当前用户 is_member) 是第 10 课读门的自然扩展——第 10 课立门挡住非 free,第 11 课加了 is_member 这把钥匙,第 12 课把钥匙接进门。不是冲突,是接力。【meta 自证咒】· 给付费墙加一句"课程站同款"自证横幅
何时用:第 12 课付费墙做好后,想加 §9.1 的 meta 自证带(强化"你正在用的课程站就是同款实现")。
【渡口令牌咒】· 建激活码表 + 解锁逻辑
何时用:第 13 课,做"输激活码→变会员"的最小支付闭环。
【收款占位咒】· 放一张收款码占位 + 准入公平文案
何时用:第 13 课,在解锁页放收款码占位与正向说明。
【退款作废咒】· 关掉某人会员 + 作废激活码(运营动作)
何时用:第 13 课之后,要给某用户退款 / 关掉会员(spec §9.1 退款=is_member 翻 false + 令牌作废)。
is_member 这一个布尔开关,正着翻是"解锁",反着翻是"退款"——同一道门,两个方向。【立档存真咒】· 第一次把项目交给 git 看管
何时用:第 4 课,第一次给项目立档。
【渡劫存档咒】· 每过一关顺手存个档
何时用:任何一道大关/渡劫做完,趁着是好状态,存一个档(第 4 课起全程复用)。
【一键回档咒】· 改坏了,回到上一个好状态
何时用:改崩了、白屏了、越改越乱,想退回上一个能用的存档点。
.env 和线上平台是两处同一套秘密——线上没填,部署成功也会白屏。【雷动真渡咒】· 连 GitHub 仓自动部署
何时用:第 14 课,把全栈站连仓自动上线。
【传家底单咒】· 做一份 .env.example 防漏填
何时用:第 5 课埋、第 14 课兑现——做一份"该填哪些密钥"的清单模板。
【上线白名单咒】· 部署后补 Auth 重定向白名单 / CORS
何时用:第 14 课上线后,登录/注册在线上失灵,多半是白名单没配。
【报错三句话咒】· 任何卡点的万能模板
何时用:任何时候卡住、报错、白屏、按钮点了没反应——先用这条。
【先描述别删除咒】· 越改越乱时,先停手
何时用:法器连续改了几轮还没好、你已经看不懂改到哪了,想止损。
【交底排查咒】· 让法器讲清它到底改了什么导致出问题
何时用:某次改动后功能坏了,想搞清是哪一处改动惹的祸。
# 🆘 渡劫急救箱 · 现象化全栈版
筑基这一路,你一定会遇到红字、白屏、报错、卡住——这不是你笨,这是每个修士都会过的渡劫,90% 的人在 20 分钟内就过去了。但能不能 20 分钟过去,取决于你卡住的第一反应。
第一反应只有两个,记死它:
现象:黑窗口里打 node -v(或法器让你打的命令),提示「不是内部或外部命令」/「不是可识别的命令」/command not found
node -v。如果还是不行,把这句发给法器:
我在装 Node 环境。我刚做了:______(例:我从官网下载安装包点了下一步装完)。
我现在看到:在命令行里输 node -v,它说"不是内部或外部命令"。
我希望:能正常显示出版本号。我是 Windows 系统、零基础,请一步步带我,告诉我每一步该点哪里、输什么。
``现象:装 Codex CLI 时,一长串红字滚过去,最后停下不动 / 报 npm ERR! / 报网络超时(timeout / ETIMEDOUT)
registry.npmmirror.com,再重装一次 Codex」(国内拉包会快很多)。都不行就把整段红字截图发给法器:
我在装 Codex CLI。我刚做了:按你上一步给的命令安装。
我现在看到:______(截图,或抄最后那几行红字,尤其有没有 timeout / network 字样)。
我希望:能装完。我是 Windows、零基础,如果是网络问题请告诉我怎么换源或换网络重试。
``现象:提示「权限不足」/ EACCES / permission denied / 让你用管理员身份
现象:全程跟着做,但就是装不上 / 来回报错半小时(保底降级)
我装 Codex 卡了快半小时,反复报错。我现在只想先过关:让命令行能打出版本号就行。
请给我一条最简单、最不容易出错的安装方式,一步一步带我,Windows 零基础。
登录和配中转的事,我们第 3 课再弄,今天先不管。
``现象:cc-switch 配好了,但让 Codex 干活时报「认证失败」/「未授权」/ 401 / Unauthorized / invalid api key
我在用 cc-switch 给 Codex 配中转供应商。我刚做了:把供应商的 API Key 填进 cc-switch 并切换。
我现在看到:让你干活时报 401 / 未授权(或抄下原话)。
我希望:能正常调用。请告诉我除了 Key 填对,还要检查哪里(比如选对了哪个供应商、网址有没有填对)。
``现象:切换了供应商,但 Codex 好像「没生效」/ 还是连旧的 / 没反应
现象:配好能用,但担心钱花超了 / 不知道扣了多少
现象:法器要把代码推上 GitHub 时,弹窗让你登录 / 让你授权 / 浏览器跳出一个授权页
现象:推代码报 Authentication failed / 403 / 要你输密码但输了说不对
我在用 git 把项目推到 GitHub。我刚做了:按你说的推代码。
我现在看到:报 Authentication failed / 让我输密码但说不对。
我希望:能成功推上去。我是 Windows 零基础,听说 GitHub 现在不用密码要用令牌或浏览器授权,
请带我走最简单的那条(最好是浏览器点一下就授权的方式),一步步来。
``现象:报 repository not found / 找不到仓库 / 远程地址不对
我推代码时报 repository not found。我刚做了:______。
请帮我确认两件事:1)GitHub 上这个仓库到底建了没;2)本地连的远程地址对不对。
如果仓库没建,请带我在 GitHub 网页上建一个,然后重新连。
``现象:法器改完代码,站坏了 / 报错了 / 不如改之前好了,想退回去
刚才那次改动把站改坏了。请帮我回到上一个能正常运行的存档版本(用 git 回档),
回完之后告诉我:你退回到了哪一版、现在站应该恢复成什么样、我怎么验证它好了。
``现象:法器说「你有还没存档的改动,挡住了回档」/ 报 uncommitted changes 之类
你说我有没存档的改动挡住了回档。这些改动我不要了(我就是想退回上一个好版本)。
请帮我安全地丢弃这些没存档的改动,然后回到上一个正常存档版本,并告诉我回到了哪一版。
``现象:不确定「上一个好版本」是哪个 / 怕回错了
请用人话列出我最近几个存档(几点存的、当时大概干了什么),
帮我找出"最后一个站还正常"的那一版,我确认后再回档。
``现象:站打不开 / 报 Failed to fetch / Network Error / 控制台一堆红字,连不上 Supabase
我在按第 5 课连 Supabase。我刚做了:把项目网址和公开钥匙填进配置。
我现在看到:______(抄红字,尤其有没有 Failed to fetch / Network Error)。
我希望:网页能读到云端那条数据。请帮我逐项核对:网址对不对、钥匙填的是不是"公开那把(红绿对照里的绿钥匙)"、有没有填错位置。
``现象:连上了,但网页一片空白,没报错也没数据
我的站连 Supabase 后白屏、不报错也不出数据。请帮我检查:
1)配置文件里网址和钥匙是不是真的读到了;2)我是不是改完没重启站。
检查完用人话告诉我问题在哪、怎么验证修好了。
``现象:Invalid API key / JWT 相关红字
现象:站/数据库在国内打开特别慢、转圈、时通时断,换境外网络或不同运营商就好(国内访问)
guonei-fangwen-beixuan-caogao.md)——别照搬未经验证的 IP/域名。演示态自测优先用 ①②,③ 作「上线给真实国内用户」时的可达性增强项。现象:网页报 Invalid API key / 数据读不出来 / 权限怪异
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 文件,② 上线平台(Cloudflare/Vercel)的后台。本地填了 ≠ 线上填了。.env.example(传家底单)只列「有哪些项要填」,不含真值,这份可以上传。现象:本地跑得好好的,一部署上线,整个站白屏(空白页 / 转圈不出东西)
.env 填了,忘了去上线平台后台再填一遍。.env 里那几项原样填一遍,然后重新部署一次。把这句发给法器要清单:
我的站本地正常,一部署到 Cloudflare/Vercel 就白屏。我怀疑是线上环境变量没填。
请照着我本地的 .env.example,列出我必须在上线平台后台填哪几个变量(名字要和本地一致),
然后告诉我填完怎么重新部署、怎么验证白屏好了。
``现象:线上也填了变量,还是白屏
线上变量我填了还是白屏。请帮我逐个核对:平台后台的变量名是不是和代码里要的一字不差、
值有没有多空格、是不是填完忘了重新部署。用人话告诉我哪一项有问题。
``现象:你在本地改了 .env(换了钥匙 / 加了一项),但站好像没读到新的、还是老样子
.env 是启动时读一次的——你改完没重启本地开发服务,它还在用旧的。.env。还不行就发这句:
我在本地改了 .env 文件,但站好像没读到新值。我已经/没有重启过本地服务。
请带我正确地停掉再重新启动本地站,确认它读到了新的 .env;
并告诉我以后改 .env 是不是每次都要重启一下。
`
🔎 口诀:改了 .env`,先重启——本地改完重启 dev,线上改完重新部署。现象:刚配完 RLS,自己(站主)也读不到 / 改不了内容了,全空了
我按第 10 课开了 RLS,现在自己也读不到/改不了数据了。这是预期内的,请带我过劫:
1)给"站主本人"开放写权限(写策略锁 created_by = 我);
2)读策略按第 10 课口径:is_free=true 谁都能读、非 free 暂时挡住;
配完用人话告诉我:站主能改吗、游客能看免费内容吗、游客被挡住的是不是非免费内容,我怎么逐一验证。
``现象:第 12 课加了会员判断后,会员账号也看不到会员内容 / 游客反而能看到了
我在做第 12 课付费墙。现在权限不对:______(例:会员看不到会员内容 / 游客能看到付费内容)。
请把 contents 的读策略统一成"is_free=true 谁都能读 OR 当前用户 is_member=true 能读全部",
这是第 10 课读门的自然扩展。配完带我用两个账号验:游客只看到免费的、会员看到全部。
``现象:用「游客账号」和「会员账号」互验,结果两个看到的一样
我用游客和会员两个账号测,看到的内容一样,怀疑后端没真拦住。
请检查 contents 的 RLS 读策略是否真的生效(不是只有前端遮罩),
用人话告诉我后端到底拦没拦、怎么从数据库这边验证。
``现象:存内容 / 读内容报 column ... does not exist / 字段不存在 / 400 带列名报错
我存/读内容时报"某列不存在"。我现在看到:______(抄报错,尤其引号里那个列名)。
请先帮我把 contents 表"实际有哪些列"查出来对一遍,再检查代码里用的列名是不是和它一字不差。
不对就帮我改成一致的,并告诉我改了哪里、怎么验证存得进去了。
``现象:存的时候报「某列不能为空」/ null value ... violates not-null
created_by 没填上)。
我存内容时报"某列不能为空":______(抄列名)。
请告诉我这列该填什么、能不能让它自动填(比如 created_by 自动等于当前登录用户),
帮我改好并验证能存进去。
``现象:新增 / 删除内容成功了,但页面列表不自动更新,要手动刷新(F5)才看到变化**
我新增/删除内容后,数据确实变了(刷新页面就对),但页面列表不会自动更新,要我手动刷新。
请帮我在"新增成功 / 删除成功"之后,自动重新拉一遍列表(或把那条直接加到/从列表里去掉),
让我不用手动刷新就能看到最新的。只改这一处,改完让我试。
``现象:输了激活码,会员没开通 / is_member 没翻成 true / 付费墙还在
profiles 里的会员开关,或码本身状态不对。
我在测第 13 课激活码解锁。我刚做了:输入激活码点解锁。
我现在看到:会员没开通、付费墙还在(或抄报错)。
我希望:输码后我的 profiles.is_member 翻成 true、付费墙消失、能看到会员内容。
请带我查:这个码是不是有效(没被用过、没过期)、核销时有没有真的把我这行的 is_member 改成 true。
``现象:激活码提示「已被使用」/「已过期」/ 用过一次再用就不行
这个激活码已被使用/已过期,这是正常的(一次性+7天有效期)。
我要再测一遍解锁流程,请帮我生成一个新的有效激活码,并告诉我它什么时候过期。
``现象:想退款 / 把某人的会员关掉
我要把某个用户的会员关掉(退款)。请帮我把他的 profiles.is_member 翻回 false、
对应的激活码作废,并告诉我怎么验证他现在又看不到会员内容了。
``现象:注册 / 登录报「邮箱或密码错误」/ Invalid login credentials
我登录报"邮箱或密码错误"。我用的邮箱是 ______,我确定已经注册过/不确定。
请帮我确认这个邮箱在 Supabase 用户里到底有没有,如果有但密码忘了,带我走重置密码;
如果没有,带我先注册。
``现象:注册后说要「验证邮箱」,但收不到验证邮件****
我注册后收不到验证邮件(垃圾箱也没有)。我现在是自测阶段想先跑通。
请告诉我两条路:1)怎么手动把我这个账号确认为已验证;
或 2)自测期间怎么在 Supabase 后台暂时关掉邮箱验证(上线前我再打开)。我零基础,一步步带我。
``现象:登录成功了,但刷新一下又变回没登录 / 一直要重新登
我登录后一刷新就退出了,登录状态没保持。请帮我检查会话有没有正确保存,
修好后告诉我:现在刷新还在登录吗、我怎么验证。
``现象:本地登录/读数据都正常,一上线就报 CORS / 跨域 / blocked by CORS policy 红字
我的站本地正常,上线后报 CORS / 跨域错误。我上线后的网址是 ______。
请带我把这个线上网址加到 Supabase 该允许的地方(白名单),一步步来,我零基础。
配完告诉我怎么验证线上能正常登录/读数据了。
``现象:上线后登录/注册跳转回来就失败 / 重定向到错误页 / redirect URL not allowed
我上线后登录/注册跳转失败,提示重定向地址不允许。我的线上网址是 ______。
请带我去 Supabase 的 Auth 设置,把这个线上网址加进允许的重定向白名单(包括首页地址)。
一步步来,配完告诉我怎么验证。
``现象:之前都好好的,隔了几天再打开,站全死了 / 登录注册全失败 / 数据全读不出来
我的站隔几天没动,现在登录/读数据全失败。我怀疑是 Supabase 免费项目被自动暂停了(7天没活动)。
请带我去后台看项目是不是 Paused 状态,如果是怎么恢复;
恢复后告诉我怎么验证站又活了,以及以后引真人来之前怎么先"唤醒"一下别让他们扑空。
``现象:要拉真人来注册了,怕他们一来就撞上「暂停」扑空
锦囊袋,是你上这门《码上飞升·筑基正传》一路攒下来的可复用 / 可分享物料合集。
每一课,你赚到的都不只是「站上多一块功能」——你还会拿到一件能反复用的东西:一张填空即用的模板、一段复制即用的代码、一张照着点就不漏的清单。这些东西全部躺在这个 takeaways/ 文件夹里。
它和课文最大的区别是:课文是教你这一次怎么做,锦囊是你下一次(做第二个站、帮朋友、接私单)直接拿来就用的。 课文会忘,锦囊不会——它就在你硬盘里,随时翻出来。
【方括号】 的地方,换成你自己的;其余一字不改。拿不准就把整段连同你的项目情况发给法器,让它替你填。service_role 字样的密钥,绝不进前端、绝不发给任何人、绝不截图。模板里凡涉及密钥的地方都会再提醒你一次。✅ 放心分享:立项卡、装环境清单、git 速查、部署清单、固元体检表、换主题复刻清单、出师帖——这些是方法和流程,分享出去只会显得你专业,不会泄露任何秘密。
✅ 代码 / SQL 模板也能分享给同学一起学——它们是通用骨架,不含你的真实数据和钥匙。
🚫 永远不要分享:你的 .env 文件本体、任何真实钥匙(尤其 service_role)、Supabase 后台截图里没打码的地址和密钥。模板可以传,钥匙不能传。